87 lines
4.6 KiB
JSON
87 lines
4.6 KiB
JSON
{
|
||
"slug": "bottomsheet",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 bottomsheet：.kole-sheet-mask 遮罩加 .kole-sheet 底部面板，is-open 同时驱动淡入与上滑。",
|
||
"usage": [
|
||
"显隐由同一个 is-open 驱动两层：.kole-sheet-mask.is-open 恢复 opacity:1 与 pointer-events:auto，.kole-sheet.is-open 把 translateY 归零完成上滑（frameworks/BottomSheet.css:4、8）。",
|
||
"遮罩固定全屏、z-index 2000，面板 z-index 2001 压在遮罩之上（frameworks/BottomSheet.css:3、5）。",
|
||
"面板贴底：left/right/bottom 全为 0，顶部两个角加圆角（frameworks/BottomSheet.css:5）。",
|
||
"拖拽把手用 .kole-sheet-handle，36×4px 圆角条、cursor:grab（frameworks/BottomSheet.css:9）。",
|
||
"三段结构类：.kole-sheet-header 带下边框、.kole-sheet-body 可滚动并 flex:1、.kole-sheet-footer 右对齐放按钮（frameworks/BottomSheet.css:10-12）。",
|
||
"主按钮在 .kole-sheet-btn 基础上加 .primary，切到品牌实底白字（frameworks/BottomSheet.css:13-14）。"
|
||
],
|
||
"bestPractices": [
|
||
"关闭动画的位移量写在 .kole-sheet 的非 is-open 态里，切类即可播放；不要额外写 transition 或 transform，会与既有过渡冲突（frameworks/BottomSheet.css:5、8）。",
|
||
"body 的 overflow:auto 配上 flex:1，是让长内容在固定高度面板里滚动的关键；去掉 flex:1 内容会把面板撑高（frameworks/BottomSheet.css:11）。",
|
||
"handle 只给了 grab 光标，拖拽手势的实现不在样式文件里（frameworks/BottomSheet.css:9）。"
|
||
],
|
||
"a11y": [
|
||
"遮罩关闭后 pointer-events 变 none，但元素仍在 DOM；键盘用户可能仍能 Tab 到底层内容，请在业务侧配合 inert 或 hidden（frameworks/BottomSheet.css:4）。",
|
||
"面板是贴底的浮层，建议在外层补 role=\"dialog\" 与 aria-modal，样式层不提供（frameworks/BottomSheet.css:5）。",
|
||
"header 字号 16px 与 body 的 14px 行高 1.6 已定，正文对比度取决于 --kole-color-text-body 令牌，别用更浅的自定义色（frameworks/BottomSheet.css:10-11）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-sheet-mask（遮罩）与 .kole-sheet（面板）两个根类，加 .kole-sheet-handle / -header / -body / -footer / -btn 的结构类，按钮变体 .primary，状态 .is-open。",
|
||
"table": [
|
||
{
|
||
"name": "kole-sheet-mask",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BottomSheet.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-open",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BottomSheet.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-sheet",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BottomSheet.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-sheet-handle",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BottomSheet.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-sheet-header",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BottomSheet.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-sheet-body",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BottomSheet.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-sheet-footer",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BottomSheet.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-sheet-btn",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/BottomSheet.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/BottomSheet.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"bottomsheet-ex-1",
|
||
"bottomsheet-ex-2"
|
||
],
|
||
"notes": [
|
||
"遮罩显隐见 frameworks/BottomSheet.css:4，面板上滑见 frameworks/BottomSheet.css:8，结构三段见 frameworks/BottomSheet.css:10-12。",
|
||
"示例只覆盖了按钮的两种外观（site/examples/bottomsheet.json 的 ex-1/ex-2 分别是取消与应用），开合逻辑未在示例中给出。",
|
||
"契约的 visible 语义在 css 端落成 .is-open 类，本页未写成 prop。"
|
||
]
|
||
}
|