77 lines
4.0 KiB
JSON
77 lines
4.0 KiB
JSON
{
|
||
"slug": "fullscreenmodal",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 fullscreenmodal：.kole-fs-mask 全屏铺满并纵向分栏，头尾固定、.kole-fs-body 自适应滚动。",
|
||
"usage": [
|
||
"根层 .kole-fs-mask 固定全屏、z-index 1100，用纵向 flex 把页面切成头/身/脚三段（frameworks/FullScreenModal.css:2）。",
|
||
"头部 .kole-fs-head 用 space-between 分列标题与关闭按钮，14px 20px 内边距加下边框（frameworks/FullScreenModal.css:3）。",
|
||
"标题 .kole-fs-title 是 16px 字重 600 的标题色（frameworks/FullScreenModal.css:4）。",
|
||
"关闭按钮 .kole-fs-close 是 20px 无边框按钮，hover 时文字色从次级转正文色（frameworks/FullScreenModal.css:5-6）。",
|
||
"正文 .kole-fs-body 靠 flex:1 占满中间并 overflow:auto 独立滚动，20px 内边距加 1.7 行高（frameworks/FullScreenModal.css:7）。",
|
||
"底部 .kole-fs-foot 右对齐按钮并带上边框，与头部对称（frameworks/FullScreenModal.css:8）。"
|
||
],
|
||
"bestPractices": [
|
||
"整层用 --kole-color-page-bg 作底而不是半透明遮罩，是全屏“占据页面”而非“压暗背景”的语义，别改成 rgba（frameworks/FullScreenModal.css:2）。",
|
||
"正文滚动依赖 flex:1 加 overflow:auto 这一对；去掉 flex:1 正文会被内容撑高，头尾被推出视口（frameworks/FullScreenModal.css:7）。",
|
||
"该文件只有 9 行、6 个类，结构刻意做薄；需要动画或过渡得在业务侧补（frameworks/FullScreenModal.css:2-8）。"
|
||
],
|
||
"a11y": [
|
||
"全屏层建议补 role=\"dialog\" 与 aria-modal=\"true\"，并把焦点移入，样式层不提供（frameworks/FullScreenModal.css:2）。",
|
||
"关闭按钮只有一个字符，需要有 aria-label 才能被读屏识别（frameworks/FullScreenModal.css:5）。",
|
||
"正文文字是第三级色（--kole-color-text-tertiary），在页面底色上对比偏弱，长文场景建议改用正文色（frameworks/FullScreenModal.css:7）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-fs-mask（全屏根）加 .kole-fs-head / -title / -close / -body / -foot 五个分区类，没有状态类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-fs-mask",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/FullScreenModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-fs-head",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/FullScreenModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-fs-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/FullScreenModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-fs-close",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/FullScreenModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-fs-body",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/FullScreenModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-fs-foot",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/FullScreenModal.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/FullScreenModal.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"fullscreenmodal-ex-1",
|
||
"fullscreenmodal-ex-2"
|
||
],
|
||
"notes": [
|
||
"全屏根与分层见 frameworks/FullScreenModal.css:2，头尾见 frameworks/FullScreenModal.css:3-6、8，正文滚动见 frameworks/FullScreenModal.css:7。",
|
||
"前缀是 kole-fs-*（不是 kole-fullscreen*），按组件名拼类名会失效。",
|
||
"示例 ex-1/ex-2 是两个内容片段（site/examples/fullscreenmodal.json），未包含外层 mask 结构。"
|
||
]
|
||
}
|