Tabler Vue

简体中文

English

简体中文

English

Appearance

Tabs 标签页 ​

标签页组件用于在多个内容面板之间切换，支持卡片式与纯导航两种模式。

基础用法（卡片式） ​

通过 card prop 将标签页包裹在卡片中，导航栏自动应用 card-header 样式。

查看代码
vue

<TTabs v-model="activeTab" card>
  <TTabPane name="home" title="Home">
    <h4>Home tab</h4>
    <!-- 内容 -->
  </TTabPane>
  <TTabPane name="profile" title="Profile">
    <h4>Profile tab</h4>
    <!-- 内容 -->
  </TTabPane>
</TTabs>

带图标 ​

通过 icon prop 传入 @tabler/icons-vue 图标组件，图标会自动出现在标签文字前。

查看代码
vue

<TTabs v-model="activeTab" card>
  <TTabPane name="home" title="Home" :icon="IconHome">
    <h4>Home tab</h4>
  </TTabPane>
  <TTabPane name="profile" title="Profile" :icon="IconUser">
    <h4>Profile tab</h4>
  </TTabPane>
  <TTabPane name="settings" title="Settings" :icon="IconSettings">
    <h4>Settings tab</h4>
  </TTabPane>
</TTabs>

全宽标签页 ​

设置 justify="fill" 让标签项均匀填满导航栏宽度。

查看代码
vue

<TTabs v-model="activeTab" card justify="fill">
  <TTabPane name="home" title="Home" :icon="IconHome">
    <h4>Home tab</h4>
  </TTabPane>
  <TTabPane name="profile" title="Profile" :icon="IconUser">
    <h4>Profile tab</h4>
  </TTabPane>
  <TTabPane name="settings" title="Settings" :icon="IconSettings">
    <h4>Settings tab</h4>
  </TTabPane>
</TTabs>

非卡片模式 ​

不设置 card prop 时，导航栏独立展示，适合页面级顶部导航场景。

vue

<TTabs v-model="activeTab">
  <TTabPane name="home" title="Home">
    <!-- 内容 -->
  </TTabPane>
  <TTabPane name="profile" title="Profile">
    <!-- 内容 -->
  </TTabPane>
</TTabs>

禁用标签 ​

在 TTabPane 上设置 disabled 可禁用该标签的点击切换。

查看代码
vue

<TTabs v-model="activeTab" card>
  <TTabPane name="home" title="Home" :icon="IconHome">
    <h4>Home tab</h4>
  </TTabPane>
  <TTabPane name="profile" title="Profile" :icon="IconUser" disabled>
    <h4>Profile tab (disabled)</h4>
  </TTabPane>
  <TTabPane name="settings" title="Settings" :icon="IconSettings">
    <h4>Settings tab</h4>
  </TTabPane>
</TTabs>

API ​

TTabs Props ​

Prop说明类型默认值
modelValue当前激活的 tab name（v-model）stringundefined
defaultActive默认激活项（非受控模式）stringundefined
card启用卡片布局booleanfalse
justify导航栏对齐方式'start' | 'center' | 'end' | 'fill'undefined

TTabs Emits ​

事件名说明类型
update:modelValuev-model 更新事件(value: string) => void
change当前激活项变化时触发(name: string) => void

TTabs Slots ​

插槽名说明
defaultTTabPane 子组件
header导航栏右侧自定义区域

TTabPane Props ​

Prop说明类型默认值
name唯一标识string— (必填)
title导航标签文字string— (必填)
icon图标组件（@tabler/icons-vue 导入）Iconundefined
disabled是否禁用booleanfalse

TTabPane Slots ​

插槽名说明
default标签页内容面板