97 lines
5.3 KiB
JSON
97 lines
5.3 KiB
JSON
{
|
||
"slug": "layoutswitcher",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端布局切换器样式：128px 选项卡片加 is-active 选中描边，缩略图用三个色块类拼出导航形态。",
|
||
"usage": [
|
||
"容器 .kole-layoutsw 是横向 flex、gap 12px、flex-wrap:wrap，选项多了会自动换行（LayoutSwitcher.css:2）。",
|
||
"选项卡片 .kole-layoutsw-opt 固定 128px 宽、8px 内边距、圆角 8px，并声明 border-color 与 box-shadow 的 0.15s 过渡（LayoutSwitcher.css:3）。",
|
||
"三种视觉状态分别是：默认 1px --kole-color-border 描边、悬停 #B7C4FF 描边、选中 .is-active 品牌色描边加 0 0 0 3px rgba(47,84,235,0.12) 光晕（LayoutSwitcher.css:3-5）。",
|
||
"缩略图 .kole-layoutsw-mini 是 66px 高的纵向 flex 框，overflow:hidden 让内部色块不越出圆角，自身还带一层卡底与描边（LayoutSwitcher.css:6）。",
|
||
"三个色块类语义固定：.s-top 16px 高品牌色横条、.s-side 22px 宽 #B7C4FF 竖条、.s-main 占满剩余并取页背景色，组合出侧边/顶部/混合三种缩略图（LayoutSwitcher.css:7-10）。",
|
||
"标签 .kole-layoutsw-label 是 13px 正文色居中文字，上外边距 6px；本文件不含任何交互逻辑或状态切换脚本（LayoutSwitcher.css:11）。"
|
||
],
|
||
"bestPractices": [
|
||
"选中态光晕的 rgba(47,84,235,0.12) 是硬编码品牌色副本，改 --kole-color-brand 不会同步这一圈光晕（LayoutSwitcher.css:5）。",
|
||
"悬停边框 #B7C4FF 与侧边色块 .s-side 用的是同一个硬编码浅蓝，主题换色时这两处需要一起改（LayoutSwitcher.css:4,9）。",
|
||
"色块高度与宽度（16px / 22px）是绝对像素，缩略图整体高度也被写死 66px；要适配更小的容器需要同时改这两处（LayoutSwitcher.css:6-7）。",
|
||
"选项宽度 128px 是固定值而非最小宽度，长标签文字（如「混合导航布局」）会被挤到换行或溢出，需要自行调整（LayoutSwitcher.css:3）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端以类名交付：.kole-layoutsw 定容器排布，.kole-layoutsw-opt 定选项卡片并配 is-active / :hover 两种状态外观，.kole-layoutsw-mini 内的 .s-top/.s-side/.s-main 三个类负责缩略图形态；选中逻辑与数据都不在交付范围内。",
|
||
"table": [
|
||
{
|
||
"name": "kole-layoutsw",
|
||
"type": "布局类名",
|
||
"desc": "选项容器：flex、gap 12px、可换行，并声明字体栈"
|
||
},
|
||
{
|
||
"name": "kole-layoutsw-opt",
|
||
"type": "基础类名",
|
||
"desc": "选项卡片：128px 宽、1px 描边、圆角 8px、padding 8px、pointer 光标"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "状态类名",
|
||
"desc": "选中态：品牌色边框加 3px rgba(47,84,235,0.12) 光晕"
|
||
},
|
||
{
|
||
"name": "kole-layoutsw-mini",
|
||
"type": "结构类名",
|
||
"desc": "缩略图框：66px 高、圆角 4px、裁溢出、纵向 flex"
|
||
},
|
||
{
|
||
"name": "s-top",
|
||
"type": "缩略图块",
|
||
"desc": "顶部导航色块，16px 高，--kole-color-brand"
|
||
},
|
||
{
|
||
"name": "s-body",
|
||
"type": "缩略图块",
|
||
"desc": "缩略图主体行，flex:1 横向排列"
|
||
},
|
||
{
|
||
"name": "s-side",
|
||
"type": "缩略图块",
|
||
"desc": "侧边栏色块，22px 宽，#B7C4FF"
|
||
},
|
||
{
|
||
"name": "s-main",
|
||
"type": "缩略图块",
|
||
"desc": "内容区色块，flex:1，--kole-color-page-bg"
|
||
},
|
||
{
|
||
"name": "kole-layoutsw-label",
|
||
"type": "结构类名",
|
||
"desc": "选项文字：13px 正文色居中，上外边距 6px"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"本文件不提供 role / aria 样式钩子，选中态只有颜色与光晕，单选组语义需由标记层补 role=\"radio\" 与 aria-checked（LayoutSwitcher.css:3-5）。",
|
||
"选中与未选中的差异是「品牌色边框 + 光晕」对「灰边框」，灰度下表现为描边深浅差，视觉可辨但强度有限（LayoutSwitcher.css:3,5）。",
|
||
"本文件没有 :focus-visible 规则，选项的键盘焦点环完全依赖全局样式；若项目重置了 outline，需要在这里补一条（LayoutSwitcher.css:3）。",
|
||
"缩略图色块属纯装饰（.s-top/.s-side/.s-main 均为空 div），不承载文本信息，读屏器不会念出它们（LayoutSwitcher.css:7-10）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/LayoutSwitcher.css",
|
||
"kind": "CSS 端全部交付物",
|
||
"desc": "LayoutSwitcher.css —— 12 行样式源码：选项卡片三态、缩略图框与三个色块类"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"layoutswitcher-ex-1"
|
||
],
|
||
"notes": [
|
||
"容器与选项卡片：frameworks/LayoutSwitcher.css:2-3",
|
||
"悬停与选中态：frameworks/LayoutSwitcher.css:4-5",
|
||
"缩略图框：frameworks/LayoutSwitcher.css:6",
|
||
"三个色块：frameworks/LayoutSwitcher.css:7-10",
|
||
"标签文字：frameworks/LayoutSwitcher.css:11",
|
||
"LayoutSwitcher.css 12 行只有 4 个类，缩略图色块（s-top/s-side/s-main）是同文件内定义的子类：文件里没有代码块，因为 css 端 byEnd.code 为空字符串，示例由 exampleIds 给出。",
|
||
"契约 dims 的 collapsed 维度在本文件里没有对应类，未写入 table。"
|
||
]
|
||
}
|