69 lines
3.1 KiB
JSON
69 lines
3.1 KiB
JSON
{
|
||
"slug": "segmented",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "分段控制器样式：kole-segmented 容器加 item，is-active 表选中、is-disabled 表不可用。",
|
||
"usage": [
|
||
"容器 .kole-segmented 给页面底色与内边距，每个片段 .kole-segmented-item 平分宽度。",
|
||
"选中态在片段上加 .kole-segmented-item.is-active，背景变卡片白（浅色主题）或品牌色，禁用加 .is-disabled。",
|
||
"两个状态类同元素互斥，切换时由宿主在片段间搬运 .is-active。",
|
||
"容器底色用 --kole-color-page-bg，选中底用 --kole-color-card-bg 与 --kole-color-brand。"
|
||
],
|
||
"bestPractices": [
|
||
"只有三个类，别用按钮类替代片段，两者的圆角与内边距基线不同。",
|
||
"片段数量超过四个时本文件不提供省略或滚动，需要宿主换用其他导航形态。",
|
||
"选中态只改底色与文字色，指示块滑动动画不在本文件内。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-segmented",
|
||
"type": "基础类",
|
||
"desc": "分段容器：页面底色、圆角与内边距（frameworks/Segmented.css:2）"
|
||
},
|
||
{
|
||
"name": "kole-segmented-item",
|
||
"type": "结构类",
|
||
"desc": "单个片段，等分宽度与 hover（frameworks/Segmented.css:5）"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "状态类",
|
||
"desc": "选中片段：白底或品牌底 + 强调文字（frameworks/Segmented.css:10）"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类",
|
||
"desc": "不可用片段：禁用文字色、不可点（frameworks/Segmented.css:10）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"分段控制器是单选控件，建议用 role=radiogroup 加 role=radio/aria-checked，或直接用原生 radio 加这些类。",
|
||
"键盘方向键切换分组内选中由宿主实现，样式层只表达选中外观。",
|
||
"禁用片段用 aria-disabled 并移出 tab 顺序，避免只加类带来的「可聚焦但无响应」。",
|
||
"选中底与片段文字的对比在浅色主题靠白底与页面底色差，深色主题需复核。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Segmented.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Segmented.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"segmented-ex-1",
|
||
"segmented-ex-2",
|
||
"segmented-ex-4"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Segmented.css:2 定义 .kole-segmented",
|
||
"依据 frameworks/Segmented.css:5 定义 .kole-segmented-item",
|
||
"依据 frameworks/Segmented.css:10 定义 .is-active",
|
||
"依据 frameworks/Segmented.css:10 定义 .is-disabled",
|
||
"类名总表来自 frameworks/Segmented.css（facts.consumedApi.classes，5 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|