Tabs

Introduction to using the Tabs component

Tabs introduction illustration

Tabs are usually used when a single topic has multiple different contents.

Basic usage

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

Auxiliary information

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

Prefix and suffix

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

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

Tab-panel properties

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

Tabs events

Name	Parameters	Description
input		When the tab changes

Demo