Version:

Install ​

shell
npm i @mate-vue/tabs

Import ​

vue
<script setup>
import { MateTabs, MateTab } from '@mate-vue/tabs';
</script>

Variants ​

Standard ​

vue
<template>
  <MateTabs v-model:selected="selectedTab">
    <MateTab>First</MateTab>
    <MateTab>Second</MateTab>
    <MateTab>Third</MateTab>
  </MateTabs>
</template>

Anchor ​

vue
<template>
  <MateTabs theme="anchor">
    <MateTab>Step 1</MateTab>
    <MateTab>Step 2</MateTab>
    <MateTab>Step 3</MateTab>
    <MateTab invalid>Error</MateTab>
  </MateTabs>
</template>

Stepper ​

vue
<template>
  <MateTabs theme="stepper">
    <MateTab>Step 1</MateTab>
    <MateTab>Step 2</MateTab>
    <MateTab>Step 3</MateTab>
    <MateTab invalid>Error</MateTab>
  </MateTabs>
</template>

Application bar ​

vue
<template>
  <MateTabs theme="application-bar">
    <MateTab><MateIcon name="person"></MateIcon></MateTab>
    <MateTab><MateIcon name="person"></MateIcon></MateTab>
    <MateTab><MateIcon name="person"></MateIcon></MateTab>
  </MateTabs>
</template>

Side panel tabs ​

vue
<template>
  <MateTabs theme="side-panel-tabs">
    <MateTab><MateIcon name="person"></MateIcon></MateTab>
    <MateTab><MateIcon name="person"></MateIcon></MateTab>
    <MateTab><MateIcon name="person"></MateIcon></MateTab>
  </MateTabs>
</template>