96 lines
4.8 KiB
JSON
96 lines
4.8 KiB
JSON
{
|
||
"slug": "drawer",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 drawer：.kole-drawer-drawer-mask 遮罩配 .kole-drawer-drawer 右侧 360px 抽屉，底部有操作区。",
|
||
"usage": [
|
||
"遮罩 .kole-drawer-drawer-mask 固定全屏、z-index 20、底色取 --kole-color-mask（不是硬编码 rgba，随主题变化）（frameworks/Drawer.css:68）。",
|
||
"抽屉 .kole-drawer-drawer 固定定位在右侧：上 0、宽 360px、上限 90vw、满高，z-index 21 压在遮罩之上（frameworks/Drawer.css:69）。",
|
||
"底部操作区 .kole-drawer-drawer-footer 绝对定位贴住抽屉底部（左右下各留 16px），右对齐并留 8px 间距（frameworks/Drawer.css:70）。",
|
||
"隐藏用 [hidden] 属性而不是类：.kole-drawer-tip[hidden]、.kole-drawer-popover[hidden]、.kole-drawer-drawer[hidden] 统一 display:none（frameworks/Drawer.css:63）。",
|
||
"标题与说明用 .kole-drawer-title 与 .kole-drawer-desc（骨架通用，取标题色与次级色）（frameworks/Drawer.css:5-6）。"
|
||
],
|
||
"bestPractices": [
|
||
"该文件属 72 行生成骨架，抽屉相关只有 mask / drawer / drawer-footer 三条（第 68-70 行），其余块（switch、pager、badge）与抽屉无关（frameworks/Drawer.css:68-70）。",
|
||
"抽屉宽 360px 与 90vw 上限都写死在 .kole-drawer-drawer 上，改宽度改这一条（frameworks/Drawer.css:69）。",
|
||
"显示隐藏走 [hidden] 属性：加类名不会隐藏，必须设 hidden 或覆盖 display（frameworks/Drawer.css:63）。"
|
||
],
|
||
"a11y": [
|
||
"抽屉建议补 role=\"dialog\" 与 aria-modal，并把焦点移入；骨架里只有定位与底色（frameworks/Drawer.css:69）。",
|
||
"示例在抽屉上写了 role、aria-modal 与 aria-labelledby（site/examples/drawer.json），说明这些属性由业务侧声明。",
|
||
"遮罩用 --kole-color-mask 令牌，深色主题下自动适配，别改成硬编码 rgba（frameworks/Drawer.css:68）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-drawer-drawer-mask（遮罩）、.kole-drawer-drawer（抽屉本体）、.kole-drawer-drawer-footer（底部操作区），隐藏靠 [hidden] 属性；另有骨架通用类 .kole-drawer-title / -desc / -surface 等。",
|
||
"table": [
|
||
{
|
||
"name": "kole-drawer",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-drawer-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Drawer.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Drawer.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"drawer-ex-1",
|
||
"drawer-ex-2"
|
||
],
|
||
"notes": [
|
||
"遮罩见 frameworks/Drawer.css:68，抽屉本体见 frameworks/Drawer.css:69，底部操作区见 frameworks/Drawer.css:70，隐藏规则见 frameworks/Drawer.css:63。",
|
||
"该文件属 72 行生成骨架家族（与 Alert.css 逐行同构），骨架内非抽屉语义的块未写入本页类名表。",
|
||
"示例覆盖了 mask、drawer、title、desc 与 drawer-footer 全套结构（site/examples/drawer.json 的 ex-1）。"
|
||
]
|
||
}
|