---
description: 介紹使用 Tabs 頁籤元件
---

# Tabs

<div data-full-width="false"><figure><img src="https://3730302285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkKD42HpQdyU6pMEvZom%2Fuploads%2FOFy3XVRauF2dGFXv5dPy%2Ftabs.webp?alt=media&#x26;token=fc520abe-5893-4a0d-828e-86cc810cc1f5" alt="Radio 介紹示意圖"><figcaption><p>Tabs 介紹示意圖</p></figcaption></figure></div>

Tabs 頁籤，通常應用在某一個主題有多種不同內容的情況下使用。

### 基本使用 <a href="#basic" id="basic"></a>

```html
<bpa-tabs v-model="demoTabs">
  <bpa-tab-panel name="first-tab" label="First tab">
    This is the content of the first tab
  </bpa-tab-panel>
  <bpa-tab-panel name="second-tab" label="Second tab">
    This is the content of the second tab
  </bpa-tab-panel>
</bpa-tabs>
```

### 輔助資訊 <a href="#badge" id="badge"></a>

```html
<bpa-tabs v-model="demoTabs">
  <bpa-tab-panel name="first-tab" label="First tab" badge="95">
    This is the content of the first tab
  </bpa-tab-panel>
  <bpa-tab-panel name="second-tab" label="Second tab" badge="27">
    This is the content of the second tab
  </bpa-tab-panel>
</bpa-tabs>
```

### 前、後綴 <a href="#preffix-affix" id="preffix-affix"></a>

```html
<bpa-tabs v-model="demoTabs">
  <bpa-tab-panel name="first-tab" label="First tab" prefix-icon="fas fa-search">
    This is the content of the first tab
  </bpa-tab-panel>
  <bpa-tab-panel name="second-tab" label="Second tab" affix-icon="fas fa-search">
    This is the content of the second tab
  </bpa-tab-panel>
</bpa-tabs>
```

### Tabs 屬性 <a href="#tabs-props" id="tabs-props"></a>

<table data-full-width="false"><thead><tr><th width="136">Name</th><th width="161">Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>v-model / value</td><td></td><td>String</td><td></td><td>false</td><td></td></tr></tbody></table>

### Tabs-panel 屬性 <a href="#tabs-panel-props" id="tabs-panel-props"></a>

<table data-full-width="false"><thead><tr><th width="136">Name</th><th width="161">Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>name</td><td></td><td>String</td><td></td><td>true</td><td></td></tr><tr><td>prefixIcon</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>label</td><td></td><td>String</td><td></td><td>true</td><td></td></tr><tr><td>affixIcon</td><td></td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>badge</td><td></td><td>String || Number</td><td></td><td>false</td><td></td></tr></tbody></table>

### Tabs 事件 <a href="#tabs-event" id="tabs-event"></a>

<table data-full-width="false"><thead><tr><th width="137">Name</th><th width="159">Parameters</th><th>Desciption</th></tr></thead><tbody><tr><td>input</td><td></td><td>當頁籤變更時</td></tr></tbody></table>

### Demo

{% embed url="https://codesandbox.io/embed/r3jt7w?hidenavigation=1&module=/src/app.vue&view=Editor+++Preview" fullWidth="false" %}
