iter: d05 新增面包屑 breadcrumb 组件
This commit is contained in:
+38
-3
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-23T08:48:29.721Z",
|
||||
"generatedAt": "2026-10-23T08:49:44.245Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -130,7 +130,7 @@
|
||||
{
|
||||
"name": "@ui-arch/ui",
|
||||
"type": "skin-dom",
|
||||
"description": "DOM 皮肤组件库:button / textField / textarea / checkbox / switch / select / menu / radioGroup / accordion / card / badge / alert / toast / tooltip / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable,构建在 @ui-arch/frame 与 @ui-arch/table-core 之上,样式只消费 --ua-* 令牌。",
|
||||
"description": "DOM 皮肤组件库:button / textField / textarea / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / alert / toast / tooltip / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable,构建在 @ui-arch/frame 与 @ui-arch/table-core 之上,样式只消费 --ua-* 令牌。",
|
||||
"tags": [
|
||||
"components",
|
||||
"dom",
|
||||
@@ -151,6 +151,7 @@
|
||||
"menu(props):下拉菜单,触发器 + 自绘弹层,条目支持禁用 / 危险 / 分隔线,↑↓ 环形导航,点外部 / Esc 关闭",
|
||||
"radioGroup(props):单选组,options + value 信号双向绑定,disabled 整组禁用",
|
||||
"accordion(props):折叠面板,标题按钮 + grid 行高过渡,单开(手风琴)或多开,支持禁用面板与 active 信号受控",
|
||||
"breadcrumb(props):面包屑,nav + ol 语义结构,末项为当前页(aria-current),有 href 走原生链接、无 href 交给 onNavigate",
|
||||
"card(props, ...children):卡片容器",
|
||||
"badge(props):徽标,variant = default | success | warning | danger",
|
||||
"alert(props):提示条,variant = info | success | warning | danger",
|
||||
@@ -178,6 +179,8 @@
|
||||
"MenuProps",
|
||||
"AccordionItem",
|
||||
"AccordionProps",
|
||||
"BreadcrumbItem",
|
||||
"BreadcrumbProps",
|
||||
"OptionItem",
|
||||
"CardProps",
|
||||
"BadgeProps",
|
||||
@@ -204,7 +207,7 @@
|
||||
"语义色 variant 四档:default|info / success / warning / danger,一律来自令牌,禁止硬编码颜色"
|
||||
],
|
||||
"docs": {
|
||||
"intro": "22 个 DOM 组件,统一用法:组件是普通函数,传入 props 返回 DOM 节点;需要状态时先创建 signal 再双向绑定。引入 CSS:import '@ui-arch/ui/ui.css'(内部已消费 tokens)。",
|
||||
"intro": "23 个 DOM 组件,统一用法:组件是普通函数,传入 props 返回 DOM 节点;需要状态时先创建 signal 再双向绑定。引入 CSS:import '@ui-arch/ui/ui.css'(内部已消费 tokens)。",
|
||||
"steps": [
|
||||
"安装依赖:pnpm add @ui-arch/ui @ui-arch/frame(workspace 内自动链接)",
|
||||
"引入样式:在应用入口 import '@ui-arch/ui/ui.css',暗色主题在根元素设 data-theme='dark'",
|
||||
@@ -551,6 +554,38 @@
|
||||
"内容区用 grid 行高 0fr → 1fr 过渡,无需测量高度;reduced-motion 用户自动静态切换"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "breadcrumb",
|
||||
"title": "面包屑 Breadcrumb",
|
||||
"demo": "sec-breadcrumb",
|
||||
"props": [
|
||||
{
|
||||
"n": "items",
|
||||
"t": "BreadcrumbItem[]",
|
||||
"r": 1,
|
||||
"d": "路径条目:{ label, href? },末项自动视为当前页"
|
||||
},
|
||||
{
|
||||
"n": "separator",
|
||||
"t": "string",
|
||||
"d": "分隔符;缺省 '/'",
|
||||
"df": "/"
|
||||
},
|
||||
{
|
||||
"n": "onNavigate",
|
||||
"t": "(item, index) => void",
|
||||
"k": 1,
|
||||
"d": "无 href 条目的点击回调"
|
||||
}
|
||||
],
|
||||
"example": "breadcrumb({ items: [{ label: '首页', href: '/' }, { label: '设置' }, { label: '账户' }], onNavigate: (it) => console.log(it.label) })",
|
||||
"steps": [
|
||||
"按层级顺序准备 items,最后一项即当前页,自动渲染为不可点的灰色文字并带 aria-current='page'",
|
||||
"需要真实跳转就给条目加 href(渲染 <a>);单页应用想自行接管时不给 href,改用 onNavigate 回调",
|
||||
"改分隔符传 separator,如 '›';分隔符对读屏隐藏",
|
||||
"语义结构为 nav + ol + li,可直接放进页头或卡片标题栏"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "card",
|
||||
"title": "卡片 Card",
|
||||
|
||||
Reference in New Issue
Block a user