# vue-material-tabs

> Vue.js tabs component based in material design

Latest version **1.1.2** (published 2022-02-21) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-material-tabs
pnpm add vue-material-tabs
yarn add vue-material-tabs
bun add vue-material-tabs
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2022-02-21 |
| First published | 2021-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 124.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jairo Blatt |
| Maintainers | jrblatt |
| Keywords | vue2, tabs, material, component |

## Links

- npm: https://www.npmjs.com/package/vue-material-tabs
- Repository: https://github.com/jairoblatt/vue-material-tabs
- Homepage: https://github.com/jairoblatt/vue-material-tabs#readme
- Issues: https://github.com/jairoblatt/vue-material-tabs/issues
- npm.io page: https://npm.io/package/vue-material-tabs

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2022-02-21
- 1.1.1 — 2021-11-25
- 1.1.0 — 2021-11-25
- 1.0.1 — 2021-11-16
- 0.2.5 — 2021-11-01
- 0.2.4 — 2021-10-29
- 0.2.3 — 2021-10-26
- 0.2.2 — 2021-10-25
- 0.2.1 — 2021-10-25
- 0.2.0 — 2021-10-25
- 0.1.9 — 2021-10-25
- 0.1.8 — 2021-10-25
- 0.1.7 — 2021-10-23
- 0.1.6 — 2021-07-18
- 0.1.5 — 2021-06-30
- … 14 more at https://npm.io/package/vue-material-tabs/versions

## README

<h1 align="center">Vue material tabs 🚀</h1>

<div align="center">
  <img src="https://img.shields.io/badge/License-MIT-0aa8d2" alt="MIT"/>
  <img src="https://badge.fury.io/js/vue-material-tabs.svg" alt="npm Version"/>
  <img src="https://snyk.io/test/github/jairoblatt/vue-material-tabs/badge.svg" alt="Vulnerabilities">
  <p>Tab component based on material design, used to show content one at a time, it can also be used as a browser between pages.</p>
</div>

### [Demo](https://vue-material-tabs.vercel.app/)

## ⚓ Features

- Touch swippe.
- Vertical and animation support.
- Flexible and customizable.
- Zero dependencies.

## 🚚 Install

```c
 yarn add vue-material-tabs  // npm install --save vue-material-tabs
```

## 🚀 Usage

### Global

```javascript
import Vue from "vue";
import VueMaterialTabs from "vue-material-tabs";

Vue.use(VueMaterialTabs);
```

### Local

```javascript
import { Tabs, TabItem } from "vue-material-tabs";

export default {
  components: {
    Tabs,
    TabItem,
  },
};
```

## 📌 Examples

```javascript
<Tabs>
  <TabItem name="Foo">
    <div class="first-tab">First tab</div>
  </TabItem>
  <TabItem name="Bar">
    <div class="second-tab">Second tab</div>
  </TabItem>
</Tabs>
```

#### Do use #name slot to customize the nav title (When the slot #name is used, the prop name is replaced)

```javascript
<Tabs>
  <TabItem>
    <template #name>
        My custom title 🍉
    </template>

    <div class="first-tab">
      First tab
    </div>
  </TabItem>
</Tabs>
```

### 👑 Themes

##### There are some themes available to customize your tab nav.

- default
- purple
- red
- pink
- cyan
- green

#### Example

```javascript
<Tabs theme="cyan">....</Tabs>
```

You can create your own custom themes, with `theme` prop.

#### Example

```javascript
<Tabs :theme="theme" >
  ....
</Tabs>
....
<script>
  export default {
    data: () => ({
      theme: {
        nav: "#4A148C",
        navItem: "#BDBDBD",
        navActiveItem: "#fff",
        slider: "#CE93D8",
        arrow: "#f3f3f3",
      },
    }),
  };
</script>
```

## Tabs

### Props

| Name          | type             | Default   | description                                       |
| ------------- | ---------------- | --------- | ------------------------------------------------- |
| value         | String           | undefined | The designated model value for the component.     |
| theme         | String - Object  | 'default' | Apply an available or customized theme.           |
| vertical      | Boolean          | false     | Uses a vertical transition when changing windows. |
| ripple        | Boolean          | true      | Ripple tab nav effect.                            |
| slideDuration | String - Number  | 200       | Set slide duration in `ms`.                       |
| slideVertical | Boolean          | false     | Vertical slide animation.                         |
| slide         | Boolean - Object | false     | Enable/disable slide or set object with props.    |
| navAuto       | Boolean          | false     | Organize tab nav items auto                       |
| navSlider     | Boolean          | true      | Nav bar slider.                                   |
| noTouch       | Boolean          | false     | Swippe tab by touch.                              |

### Slots

| Name | Description                   | Props                               |
| ---- | ----------------------------- | ----------------------------------- |
| nav  | Slot to replace the nav menu. | { navItems: Array, active: String } |

### Events

| Name  | Description                  |
| ----- | ---------------------------- |
| input | Emitted when tab is changed. |

## TabItem

### Props

| Name     | type    | Default     | description                                           |
| -------- | ------- | ----------- | ----------------------------------------------------- |
| name     | String  | 'Tab Item'  | Tab item title                   |
| disabled | Boolean | false       | Removes the ability to click or target the component. |

### Slots

| Name | Description                |
| ---- | -------------------------- |
| name | Custom tab nav name        |

## 🔖 License

[MIT](https://github.com/jairoblatt/vue-material-tabs/blob/main/LICENSE)

---
_Source: https://npm.io/package/vue-material-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._