Tab — Tab UI Component Reference
Quick-reference skill for tab component design, accessibility patterns, and implementation.
When to Use
- - Implementing tabbed content panels in web applications
- Designing tab navigation for sections of related content
- Making tabs accessible with proper ARIA roles and keyboard support
- Choosing between tabs, accordions, and other navigation patterns
- Building responsive tab components that work on mobile
Commands
intro
CODEBLOCK0
Tab component overview — when to use tabs, types, alternatives.
anatomy
CODEBLOCK1
Tab anatomy — tab list, tab buttons, tab panels, indicators, badges.
patterns
CODEBLOCK2
Design patterns — horizontal, vertical, scrollable, closeable, draggable tabs.
accessibility
CODEBLOCK3
Accessibility — ARIA roles, keyboard navigation, focus management, screen readers.
state
CODEBLOCK4
State management — controlled vs uncontrolled, lazy loading, URL sync, persistence.
responsive
CODEBLOCK5
Responsive strategies — scrollable tabs, dropdown conversion, priority tabs, swipe.
css
CODEBLOCK6
CSS implementation — indicator animations, theming, variants, transitions.
checklist
CODEBLOCK7
Tab component design and implementation checklist.
help
CODEBLOCK8
version
CODEBLOCK9
Powered by BytesAgain | bytesagain.com | hello@bytesagain.comTab — Tab UI 组件参考
Tab 组件设计、无障碍模式及实现的快速参考技能。
使用场景
- - 在 Web 应用中实现标签式内容面板
- 为相关内容的各个部分设计标签导航
- 使用正确的 ARIA 角色和键盘支持实现无障碍标签
- 在标签页、手风琴式折叠面板及其他导航模式之间进行选择
- 构建在移动设备上正常工作的响应式标签组件
命令
intro
bash
scripts/script.sh intro
Tab 组件概述 — 何时使用标签页、类型、替代方案。
anatomy
bash
scripts/script.sh anatomy
Tab 组件结构 — 标签列表、标签按钮、标签面板、指示器、徽章。
patterns
bash
scripts/script.sh patterns
设计模式 — 水平、垂直、可滚动、可关闭、可拖拽标签页。
accessibility
bash
scripts/script.sh accessibility
无障碍 — ARIA 角色、键盘导航、焦点管理、屏幕阅读器。
state
bash
scripts/script.sh state
状态管理 — 受控与非受控、懒加载、URL 同步、持久化。
responsive
bash
scripts/script.sh responsive
响应式策略 — 可滚动标签页、下拉菜单转换、优先级标签页、滑动操作。
css
bash
scripts/script.sh css
CSS 实现 — 指示器动画、主题定制、变体、过渡效果。
checklist
bash
scripts/script.sh checklist
Tab 组件设计与实现检查清单。
help
bash
scripts/script.sh help
version
bash
scripts/script.sh version
由 BytesAgain 提供支持 | bytesagain.com | hello@bytesagain.com
