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

Name	Description	Type	Default
underlined	tabs type	boolean	false
list	List of tab	Array	[]
@tabIndex	emits the selected tab index	function	-

Product Uses