153 lines
7.4 KiB
JSON
153 lines
7.4 KiB
JSON
{
|
||
"slug": "layout",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端布局样式：以 .kole-layout 为作用域，交付两列网格、折叠列宽与面板分区等后台骨架类。",
|
||
"usage": [
|
||
"根类 .kole-layout 做两件事：统一 box-sizing（用 * 选择器覆盖自身及伪元素）并写入字体与正文色令牌（Layout.css:2-3）。",
|
||
"两列骨架来自 .kole-layout-layout 的 display:grid 加 grid-template-columns:180px 1fr，min-height 180px、gap 取 --kole-space-16（Layout.css:19）。",
|
||
"折叠态是 .kole-layout-layout.is-collapsed 一条规则，把列宽改成 64px 1fr；这是本组件唯一的布局状态类（Layout.css:20）。",
|
||
"面板类 .kole-layout-surface（与 .kole-layout-panel 合并书写）提供卡底、1px 描边、中圆角与低投影，是侧栏与主区共用的外观（Layout.css:4）。",
|
||
"分区类成对定义：.kole-layout-header 与 .kole-layout-footer 共用一组规则（12px/16px 内边距加表头底色），.kole-layout-main 单独一行 16px 内边距（Layout.css:21-22）。",
|
||
"文件后半段还交付了一批同前缀的控件类（.kole-layout-button/.kole-layout-control/.kole-layout-table/.kole-layout-drawer 等），都挂在同一作用域下，可按需组合使用（Layout.css:14-70）。"
|
||
],
|
||
"bestPractices": [
|
||
"所有类名都以 .kole-layout 为父作用域（如 .kole-layout-table th），脱离该根容器单独写子类不会命中规则（Layout.css:2,47-49）。",
|
||
"文件里定义了通用的 :focus-visible 环（含 button/a/input/select 与 .kole-layout-control），删掉这条会影响作用域内所有控件与链接的键盘可见性（Layout.css:9）。",
|
||
"画布类 .kole-layout-surface 与 .kole-layout-panel 共享一行声明，但 .kole-layout-panel 另加 16px 内边距与 220px 最小宽度，两者混用时注意宽度影响（Layout.css:4,18）。",
|
||
"浮层类的 z-index 用的是小数值（tip/popover 为 10、drawer 遮罩 20 与抽屉 21），与遮罩式组件的 1000 量级不同体系；同页混用需确认层叠（Layout.css:60,68-69）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端全部以类名交付且都限定在 .kole-layout 作用域内：layout-layout 是两列网格、加 is-collapsed 折叠，surface 是面板外观，header/main/footer 是列内分区；另附一批同前缀控件类可供组合，但没有任何 props 概念。",
|
||
"table": [
|
||
{
|
||
"name": "kole-layout",
|
||
"type": "作用域类名",
|
||
"desc": "根容器：box-sizing 归一、字体令牌与正文色"
|
||
},
|
||
{
|
||
"name": "kole-layout-layout",
|
||
"type": "布局类名",
|
||
"desc": "两列网格 180px 1fr，gap 与 min-height 由令牌给定"
|
||
},
|
||
{
|
||
"name": "is-collapsed",
|
||
"type": "状态类名",
|
||
"desc": "与 .kole-layout-layout 同节点时列宽改为 64px 1fr"
|
||
},
|
||
{
|
||
"name": "kole-layout-surface",
|
||
"type": "面板类名",
|
||
"desc": "卡底、1px 描边、中圆角、低投影"
|
||
},
|
||
{
|
||
"name": "kole-layout-panel",
|
||
"type": "面板类名",
|
||
"desc": "与 surface 共享外观，另加 16px 内边距与 220px 最小宽"
|
||
},
|
||
{
|
||
"name": "kole-layout-header",
|
||
"type": "结构类名",
|
||
"desc": "页头：12/16 内边距，底色 --kole-color-table-header-bg"
|
||
},
|
||
{
|
||
"name": "kole-layout-main",
|
||
"type": "结构类名",
|
||
"desc": "内容区：16px 内边距"
|
||
},
|
||
{
|
||
"name": "kole-layout-footer",
|
||
"type": "结构类名",
|
||
"desc": "页脚：与页头同规则"
|
||
},
|
||
{
|
||
"name": "kole-layout-title",
|
||
"type": "结构类名",
|
||
"desc": "标题：标题色加 h2 字重令牌"
|
||
},
|
||
{
|
||
"name": "kole-layout-desc",
|
||
"type": "结构类名",
|
||
"desc": "说明文字：次要色配 caption 字号与行高"
|
||
},
|
||
{
|
||
"name": "kole-layout-row",
|
||
"type": "组合类名",
|
||
"desc": "横向 flex 行，可换行，间距取 --kole-space-8"
|
||
},
|
||
{
|
||
"name": "kole-layout-vertical",
|
||
"type": "组合类名",
|
||
"desc": "纵向 flex，拉伸子项（方向变体）"
|
||
},
|
||
{
|
||
"name": "kole-layout-horizontal",
|
||
"type": "组合类名",
|
||
"desc": "横向 flex（方向变体）"
|
||
},
|
||
{
|
||
"name": "kole-layout-table",
|
||
"type": "组合类名",
|
||
"desc": "表格骨架：整宽、border-collapse，th/td 有分割线与内边距"
|
||
},
|
||
{
|
||
"name": "kole-layout-drawer",
|
||
"type": "组合类名",
|
||
"desc": "右侧抽屉：fixed、360px 宽、90vw 上限、100vh 高"
|
||
},
|
||
{
|
||
"name": "kole-layout-drawer-mask",
|
||
"type": "组合类名",
|
||
"desc": "抽屉遮罩：fixed inset:0，z-index 20，取 --kole-color-mask"
|
||
},
|
||
{
|
||
"name": "kole-layout-tip",
|
||
"type": "组合类名",
|
||
"desc": "文字提示浮层：反色底（--kole-color-tooltip-bg），绝对定位于触发器下方"
|
||
},
|
||
{
|
||
"name": "kole-layout-popover",
|
||
"type": "组合类名",
|
||
"desc": "气泡浮层：卡底色加描边，与 tooltip 共用定位与最大宽"
|
||
},
|
||
{
|
||
"name": "kole-layout-disabled",
|
||
"type": "状态类名",
|
||
"desc": "禁用态：not-allowed 光标加 0.55 透明（与 [disabled] 合并书写）"
|
||
},
|
||
{
|
||
"name": "kole-layout-compact",
|
||
"type": "状态类名",
|
||
"desc": "契约 variants 里「布局 · compact」的落点：只压字号与内边距（caption 令牌 + 4/8），两列网格 180px 1fr 的列宽不受它影响（Layout.css:12,19）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"文件里有一条通用焦点环规则覆盖 .kole-layout 作用域内的 button/a/input/select 与 .kole-layout-control，键盘可见性由它统一提供（Layout.css:9）。",
|
||
"统一声明 cursor:pointer 的只有 button 与 a（Layout.css:8），div 类组件默认没有指针光标，这是有意的语义区分。",
|
||
"本文件不输出 role 或 aria 属性；region/navigation/main 等地标语义需由标记补上（Layout.css:2-6）。",
|
||
"禁用态同时用 cursor:not-allowed 与 opacity .55（Layout.css:13），不单靠颜色变浅；配合原生 disabled 属性时可被读屏器正确播报。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Layout.css",
|
||
"kind": "CSS 端全部交付物",
|
||
"desc": "Layout.css —— 72 行样式源码：作用域根、两列网格与折叠、面板与分区类，以及同前缀控件类"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"layout-ex-1",
|
||
"layout-ex-2"
|
||
],
|
||
"notes": [
|
||
"作用域根与 box-sizing：frameworks/Layout.css:2-3",
|
||
"面板类：frameworks/Layout.css:4",
|
||
"两列网格与 is-collapsed：frameworks/Layout.css:19-20",
|
||
"头/主/脚分区：frameworks/Layout.css:21-22",
|
||
"方向变体与通用焦点环：frameworks/Layout.css:9,23-24",
|
||
"Layout.css 第 1-24 行是布局自身类（作用域根/两列网格/头主脚分区），第 25-70 行是模板底座：文件里没有代码块，因为 css 端 byEnd.code 为空字符串，示例由 exampleIds 给出。",
|
||
"契约 contract.variants 的「布局 · default/primary/compact」在文件里对应 .kole-layout-primary（10）、.kole-layout-secondary（11）与 .kole-layout-compact（12）三条规则，其中 default 没有独立类名（即无修饰类时的默认外观）。"
|
||
]
|
||
}
|