iter: d05 新增面包屑 breadcrumb 组件
This commit is contained in:
+26
-2
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-23T08:48:29.721Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-23T08:49:44.245Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
## @ui-arch/ui(skin-dom)v0.1.0
|
||||
|
||||
22 个 DOM 组件,统一用法:组件是普通函数,传入 props 返回 DOM 节点;需要状态时先创建 signal 再双向绑定。引入 CSS:import '@ui-arch/ui/ui.css'(内部已消费 tokens)。
|
||||
23 个 DOM 组件,统一用法:组件是普通函数,传入 props 返回 DOM 节点;需要状态时先创建 signal 再双向绑定。引入 CSS:import '@ui-arch/ui/ui.css'(内部已消费 tokens)。
|
||||
|
||||
### button — 按钮 Button
|
||||
|
||||
@@ -258,6 +258,29 @@ accordion({ items: [{ value: 'a', title: '账户设置', content: '内容…' },
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-accordion
|
||||
|
||||
### breadcrumb — 面包屑 Breadcrumb
|
||||
|
||||
参数:
|
||||
|
||||
- items(必填):BreadcrumbItem[] —— 路径条目:{ label, href? },末项自动视为当前页
|
||||
- separator(默认 /):string —— 分隔符;缺省 '/'
|
||||
- onNavigate(回调):(item, index) => void —— 无 href 条目的点击回调
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
breadcrumb({ items: [{ label: '首页', href: '/' }, { label: '设置' }, { label: '账户' }], onNavigate: (it) => console.log(it.label) })
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. 按层级顺序准备 items,最后一项即当前页,自动渲染为不可点的灰色文字并带 aria-current='page'
|
||||
2. 需要真实跳转就给条目加 href(渲染 <a>);单页应用想自行接管时不给 href,改用 onNavigate 回调
|
||||
3. 改分隔符传 separator,如 '›';分隔符对读屏隐藏
|
||||
4. 语义结构为 nav + ol + li,可直接放进页头或卡片标题栏
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-breadcrumb
|
||||
|
||||
### card — 卡片 Card
|
||||
|
||||
参数:
|
||||
@@ -576,6 +599,7 @@ API 速览:
|
||||
- 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
|
||||
|
||||
Reference in New Issue
Block a user