菜单
UITabs provides value-based tabbed navigation, while UITabsRouterLink provides route-based tabbed navigation integrated with Vue Router. Both support three visual variants, horizontal and vertical orientations, full-width mode, and scrollable overflow.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when scanning NestJS providers with DiscoveryService-backed utilities.
Use when working with the @wisemen/nestjs-custom-fields package — developer-defined custom fields in NestJS with TypeORM persistence and runtime validation. Covers registering the CustomFieldDefinition entity, authoring definitions with customFieldDefinition(), storing resolved values via @CustomFieldValueColumn(), exposing them through CustomFieldValueDto / @IsCustomFields(), and validating submissions with CustomFieldDefinitionsRepository + validateCustomFieldValues(). Use this whenever a task involves custom field definitions, CustomFieldValue columns, custom-field DTOs, or tenant-scoped field definitions, even if the package is not named explicitly.
Use when defining Typesense collections, collectors, and search queries in NestJS APIs.
Generate PDFs through API2PDF in NestJS. Use when converting HTML or URLs to PDFs in apis.
Use when storing and validating multilingual text in NestJS apis with TypeORM and class-validator.
Use when configuring NATS messaging, subscribers, or the simple NatsClient in NestJS applications.
| name | tabs |
| description | UITabs provides value-based tabbed navigation, while UITabsRouterLink provides route-based tabbed navigation integrated with Vue Router. Both support three visual variants, horizontal and vertical orientations, full-width mode, and scrollable overflow. |
| type | component |
| library | vue-core-design-system |
| category | navigation |
| exports | ["UITabs","UITabsList","UITabsItem","UITabsContent","UITabsRouterLink","UITabsRouterLinkItem"] |
Tabbed navigation with value-based and router-link modes, three visual variants, scrollable overflow, and vertical/horizontal orientations.
UITabs)UITabsRouterLink)Use instead: For top-level app navigation, use UISidebar. For breadcrumb-style hierarchical navigation, use UIBreadcrumbs.
// Value-based tabs
import { UITabs, UITabsList, UITabsItem, UITabsContent } from '@wisemen/vue-core-design-system'
// Router-link tabs
import { UITabsRouterLink, UITabsRouterLinkItem } from '@wisemen/vue-core-design-system'
<script setup lang="ts">
import { ref } from 'vue'
import { UITabs, UITabsList, UITabsItem, UITabsContent } from '@wisemen/vue-core-design-system'
import { User01Icon, Settings01Icon } from '@wisemen/vue-core-icons'
const activeTab = ref<string>('profile')
</script>
<template>
<UITabs v-model="activeTab">
<UITabsList>
<UITabsItem :icon="User01Icon" label="Profile" value="profile" />
<UITabsItem :icon="Settings01Icon" label="Settings" value="settings" />
</UITabsList>
<UITabsContent value="profile">
<p>Profile content</p>
</UITabsContent>
<UITabsContent value="settings">
<p>Settings content</p>
</UITabsContent>
</UITabs>
</template>
For full API details, read the props files. For usage examples, read the playground files.
src/ui/tabs/tabs.props.tssrc/ui/tabs/Tabs.vue, src/ui/tabs/TabsList.vue, src/ui/tabs/TabsItem.vue, src/ui/tabs/TabsContent.vue, src/ui/tabs/TabsRouterLink.vue, src/ui/tabs/TabsRouterLinkItem.vuesrc/ui/tabs/stories/