iter(g212): 页签溢出时自动把激活页签拉回可视区

2026-10-26 19:50:33 +08:00
parent 7fa60fbf57
commit 6ccc341998
5 changed files with 30 additions and 5 deletions
@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）

-> 自动生成于 2026-10-26T11:20:15.456Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T11:50:16.380Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。

 ## 快速上手
@@ -724,9 +724,10 @@ const tab = signal('a'); tabs({ tabs: [{ value: 'a', label: '概览', closable:
 1. 创建信号 tab = signal('a')，初值为默认页签
 2. tabs 只渲染页签头；页签内容用响应式函数按信号切换，如 () => tab() === 'a' ? panelA : panelB
 3. 点击或方向键（←→ 环形）、Home/End（直达首/末页签）切换，滑动指示条自动跟随；disabled: true 的页签置灰不可点
-4. 需要可关闭页签时给该项加 closable: true，× 或聚焦后按 Delete 触发 onClose(value)；组件不改数据源，调用方从数组里摘掉该项再重绘
-5. 键盘可访问：Tab 聚焦激活页签，←→ 在启用页签间环形移动，Home/End 跳首个/末个启用页签
-6. 页签栏右侧要放「新建 / 设置」这类操作就传 extra（按钮或链接）：它与页签同一行共用一条分隔线，不传时 DOM 结构保持不变
+4. 页签多到一屏放不下（页签条横向溢出）时，切到被裁掉的页签会自动滚回可视区：只滚页签条本身、不带动页面，系统开启「减弱动效」时直接跳位；已完整可见则不动，不打断用户手动滚动
+5. 需要可关闭页签时给该项加 closable: true，× 或聚焦后按 Delete 触发 onClose(value)；组件不改数据源，调用方从数组里摘掉该项再重绘
+6. 键盘可访问：Tab 聚焦激活页签，←→ 在启用页签间环形移动，Home/End 跳首个/末个启用页签
+7. 页签栏右侧要放「新建 / 设置」这类操作就传 extra（按钮或链接）：它与页签同一行共用一条分隔线，不传时 DOM 结构保持不变

 现场演示：apps/docs/demo.html#sec-tabs-modal