96 lines
4.7 KiB
JSON
96 lines
4.7 KiB
JSON
{
|
||
"slug": "badge",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 badge：.kole-badge-badge-host 定位宿主，.kole-badge-badge 是右上角绝对定位的计数角标。",
|
||
"usage": [
|
||
"角标必须挂在宿主里：.kole-badge-badge-host 提供 position:relative 与内边距，角标才能贴住它的右上角（frameworks/Badge.css:38）。",
|
||
"角标本体 .kole-badge-badge 是绝对定位，用 translate(35%,-35%) 骑在宿主角上，最小 18px 圆角胶囊加白字（frameworks/Badge.css:39）。",
|
||
"状态只改底色：is-success 走 --kole-color-success，is-info 走 --kole-color-info，默认底色是 --kole-color-error（frameworks/Badge.css:39-41）。",
|
||
"只要一个小圆点时用 .kole-badge-dot，8px 圆、错误色实底，不带数字（frameworks/Badge.css:42）。",
|
||
"被标注的内容放在 .kole-badge-badge-host 内平级位置，角标是叠加层不挤占布局（frameworks/Badge.css:38-39）。"
|
||
],
|
||
"bestPractices": [
|
||
"host 的 padding 取 --kole-space-12，是给角标溢出预留的空间；padding 收得太小角标会被父容器裁掉（frameworks/Badge.css:38）。",
|
||
"角标宽度靠 min-width:18px 加左右 5px 内边距自适应，三位数以上会自然变宽，不要写死 width（frameworks/Badge.css:39）。",
|
||
"本文件属 72 行生成骨架，骨架里也有 .kole-badge-switch、.kole-badge-page 等与角标无关的块；用类名前先确认它在角标语义段（frameworks/Badge.css:38-42）。"
|
||
],
|
||
"a11y": [
|
||
"角标里的数字是纯视觉增量信息，读屏不会自动播报；请在宿主上补可访问名称或 aria-label（frameworks/Badge.css:39）。",
|
||
"默认底色 --kole-color-error 与白色文字在小字号（11px）时对比需自查，主题改令牌后尤其要复核（frameworks/Badge.css:39）。",
|
||
"小圆点 .kole-badge-dot 无文本内容，应作为装饰处理，语义由外层文案承担（frameworks/Badge.css:42）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-badge-badge-host（定位宿主）与 .kole-badge-badge（角标本体），另有 .kole-badge-dot（无数字圆点），状态由 is-success / is-info 表达。",
|
||
"table": [
|
||
{
|
||
"name": "kole-badge",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-badge-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Badge.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Badge.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"badge-ex-1",
|
||
"badge-ex-2"
|
||
],
|
||
"notes": [
|
||
"宿主见 frameworks/Badge.css:38，角标本体见 frameworks/Badge.css:39，状态底色见 frameworks/Badge.css:40-41，圆点见 frameworks/Badge.css:42。",
|
||
"示例用 aria-label 描述计数（site/examples/badge.json），样式层不含该属性。",
|
||
"该文件属 72 行生成骨架家族，与 Alert.css 逐行同构；骨架内非角标块未写入本页类名表。"
|
||
]
|
||
}
|