97 lines
5.1 KiB
JSON
97 lines
5.1 KiB
JSON
{
|
||
"slug": "avatar",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 avatar：.kole-avatar-avatar 是 40px 圆形头像，is-offline 置灰，.kole-avatar-status 挂在线点。",
|
||
"usage": [
|
||
"头像本体 .kole-avatar-avatar 是 40px 正方形、border-radius:50%、溢出隐藏，底色 --kole-color-brand 加白字（frameworks/Avatar.css:43）。",
|
||
"放图片时直接塞 img 子元素，规则已给 img 宽高 100% 与 object-fit:cover，不用自己裁（frameworks/Avatar.css:44）。",
|
||
"离线态加 .is-offline，走 filter:grayscale(1) 加 0.65 透明度，图片和文字都适用（frameworks/Avatar.css:45）。",
|
||
"在线状态点用 .kole-avatar-status，9px 圆点带 2px 卡片色描边，靠负 margin 叠到头像右下角（frameworks/Avatar.css:46）。",
|
||
"多个头像横排用 .kole-avatar-item 包裹，它是 inline-flex 并且 min-height 取 --kole-control-height-default（frameworks/Avatar.css:17）。",
|
||
"需要额外留白或降字号时用 .kole-avatar-compact，内边距改为 --kole-space-4/--kole-space-8（frameworks/Avatar.css:12）。"
|
||
],
|
||
"bestPractices": [
|
||
"本文件与 Alert/Badge/Drawer 等 20 个文件逐行同构（仅首行组件名不同），.kole-avatar-avatar 这一段才是头像语义所在；引用类名前先确认它属于头像而不是骨架里别的块（frameworks/Avatar.css:43-46）。",
|
||
"状态点靠负 margin-left:-10px 与 margin-top:28px 定位到 40px 头像的右下角，头像尺寸一改这两个值要跟着算（frameworks/Avatar.css:46）。",
|
||
"is-offline 用 filter 置灰，会把子元素一起灰掉；头像内若还有别的彩色标记也会被影响（frameworks/Avatar.css:45）。"
|
||
],
|
||
"a11y": [
|
||
"头像里的文字或图片需要替代文本：示例用 aria-label 标注姓名（site/examples/avatar.json），样式层不会补（frameworks/Avatar.css:43）。",
|
||
"is-offline 的 grayscale 只改视觉，语义上是否离线需另行文本说明，颜色不是唯一信息通道（frameworks/Avatar.css:45）。",
|
||
"状态点是 9px 纯色圆，属于装饰元素，应置于 aria-hidden 或由外层文本承担语义（frameworks/Avatar.css:46）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-avatar（根）、.kole-avatar-avatar（头像本体）、.kole-avatar-status（状态点）、.kole-avatar-item（横排单元），状态由 .is-offline 表达。",
|
||
"table": [
|
||
{
|
||
"name": "kole-avatar",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-avatar-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Avatar.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Avatar.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"avatar-ex-1",
|
||
"avatar-ex-2"
|
||
],
|
||
"notes": [
|
||
"头像本体见 frameworks/Avatar.css:43，图片裁切见 frameworks/Avatar.css:44，离线态见 frameworks/Avatar.css:45，状态点见 frameworks/Avatar.css:46。",
|
||
"该文件属 72 行生成骨架家族（与 Alert.css 逐行同构），骨架里另有 switch、pager、drawer 等与头像无关的块，本页类名表只取头像语义相关的。",
|
||
"契约的 size 形态在 css 端没有独立类，只有 40px 一种尺寸（frameworks/Avatar.css:43）。"
|
||
]
|
||
}
|