Avatar 头像
裁成圆形的照片,28、40 或 64px。没有照片时在奶油色底上显示名字的首字母。
提到一个人的地方:信息行旁边用 28px,资料小卡片用 40px,关于页顶上用 64px。没有照片时一律用首字母,不用生成的图、渐变或人形图标。头像上不加任何东西:没有描边、徽章或状态点。
页面里怎么写
Section titled “页面里怎么写”---import portrait from "../assets/avatar.png";---<Avatar src={portrait} name="RottenTh" size="lg" />指定大小的圆。照片用 object-fit: cover 填满。首字母取 name 前两个词的第一个字,无衬线字体,字重 500,字号是头像大小的 36%。
| 属性 | 取值 |
|---|---|
size |
sm(28px)、md(40px,默认)、lg(64px),或像素数 |
src |
导入的图片,按头像大小生成 1x 和 2x;或者网址,原样使用 |
tone |
cream(默认)或 dark,头像所在的底色 |
照片用 alt,默认为空,因为名字通常就写在旁边。首字母对读屏软件隐藏,这时头像是一张以 name 命名的图片。
Avatar.astro。从交付包移植。