# 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>
```