数据与研究

tab-navigation

dembrandt/dembr…t-skills

Tabs swap views under a shared context. Use when designing tabbed layouts, settings pages, detail views or dashboards with several data views.

  • 704 次安装
  • 174 星标
  • 收录于

安装命令

npx skills add https://github.com/dembrandt/dembrandt-skills --skill tab-navigation

SKILL.md

Tab Navigation

Tabs organise related content under a shared context. The tab strip communicates the full set of available views; switching tabs swaps the content panel without a page navigation. They work best when all views share a heading, a primary action, or a common subject — tabs that have nothing to do with each other belong in separate pages.


When to Use Tabs — and When Not To

Use tabs when… Use something else when…
2–7 views share a common context (same record, same settings section) There are more than 7–8 tabs — use a sidebar or section nav instead
Users switch between views frequently during a session The content is sequential (use a stepper/wizard instead)
All tabs are equally valid entry points One view is clearly primary — put the rest in a secondary nav or overflow
The views share a header or set of page-level actions Each "tab" requires a different header and layout — use separate pages

Tab Types