Avatar 头像

头像用于代表用户或事物,支持图片、图标或字符等。

使用方法

按需导入组件:

import 'mdui/components/avatar.js';

按需导入组件的 TypeScript 类型:

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

使用示例:

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

示例

图片头像

可以使用 src 属性指定一个图片链接作为头像,或者在 default slot 中提供一个 <img> 元素作为头像。

可以使用 fit 属性定义图片如何适应容器框,类似于原生的 object-fit

图标头像

可以使用 icon 属性指定一个 Material Icons 图标作为头像,或者在 default slot 中提供一个图标元素作为头像。

字符头像

可以在 default slot 中使用任意文字作为头像。

API

属性

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

头像图片的 URL 地址

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

图片如何适应容器框,与原生的 object-fit 属性相同。可选值包括:

  • contain:保持图片原有尺寸比例,内容会被等比例缩放
  • cover:保持图片原有尺寸比例,但部分内容可能被剪切
  • fill:默认值,不保持图片原有尺寸比例,内容会被拉伸以填充整个容器
  • none:保留图片原有尺寸,内容不会被缩放或拉伸
  • scale-down:保持图片原有尺寸比例,内容尺寸与 nonecontain 中较小的一个相同
iconiconstring-

头像的 Material Icons 图标名

labellabelstring-

头像的替代文本描述

Slots

名称
默认

自定义头像内容,可以为字母、汉字、<img> 元素、图标等

CSS Parts

名称
image

使用图片作为头像时,组件内部的 <img> 元素

icon

使用图标作为头像时,组件内部的 <mdui-icon> 元素

CSS 自定义属性

名称
--shape-corner

组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库