YTabs

适用范围：Legacy Admin Kit / Schema 与旧 admin-vue。新 admin-nuxtui 的开发入口见管理端 Nuxt UI 指南。

定位 / Owner

YTabs 是受控 tab/panel facade，拥有 keyboard navigation、disabled tab 与 panel 对应关系，不拥有页面路由。

什么时候使用

用于同一任务上下文中的少量平级内容视图。

不什么时候使用

可深链页面导航使用 Router；大量或层级式信息使用 sidebar/navigation composition。

Public API

v-model<string>；items: YTabItem[]；每个 item id 对应同名 scoped slot，slot 获得 item。

Composition

业务 owner 保持 active id；Tabs 只投影选中状态和内容 panel。

Anti-pattern

不要在 tab change 中隐式保存/删除数据，也不要依赖 primitive DOM 来切换。

Production Example

Member Detail Drawer 使用 Overview、Access、Activity 三个业务 panel。

Live Workbench

/frontend-module-demo/component-workbench/tabs

Verification / Source

• packages/yoyo-admin/admin-kit/src/ui/components/tabs/YTabs.vue
• Admin Kit keyboard semantics tests 与 MemberDetailDrawer consumer