MDUI文档
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
样式
与框架集成
组件
Avatar 头像Badge 徽标BottomAppBar 底部应用栏Button 按钮ButtonIcon 图标按钮Card 卡片Checkbox 复选框Chip 纸片CircularProgress 圆形进度指示器Collapse 折叠面板Dialog 对话框Divider 分割线Dropdown 下拉组件Fab 浮动操作按钮Icon 图标Layout 布局LinearProgress 线性进度指示器List 列表Menu 菜单NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏Radio 单选框RangeSlider 范围滑块Select 选择框SegmentedButton 分段按钮Slider 滑块Snackbar 消息条Switch 开关切换Tabs 选项卡TextField 文本框Tooltip 工具提示TopAppBar 顶部应用栏
工具函数
独立包

Avatar 头像

Avatars represent users or entities by displaying images, icons, or characters.

Usage

Import the component:

import 'mdui/components/avatar.js';

Import the TypeScript type:

import type { Avatar } from 'mdui/components/avatar.js';

Example:

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

Examples

Image Avatar

To use an image as the avatar, specify the image link using the src attribute, or provide an <img> element within the default slot.

The fit attribute determines how the image should fit the container box. It works similar to the native object-fit property.

Icon Avatar

To use a Material Icons icon as the avatar, specify the icon using the icon attribute. Alternatively, provide an icon element within the default slot.

Character Avatar

You can use any text within the default slot as the avatar.

API

属性

HTML 属性JavaScript 属性Reflect类型默认值
srcsrcstring-

URL of the avatar image.

fitfit'contain' | 'cover' | 'fill' | 'none' | 'scale-down'-

Image resizing method, similar to the native CSS object-fit. Possible values:

  • contain: Scales the image to fit within the box while maintaining the aspect ratio. The image will be "letterboxed" if the aspect ratios do not match.
  • cover: Scales the image to fill the box while maintaining the aspect ratio. The image will be clipped if the aspect ratios do not match.
  • fill: Default. Scales the image to fill the box. The image will be stretched if the aspect ratios do not match.
  • none: No resizing.
  • scale-down: Scales as if none or contain were specified, choosing the smaller result.
iconiconstring-

The Material Icons name for the avatar.

labellabelstring-

Text description of the avatar.

Slots

名称
默认

Custom avatar content, such as letters, <img> elements, icons, etc.

CSS Parts

名称
image

Internal <img> element when using an image avatar.

icon

Internal <mdui-icon> element when using an icon avatar.

CSS 自定义属性

名称
--shape-corner

The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

本页目录