iter(g111): 面包屑支持超长路径折叠
This commit is contained in:
@@ -1244,6 +1244,14 @@
|
||||
"acceptance": "SelectProps 新增 clearable(缺省 false):有值时触发器右缘出现 ×,点它把值写成空串并回调 onChange('');收起态按 Delete / Backspace 等价清空;按钮不进 Tab 序、无值自动隐藏;文档参数表 / 手把手 / api 说明与演示(城市下拉开启清空)同步;npm run check 全绿",
|
||||
"notes": "自补:可用性;复用既有 value 信号与 onChange,不新增状态",
|
||||
"status": "done"
|
||||
},
|
||||
{
|
||||
"id": "g111",
|
||||
"title": "面包屑支持超长路径折叠",
|
||||
"motivation": "七层路径(首页/控制台/订单管理/华东区/2026 Q4/待发货/订单 #1024)在窄容器里会把末项当前页挤到换行甚至省略号之后,而当前页恰恰是最该看清的;breadcrumb 没有任何收窄手段",
|
||||
"acceptance": "BreadcrumbProps 新增 maxItems:超出时渲染「首项 + … + 末 Math.max(2, maxItems-1) 项」,折叠按钮 aria-label 报出被折叠条数、点一下原地展开全部;展开后不再折叠,末项始终是当前页;文档参数表 / 手把手 / 演示(七层路径 maxItems=4)同步;npm run check 全绿",
|
||||
"notes": "自补:可用性;渲染走 effect + replaceChildren,不重建整个 nav",
|
||||
"status": "open"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+8
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-26T06:03:06.956Z",
|
||||
"generatedAt": "2026-10-26T06:04:26.861Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -835,6 +835,11 @@
|
||||
"t": "(item, index) => void",
|
||||
"k": 1,
|
||||
"d": "无 href 条目的点击回调"
|
||||
},
|
||||
{
|
||||
"n": "maxItems",
|
||||
"t": "number",
|
||||
"d": "最多展示几项:超出时首项之后折叠成「…」按钮(aria-label 报出折叠条数),点开即完整展开;缺省不折叠"
|
||||
}
|
||||
],
|
||||
"example": "breadcrumb({ items: [{ label: '首页', href: '/' }, { label: '设置' }, { label: '账户' }], onNavigate: (it) => console.log(it.label) })",
|
||||
@@ -842,7 +847,8 @@
|
||||
"按层级顺序准备 items,最后一项即当前页,自动渲染为不可点的灰色文字并带 aria-current='page'",
|
||||
"需要真实跳转就给条目加 href(渲染 <a>);单页应用想自行接管时不给 href,改用 onNavigate 回调",
|
||||
"改分隔符传 separator,如 '›';分隔符对读屏隐藏",
|
||||
"语义结构为 nav + ol + li,可直接放进页头或卡片标题栏"
|
||||
"语义结构为 nav + ol + li,可直接放进页头或卡片标题栏",
|
||||
"路径过深时传 maxItems(如 4):首项 + 「…」+ 末几项,点「…」原地展开全部,末项始终是当前页"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user