iter(g143): 页签栏支持右侧操作区

This commit is contained in:
HIsheR
2026-10-26 15:38:50 +08:00
parent 5b8472eb1f
commit 3058da101d
8 changed files with 55 additions and 6 deletions
+3 -1
View File
@@ -64,7 +64,9 @@ export function tabs(props: TabsProps): HTMLElement {
next?.click();
});
const root = h('div', { class: 'ua-tabs' }, head);
const extra = props.extra ? h('div', { class: 'ua-tabs-extra' }, props.extra) : null; // 右侧操作区:与页签同一行
const bar = extra ? h('div', { class: 'ua-tabs-bar' }, head, extra) : head; // 有操作区才包一层,无操作区结构不变
const root = h('div', { class: 'ua-tabs' }, bar);
effect(sync);
requestAnimationFrame(sync); // 挂载后再量一次布局,否则指示条宽度为 0
trackSize(root, sync); // 容器变宽 / 窗口缩放后重算,指示条不会停在旧宽度
+1
View File
@@ -347,6 +347,7 @@ export interface TabsProps {
active?: Signal<string>; // 当前激活页签的 value 信号,双向绑定
onChange?: (value: string) => void; // 切换回调
onClose?: (value: string) => void; // 关闭页签回调:组件不自行移除,凭 value 从数据源里摘掉
extra?: unknown; // 页签栏右侧操作区内容(按钮 / 链接);缺省不渲染,页签栏结构不变
}
/*** 弹窗入参 ***/