97 lines
5.1 KiB
JSON
97 lines
5.1 KiB
JSON
{
|
||
"slug": "popover",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 popover：.kole-popover-popover-wrap 做定位宿主，.kole-popover-popover 是下拉卡片面板。",
|
||
"usage": [
|
||
"定位宿主 .kole-popover-popover-wrap 是 position:relative 的 inline-flex，面板相对它定位（frameworks/Popover.css:59）。",
|
||
"面板 .kole-popover-popover 绝对定位在宿主下方 8px、左侧对齐，最小宽 160px、最大 260px，内边距 8px 12px 加中圆角与中投影（frameworks/Popover.css:60）。",
|
||
"面板外观由单独一条覆盖给出：正文色加卡片底加 1px 边框（frameworks/Popover.css:62）。",
|
||
"同文件里还有轻量提示 .kole-popover-tip：反色文字加工具提示底色，适合一行短文案（frameworks/Popover.css:61）。",
|
||
"隐藏用 [hidden] 属性：.kole-popover-tip[hidden]、.kole-popover-popover[hidden] 等统一 display:none（frameworks/Popover.css:63）。",
|
||
"触发器用骨架通用的 .kole-popover-button（并可用 .kole-popover-primary 给它品牌实底）（frameworks/Popover.css:10、15）。"
|
||
],
|
||
"bestPractices": [
|
||
"该文件是 72 行生成骨架（与 Alert.css / Avatar.css 等 20 个文件仅首行组件名不同），弹层相关只有第 59-63 行，其余块与浮层无关（frameworks/Popover.css:59-63）。",
|
||
"popover 与 tip 共用同一条定位规则（第 60 行是合并选择器），所以两者的位置与尺寸上限一致，差异只在外观（frameworks/Popover.css:60-62）。",
|
||
"显隐必须用 [hidden] 属性（第 63 行），加类名不会隐藏；业务侧控制属性即可（frameworks/Popover.css:63）。"
|
||
],
|
||
"a11y": [
|
||
"示例在触发器上写了 aria-controls、aria-expanded 与 role（site/examples/popover.json），说明展开状态与关联关系由业务侧声明（frameworks/Popover.css:59-60）。",
|
||
"面板移出视口或超出 260px 上限时内容会折行，长文案建议改用可滚动结构（frameworks/Popover.css:60）。",
|
||
"触发器若是图标按钮需补 aria-label，骨架的统一焦点样式（2px 品牌 outline）已覆盖 button（frameworks/Popover.css:9、15）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-popover-popover-wrap（定位宿主）与 .kole-popover-popover（面板），同文件另有轻量 .kole-popover-tip；显隐靠 [hidden] 属性，触发器复用骨架的 -button / -primary。",
|
||
"table": [
|
||
{
|
||
"name": "kole-popover",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-popover-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Popover.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Popover.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"popover-ex-1",
|
||
"popover-ex-2"
|
||
],
|
||
"notes": [
|
||
"定位宿主见 frameworks/Popover.css:59，面板定位见 frameworks/Popover.css:60，面板与提示的外观见 frameworks/Popover.css:61-62，隐藏见 frameworks/Popover.css:63。",
|
||
"该文件属 72 行生成骨架家族（与 Alert.css 逐行同构），骨架内非浮层语义的块未写入本页类名表。",
|
||
"示例 ex-1 用 popover-wrap、popover、button、primary 全套，ex-2 用 surface 加 desc（site/examples/popover.json）。"
|
||
]
|
||
}
|