iter(g143): 页签栏支持右侧操作区
This commit is contained in:
@@ -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); // 容器变宽 / 窗口缩放后重算,指示条不会停在旧宽度
|
||||
|
||||
@@ -347,6 +347,7 @@ export interface TabsProps {
|
||||
active?: Signal<string>; // 当前激活页签的 value 信号,双向绑定
|
||||
onChange?: (value: string) => void; // 切换回调
|
||||
onClose?: (value: string) => void; // 关闭页签回调:组件不自行移除,凭 value 从数据源里摘掉
|
||||
extra?: unknown; // 页签栏右侧操作区内容(按钮 / 链接);缺省不渲染,页签栏结构不变
|
||||
}
|
||||
|
||||
/*** 弹窗入参 ***/
|
||||
|
||||
Reference in New Issue
Block a user