Tabs

Tabs đảm bảo a11y (roving tabindex, phím mũi tên, Home/End) với nhiều kiểu: mặc định, underline, filled, pills, dọc, line.

Biến thể

Biến thể

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>

Có kiểm soát & dạng dọc

Có kiểm soát & dạng dọc

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	Kiểu	Mặc định
items*	array	—
modelValue	string	—
variant	string	—
justified	boolean	—
keepMounted	boolean	—

Sự kiện: update:modelValuechange

Slot: tab-{key}default