Tabs

Default

Control the active tab with v-model on s-tabs.

Code copied

<template>
  <s-tabs v-model="active">
    <s-tab label="Home">Home panel</s-tab>
    <s-tab label="Profile">Profile panel</s-tab>
  </s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(0)
</script>

Color

Theme the active indicator and labels.

Code copied

<template>
  <s-tabs v-model="active" color="success">
    <s-tab label="One">One</s-tab>
    <s-tab label="Two">Two</s-tab>
  </s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(0)
</script>

Alignments

Align tabs to the left, center, right, or fixed width.

Code copied

<template>
  <s-tabs v-model="active" alignment="center">
    <s-tab label="A">A</s-tab>
    <s-tab label="B">B</s-tab>
  </s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(0)
</script>

Position

Place the tab bar on top, bottom, left, or right.

Code copied

<template>
  <s-tabs v-model="active" position="bottom">
    <s-tab label="Top content">Content</s-tab>
    <s-tab label="More">More</s-tab>
  </s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(0)
</script>

Icons

Add icons to individual s-tab items.

Code copied

<template>
  <s-tabs v-model="active">
    <s-tab label="Inbox" icon="cb:email">Inbox</s-tab>
    <s-tab label="Settings" icon="cb:settings">Settings</s-tab>
  </s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(0)
</script>

API