## タブ
関連しているが異なるタイプに属するデータコレクションを分割します。
### 基本的な使い方
基本的で簡潔なタブです。
:::demo タブはカードの選択機能を提供します。デフォルトでは最初のタブがアクティブとして選択されており、`value`属性を設定することで任意のタブをアクティブにすることができます。
```html
User
Config
Role
Task
```
:::
### カードスタイル
カードのようなスタイルのタブ
:::demo `type` を `card` に設定すると、カードスタイルのタブを取得できます。
```html
User
Config
Role
Task
```
:::
### ボーダーカード
ボーダーカードのタブです。
:::demo `type` を `border-card` に設定します。
```html
User
Config
Role
Task
```
:::
### タブの位置
タブの位置を設定するには `tab-position` 属性を使います。
タブの位置を設定するには、`tab-position`属性を使用します。`tabPosition="left|right|top|bottom" `
```html
top
right
bottom
left
User
Config
Role
Task
```
:::
### カスタムタブ
名前付きスロットを使用して、タブラベルの内容をカスタマイズすることができます。
:::demo
```html
Route
Route
Config
Role
Task
```
:::
### タブを追加して閉じる
カードタイプのタブのみ、追加可能&クローズ可能に対応しています。
:::demo
```html
{{item.content}}
```
:::
### カスタマイズした新規タブのトリガーボタン
:::demo
```html
add tab
{{item.content}}
```
:::
### タブの属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | バインディング値、選択されたタブの名前 | string | — | name of first tab |
| type | タブの種類 | string | card/border-card | — |
| closable | タブが閉じられるかどうか | boolean | — | false |
| addable | タブの追加が可能かどうか | boolean | — | false |
| editable | タブが追加可能で閉じられるかどうか | boolean | — | false |
| tab-position | タブの位置 | string | top/right/bottom/left | top |
| stretch | タブの幅が自動的にコンテナに収まるかどうか | boolean | - | false |
| before-leave | フック関数を使ってタブを切り替える。`false` を返すか、`Promise` を返した後に拒否された場合は、タブの切り替えができないようにする。 | Function(activeName, oldActiveName) | — | — |
### タブイベント
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| tab-click | タブがクリックされたときにトリガーされます。 | clicked tab |
| tab-remove | タブ削除ボタンがクリックされたときにトリガーされます。 | name of the removed tab |
| tab-add | タブ追加ボタンがクリックされたときにトリガーされます。 | — |
| edit | タブ追加ボタンやタブ削除ボタンがクリックされたときにトリガーされます。 | (targetName, action) |
### タブペインの属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| label | タブのタイトル | string | — | — |
| disabled | タブが無効になっているかどうか | boolean | — | false |
| name | タブの名前に対応する識別子、タブペインのエイリアスを表す | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
| closable | タブが閉じられるかどうか | boolean | — | false |
| lazy | タブがレイジーにレンダリングされるかどうか | boolean | — | false |
### Tab-pane Slots
| Name | Description |
|------|--------|
| - | Tab-pane's content |
| label | Tab-pane's label |