iter(g265): 新增布局骨架组件 layout

This commit is contained in:
HIsheR
2026-10-26 22:48:04 +08:00
parent 617269166a
commit 71cff84932
12 changed files with 299 additions and 12 deletions
+53 -2
View File
@@ -90,7 +90,8 @@
"countdown(props):倒计时,秒级递减到 0 自动停表并触发 onFinish,缺省 mm:ss 展示,返回句柄 start/stop/reset",
"kbd(props):键盘按键标记,键帽样式展示单个按键或组合键(多键以 + 连接),用于快捷键提示",
"highlight(props):关键词高亮,命中片段包 mark(大小写不敏感全部命中),text / keyword 支持信号响应式刷新",
"inputTag(props):标签输入,输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个,value 信号双向绑定,max 满额自动禁输"
"inputTag(props):标签输入,输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个,value 信号双向绑定,max 满额自动禁输",
"layout(props, ...children):布局骨架,页头 / 侧栏 / 内容 / 页脚四区一次成型,侧栏可折叠(collapsed 信号双向绑定)"
],
"keyTypes": [
"ButtonProps",
@@ -3983,7 +3984,57 @@
"要区分大小写重复判断就传 allowDuplicate: true;默认按原样去重",
"样式复用输入组与标签:外框聚焦光环、chip 圆角与语义色都跟既有组件一致,无新增视觉字面量"
]
},
{
"id": "layout",
"title": "布局骨架 Layout",
"demo": "sec-layout",
"props": [
{
"n": "header",
"t": "unknown",
"d": "页头内容(文案 / 节点);缺省不渲染页头"
},
{
"n": "sider",
"t": "unknown",
"d": "侧栏内容(通常是 menu);缺省则内容区独占整行"
},
{
"n": "footer",
"t": "unknown",
"d": "页脚内容;缺省不渲染页脚"
},
{
"n": "siderWidth",
"t": "number",
"d": "侧栏展开宽度(px);缺省 220"
},
{
"n": "collapsible",
"t": "boolean",
"d": "是否可折叠:true 时页头左侧出现折叠开关"
},
{
"n": "collapsed",
"t": "Signal<boolean>",
"d": "折叠态信号;传入则双向绑定(外部可读数),缺省内部自管"
},
{
"n": "sticky",
"t": "boolean",
"d": "页头是否吸顶;缺省 false(长内容里建议打开)"
}
],
"example": "layout({ header: '控制台', sider: menu({ items }), footer: '© 2026', collapsible: true, sticky: true }, card({ title: '内容区' }, ...))",
"steps": [
"把整页交给 layout:children 就是内容区,页头 / 侧栏 / 页脚用 header / sider / footer 三个入参一次给全",
"侧栏通常放 menu 或 anchor,宽度用 siderWidth 调(缺省 220px,够放四项中文菜单)",
"需要折叠时传 collapsible: true,页头左侧自动出现开关;想把折叠态接到别处(比如只显示图标栏)就传 collapsed 信号读它的值",
"长内容页面打开 sticky,页头吸顶;内容区自己滚动,不会把整页撑高",
"只要内容不要骨架时省略 header / sider / footer:不套多余容器,内容区独占整行"
]
}
]
}
}
}