Skip to content

Tabs

Tabs for switching content. A single tab is in the component Tab.

Props

pills
Changes the standard tabs to the pills menu
type:Boolean
default:false

Slots

default
Main slot on the tabs

Events

select-tab
Setting an active tab

Examples

Tabs
html
<tabs @select-tab="setActive($event)">
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'account'"
    id="account"
    text="My account"
  />
  <tab @set-tab="setActive($event)" :active="activeEl === 'profil'" id="profil" text="My profile" />
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'settings'"
    id="settings"
    text="Settings"
  />
</tabs>
Pills tabs
html
<tabs pills @select-tab="setActive($event)">
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'account'"
    id="account"
    text="My account"
  />
  <tab @set-tab="setActive($event)" :active="activeEl === 'profil'" id="profil" text="My profile" />
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'settings'"
    id="settings"
    text="Settings"
  />
</tabs>
Tabs with icons
html
<tabs @select-tab="setActive($event)">
  <tab @set-tab="setActive($event)" :active="activeEl === 'account'" id="account" text="My account">
    <icon size="full" :icon="home" color="current" />
  </tab>
  <tab @set-tab="setActive($event)" :active="activeEl === 'profil'" id="profil" text="My profile">
    <icon size="full" :icon="home" color="current" />
  </tab>
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'settings'"
    id="settings"
    text="Settings"
  >
    <icon size="full" :icon="home" color="current" />
  </tab>
</tabs>
Pills tabs with icons
html
<tabs pills @select-tab="setActive($event)">
  <tab @set-tab="setActive($event)" :active="activeEl === 'account'" id="account" text="My account">
    <icon size="full" :icon="home" color="current" />
  </tab>
  <tab @set-tab="setActive($event)" :active="activeEl === 'profil'" id="profil" text="My profile">
    <icon size="full" :icon="home" color="current" />
  </tab>
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'settings'"
    id="settings"
    text="Ustawienia"
  >
    <icon size="full" :icon="home" color="current" />
  </tab>
</tabs>
Tabs with badges on right (reverse)
html
<tabs @select-tab="setActive($event)">
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'account'"
    id="account"
    text="My account"
    reverse
  >
    <badge size="md" color="primary" type="number" :value="9999" />
  </tab>
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'profil'"
    id="profil"
    text="My profile"
    reverse
  >
    <badge size="md" color="primary" type="number" :value="9999" />
  </tab>
  <tab
    @set-tab="setActive($event)"
    :active="activeEl === 'settings'"
    id="settings"
    text="Settings"
    reverse
  >
    <badge size="md" color="primary" type="number" :value="9999" />
  </tab>
</tabs>

DANGER

The bookmarks are in a very basic form, with state - work in progress.