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>

前、後綴

<!-- FontAwesome icon classname -->
<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>

屬性

名稱ValueTypeDefault ValueRequired描述
v-model / valueString
Tabs Props
名稱ValueTypeDefault ValueRequired描述
nameStringidentifier
labelString
badgeString
prefix-iconString
affix-iconString
Tab-Panel Props

事件

名稱Parameters描述
input當頁籤變更時
Tabs Events

演示