Tabs

Tabs are used to organize content into different sections. They are commonly used in web applications to manage multiple views.

Basic Usage

Regular Tabs:

tab

tab

tab

<template>
  <spr-tabs :list="tabsBasic" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsBasic = [{ label: 'tab' }, { label: 'tab' }, { label: 'tab' }];
</script>

Underlined Tabs:

title

title

title

<template>
  <spr-tabs :list="tabsUnderlined" :underlined="true" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsUnderlined = [
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
];
</script>

Disabled State

Regular Tabs:

tab

tab

tab

<template>
  <spr-tabs :list="tabsBasicWithDisabled" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsBasicWithDisabled = ref([
  { label: 'tab', disabled: false },
  { label: 'tab', disabled: false },
  { label: 'tab', disabled: true },
]);
</script>

Underlined Tabs:

title

title

title

<template>
  <spr-tabs :list="tabsUnderlinedDisabled" :underlined="true" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsUnderlinedDisabled = [
  { label: 'title', disabled: false },
  { label: 'title', disabled: false },
  { label: 'title', disabled: true },
];
</script>

Active State

By adding the active-tab attribute to the component, you can specify which tab should be set as active. This will highlight the tab and visually indicate that it is selected.

tab 1

tab 2

tab 3

<template>
  <spr-tabs :list="tabsRandomLabel" active-tab="tab 2" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsRandomLabel = ref([{ label: 'tab 1' }, { label: 'tab 2' }, { label: 'tab 3' }]);
</script>

With Icon

Regular Tabs:

tab

tab

tab

<template>
  <spr-tabs :list="tabsWithIcon" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsWithIcon = [
  { label: 'tab', icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { label: 'tab', icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { label: 'tab', icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

Underlined Tabs:

title

title

title

<template>
  <spr-tabs :list="tabsUnderlinedWithIcon" :underlined="true" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsUnderlinedWithIcon = [
  { label: 'title', disabled: false, icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { label: 'title', disabled: false, icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { label: 'title', disabled: false, icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

Icon Only

Regular Tabs:

<template>
  <spr-tabs :list="tabsIconOnly" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsIconOnly = [
  { icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

Underlined Tabs:

<template>
  <spr-tabs :list="tabsIconOnly" :underlined="true" />
</template>

<script lang="ts" setup>
import SprTabs from '@/components/tabs/tabs.vue';

const tabsIconOnly = [
  { icon: 'ph:plant-light', iconFill: 'ph:plant-fill' },
  { icon: 'ph:leaf-light', iconFill: 'ph:leaf-fill' },
  { icon: 'ph:tree-light', iconFill: 'ph:tree-fill' },
];
</script>

API Reference

Props

Name	Description	Type	Default
list	Array of tab items to display. Each item should contain a label property (for text display), and can optionally include icon (icon to display), iconFill (icon to display when active), and disabled (whether the tab is disabled).	Array<{ label: string; icon?: string; iconFill?: string | Component; disabled?: boolean }>	[]
underlined	Determines the visual style of the tabs. When true, tabs will have an underline style with the active tab highlighted by an underline. When false, tabs will have a button-like appearance with borders.	boolean	false
activeTab	Sets which tab should be active by matching its label. If provided, the tab with the matching label will be activated on component mount. If not provided or no match is found, the first tab will be active by default.	string	''

Events

Name	Description	Parameters
tabIndex	Emitted when a tab is selected. Returns the index of the selected tab.	(index: number)

List Item Properties

Name	Description	Type	Required
label	The text to display in the tab. This is also used to match against the activeTab prop.	string	Yes (unless using icon-only tabs)
icon	The icon to display in the tab. Uses Iconify for icon rendering.	string	No
iconFill	The icon to display when the tab is active. This allows for a different icon style when a tab is selected.	string | Component	No
disabled	Whether the tab is disabled. Disabled tabs cannot be selected and have a visual disabled state.	boolean	No

Product Uses