Tabs

介紹使用 Tabs 頁籤元件

Tabs 介紹示意圖

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

基本使用

<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>

輔助資訊

<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>

前、後綴

<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 屬性

Name	Value	Type	Default	Required	Note
v-model / value		String

Tabs-panel 屬性

Name	Value	Type	Default	Required	Note
name		String
prefixIcon		String
label		String
affixIcon		String
badge		String || Number

Tabs 事件

Name	Parameters	Desciption
input		當頁籤變更時

Demo