标签页

符合无障碍要求的标签页（roving tabindex、方向键、Home/End），提供多种样式：默认、underline、filled、pills、竖向、line。

变体

变体

Vue

<div class="thl-row">
  <div v-for="v in ['default','underline','filled','pills']" :key="v" class="thl-col-12 thl-col-md-6"><ThlCard :title="v"><ThlTabs :variant="v" :items="items"><template #default="{ key }"><p>Content of {{ key }}</p></template></ThlTabs></ThlCard></div>
</div>

React

<Tabs variant="underline" items={[
  { key: 'home', label: 'Home', icon: 'house', content: <p>Home</p> },
  { key: 'messages', label: 'Messages', badge: 3, content: <p>Messages</p> },
]} />

Angular

<thl-tabs variant="underline" [items]="items">
  <ng-template thlTab="home"><p>Home</p></ng-template>
  <ng-template thlTab="messages"><p>Messages</p></ng-template>
</thl-tabs>

受控与竖向

受控与竖向

Vue

<div><p>Active: <code>{{ tab }}</code></p><ThlTabs v-model="tab" variant="vertical" :items="items"><template #home><p>Home panel</p></template><template #profile><p>Profile panel</p></template><template #messages><p>3 new messages</p></template></ThlTabs></div>

React

const [tab, setTab] = useState('home');
<Tabs variant="vertical" active={tab} onChange={setTab} items={items} />

Angular

<thl-tabs variant="vertical" [(active)]="tab" [items]="items">…</thl-tabs>

API

Tabs

<ThlTabs> · import { ThlTabs } from '@thl-ui/vue'

Prop	类型	默认值
items*	array	—
modelValue	string	—
variant	string	—
justified	boolean	—
keepMounted	boolean	—

事件: update:modelValuechange

插槽: tab-{key}default