77 lines
4.3 KiB
JSON
77 lines
4.3 KiB
JSON
{
|
||
"slug": "shortcutpanel",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 shortcutpanel：.kole-shortcut 是面板，列表两列网格，键位用 .kole-shortcut-key 描边。",
|
||
"usage": [
|
||
"面板 .kole-shortcut 自带 1px 边框、8px 圆角与 14px 内边距（frameworks/ShortcutPanel.css:2）。",
|
||
"搜索框 .kole-shortcut-search 占满整行（width:100% 加 box-sizing:border-box），聚焦换品牌边框加 3px 光晕，并显式 outline:none（frameworks/ShortcutPanel.css:3-4）。",
|
||
"列表 .kole-shortcut-list 是两列网格加 8px 间距，列宽 1fr 1fr 等分（frameworks/ShortcutPanel.css:5）。",
|
||
"单条 .kole-shortcut-item 用 space-between 把描述推左、键位推右，底色用表头底（frameworks/ShortcutPanel.css:6）。",
|
||
"键位 .kole-shortcut-key 用 Consolas 等宽字体加 1px 边框与卡片底，模拟键盘按键外观（frameworks/ShortcutPanel.css:7）。",
|
||
"空态 .kole-shortcut-empty 用 grid-column:1 / -1 横跨两列居中显示（frameworks/ShortcutPanel.css:8）。",
|
||
"窄屏有断点：max-width:520px 时列表改为单列（frameworks/ShortcutPanel.css:9）。"
|
||
],
|
||
"bestPractices": [
|
||
"空态必须放在 .kole-shortcut-list 内，它靠 grid-column:1 / -1 横跨整行；放在网格外会退化成普通块（frameworks/ShortcutPanel.css:8）。",
|
||
"520px 断点是本文件唯一的媒体查询，也是目标清单里少数自带响应式的组件；改列数要同时改基础规则与断点（frameworks/ShortcutPanel.css:5、9）。",
|
||
"键位用等宽字体渲染才有“按键”质感，换字体时注意保留该属性（frameworks/ShortcutPanel.css:7）。"
|
||
],
|
||
"a11y": [
|
||
"搜索框已 outline:none，焦点可见性靠 :focus 的品牌边框与光晕，业务侧不要取消（frameworks/ShortcutPanel.css:4）。",
|
||
"键位是文本节点而非真实按键，读屏会逐字符读出；建议给组合键加 aria-label 写成自然语言（frameworks/ShortcutPanel.css:7）。",
|
||
"列表用网格布局而非 ul/li，若需列表语义要自行补 role=\"list\"（frameworks/ShortcutPanel.css:5）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-shortcut（面板）、.kole-shortcut-search（搜索）、.kole-shortcut-list（两列网格）、.kole-shortcut-item（条目）、.kole-shortcut-key（键位）、.kole-shortcut-empty（空态）；没有状态类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-shortcut",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ShortcutPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-shortcut-search",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ShortcutPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-shortcut-list",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ShortcutPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-shortcut-item",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ShortcutPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-shortcut-key",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ShortcutPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-shortcut-empty",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ShortcutPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ShortcutPanel.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"shortcutpanel-ex-1"
|
||
],
|
||
"notes": [
|
||
"面板与搜索见 frameworks/ShortcutPanel.css:2-4，列表与条目见 frameworks/ShortcutPanel.css:5-6，键位见 frameworks/ShortcutPanel.css:7，空态与断点见 frameworks/ShortcutPanel.css:8-9。",
|
||
"该文件是目标清单中少数带 @media 断点的文件（frameworks/ShortcutPanel.css:9）。",
|
||
"示例写了 search 与 list 两处（site/examples/shortcutpanel.json），条目由脚本渲染。"
|
||
]
|
||
}
|