Tabs

Divide data collections which are related yet belong to different types.

Basic usage

Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the value attribute.

User

Config

Role

Task

Body #1

Body #2

Body #3

Body #4

---

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('user')
const tabs = [
  { name: 'user', label: 'User', content: 'Body #1' },
  { name: 'config', label: 'Config', content: 'Body #2' },
  { name: 'role', label: 'Role', content: 'Body #3' },
  { name: 'task', label: 'Task', content: 'Body #4' },
]
</script>

<template>
  <b-tabs v-model="activeTab">
    <b-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :name="tab.name"
      :label="tab.label"
      class="pt6"
      >{{ tab.content }}</b-tab-pane
    >
  </b-tabs>
</template>

Separator style

Set type to separator can get a separator styled tabs.

User

Config

Role

Task

Body #1

Body #2

Body #3

Body #4

---

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('user')
const tabs = [
  { name: 'user', label: 'User', content: 'Body #1' },
  { name: 'config', label: 'Config', content: 'Body #2' },
  { name: 'role', label: 'Role', content: 'Body #3' },
  { name: 'task', label: 'Task', content: 'Body #4' },
]
</script>

<template>
  <b-tabs v-model="activeTab" type="separator">
    <b-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :name="tab.name"
      :label="tab.label"
      class="pt6"
      >{{ tab.content }}</b-tab-pane
    >
  </b-tabs>
</template>

Tab Position

You can use tab-position attribute to set the tab's position.

TopRightBottomLeft

User

Config

Role

Task

Body #1

Body #2

Body #3

Body #4

---

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('user')
const position = ref('top')
const tabs = [
  { name: 'user', label: 'User', content: 'Body #1' },
  { name: 'config', label: 'Config', content: 'Body #2' },
  { name: 'role', label: 'Role', content: 'Body #3' },
  { name: 'task', label: 'Task', content: 'Body #4' },
]
</script>

<template>
  <b-radio-group v-model="position" size="small">
    <b-radio-button value="top">Top</b-radio-button>
    <b-radio-button value="right">Right</b-radio-button>
    <b-radio-button value="bottom">Bottom</b-radio-button>
    <b-radio-button value="left">Left</b-radio-button>
  </b-radio-group>
  <b-divider class="my-2" />
  <b-tabs v-model="activeTab" :tab-position="position">
    <b-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :name="tab.name"
      :label="tab.label"
      :class="{
        'pt-6': position === 'top',
        'pb-6': position === 'bottom',
        'pr-6': position === 'right',
        'pl-6': position === 'left',
      }"
      >{{ tab.content }}</b-tab-pane
    >
  </b-tabs>
</template>

Tab Alignment

Tab nav can be center align or stretch to full width.

Center

Stretch

User

Config

Role

Task

Body #1

Body #2

Body #3

Body #4

---

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('user')
const alignment = ref('stretch')
const tabs = [
  { name: 'user', label: 'User', content: 'Body #1' },
  { name: 'config', label: 'Config', content: 'Body #2' },
  { name: 'role', label: 'Role', content: 'Body #3' },
  { name: 'task', label: 'Task', content: 'Body #4' },
]
</script>

<template>
  <b-switch
    v-model="alignment"
    active-value="stretch"
    active-text="Stretch"
    inactive-value="center"
    inactive-text="Center"
  />

  <b-divider class="my-2" />
  <b-tabs
    v-model="activeTab"
    :center="alignment === 'center'"
    :stretch="alignment === 'stretch'"
  >
    <b-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :name="tab.name"
      :label="tab.label"
      class="pt-6"
      >{{ tab.content }}</b-tab-pane
    >
  </b-tabs>
</template>

Custom Tab

You can use named slot to customize the tab label content.

User

Config

Role

Task

Body #1

Body #2

Body #3

Body #4

---

<script setup lang="ts">
import { ref } from 'vue'
import * as Icons from '@bigin/icons-vue'

const activeTab = ref('user')
const tabs = [
  { name: 'user', icon: 'Profile', label: 'User', content: 'Body #1' },
  { name: 'config', icon: 'Settings', label: 'Config', content: 'Body #2' },
  { name: 'role', icon: 'UserSettings', label: 'Role', content: 'Body #3' },
  { name: 'task', icon: 'TaskDone', label: 'Task', content: 'Body #4' },
]
</script>

<template>
  <b-tabs v-model="activeTab">
    <b-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :name="tab.name"
      class="pt6"
    >
      <template #label>
        <span class="flex items-center">
          <b-icon :size="16" class="mr2">
            <component :is="Icons[tab.icon]" />
          </b-icon>
          <span>{{ tab.label }}</span>
        </span>
      </template>
      {{ tab.content }}</b-tab-pane
    >
  </b-tabs>
</template>

Tabs Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value, name of the selected tab	string / number	—	name of first tab
type	type of Tab	string	separator	—
closable	whether Tab is closable	boolean	—	false
addable	whether Tab is addable	boolean	—	false
editable	whether Tab is addable and closable	boolean	—	false
tab-position	position of tabs	string	top / right / bottom / left	top
stretch	whether width of tab automatically fits its container	boolean	-	false
before-leave	hook function before switching tab. If false is returned or a Promise is returned and then is rejected, switching will be prevented	Function(activeName, oldActiveName)	—	—

Tabs Events

Event Name	Description	Parameters
tab-click	triggers when a tab is clicked	(pane: TabsPaneContext, ev: Event)
tab-change	triggers when activeName is changed	(name: TabPanelName)
tab-remove	triggers when tab-remove button is clicked	(name: TabPanelName)
tab-add	triggers when tab-add button is clicked	—
edit	triggers when tab-add button or tab-remove is clicked	(paneName: TabPanelName | undefined, action: 'remove' | 'add')

Tabs Slots

Name	Description	Subtags
-	customize default content	Tab-pane

Tab-pane Attributes

Attribute	Description	Type	Accepted Values	Default
label	title of the tab	string	—	—
disabled	whether Tab is disabled	boolean	—	false
name	identifier corresponding to the name of Tabs, representing the alias of the tab-pane	string / number	—	ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0'
closable	whether Tab is closable	boolean	—	false
lazy	whether Tab is lazily rendered	boolean	—	false

Tab-pane Slots

Name	Description
-	Tab-pane's content
label	Tab-pane's label