Tabs タブ

コンテンツ領域の切り替えコンポーネントです。ライン型・カード型の 2 種類の外観を持ち、無効化、閉じるボタン、追加ボタン、下部タブをサポートします。

タブ

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhTabs v-model="active">
      <LhTabPane name="song" label="宋代">
        <p class="demo-note">範寛『溪山行旅図』、郭熙『早春図』。</p>
      </LhTabPane>
      <LhTabPane name="yuan" label="元代">
        <p class="demo-note">黄公望『富春山居図』。</p>
      </LhTabPane>
      <LhTabPane name="ming" label="明代" disabled>
        <p class="demo-note">無効化されたタブ。</p>
      </LhTabPane>
    </LhTabs>
    <p class="demo-note">v-model={{ active }}</p>
    <LhTabs v-model="active2" type="card" tab-position="bottom" closable addable>
      <LhTabPane v-for="t in panes" :key="t.name" :name="t.name" :label="t.label">
        <p class="demo-note">{{ t.label }} の内容</p>
      </LhTabPane>
    </LhTabs>
    <p class="demo-note">card + 下部タブ + closable + addable</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 'song',
    active2: 'a',
    panes: [
      { name: 'a', label: '巻軸 A' },
      { name: 'b', label: '巻軸 B' },
      { name: 'c', label: '巻軸 C' },
    ],
  }),
}
</script>

Tabs Props

プロパティ	説明	型	デフォルト値
v-model	現在有効なタブの name（制御される modelValue prop）	string	—
type	外観	'line' \| 'card'	'line'
closable	タブを閉じられるかどうか	boolean	false
addable	追加ボタンを表示するかどうか	boolean	false
tabPosition	タブの位置	'top' \| 'bottom'	'top'
sx	sx によるレイアウト省略記法	—	—

TabPane Props

プロパティ	説明	型	デフォルト値
name	タブの一意識別子（安定したキーとして使用、動的な変更は非推奨）	string	—
label	タブのタイトル	string	—
disabled	無効にするかどうか	boolean	false

Slots

スロット	説明
TabPane default	タブの内容