iter(g23): tabs 支持 Home/End 跳转首末页签

This commit is contained in:
HIsheR
2026-10-26 11:31:20 +08:00
parent 59dc091210
commit 9e8b435175
4 changed files with 14 additions and 13 deletions
+6 -5
View File
@@ -38,15 +38,16 @@ export function tabs(props: TabsProps): HTMLElement {
}
head.addEventListener('keydown', (e: KeyboardEvent) => {
const delta = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
if (!delta) return; // 卫语句:非方向键放行
const delta = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0; // 方向键步长
const edge = e.key === 'Home' ? 'first' : e.key === 'End' ? 'last' : ''; // 首/末页签直达
if (!delta && !edge) return; // 卫语句:非导航键放行
const list = buttons.filter((b) => !b.disabled);
const i = list.indexOf(document.activeElement as HTMLButtonElement);
if (i < 0) return; // 卫语句:焦点不在页签上
e.preventDefault();
const next = list[(i + delta + list.length) % list.length]; // 环形移动
next.focus();
next.click();
const next = delta ? list[(i + delta + list.length) % list.length] : edge === 'first' ? list[0] : list[list.length - 1]; // 环形移动 / Home-End 直达
next?.focus();
next?.click();
});
effect(sync);
+2 -2
View File
@@ -1054,8 +1054,8 @@
"steps": [
"创建信号 tab = signal('a'),初值为默认页签",
"tabs 只渲染页签头;页签内容用响应式函数按信号切换,如 () => tab() === 'a' ? panelA : panelB",
"点击或方向键(←→ 环形)切换,滑动指示条自动跟随;disabled: true 的页签置灰不可点",
"键盘可访问:Tab 聚焦激活页签,←→ 在启用页签间环形移动"
"点击或方向键(←→ 环形)、Home/End(直达首/末页签)切换,滑动指示条自动跟随;disabled: true 的页签置灰不可点",
"键盘可访问:Tab 聚焦激活页签,←→ 在启用页签间环形移动,Home/End 跳首个/末个启用页签"
]
},
{