https://github.com/ocrvblockchain/vue-tailwind-tabs

Vue Tailwind Tabs
https://github.com/ocrvblockchain/vue-tailwind-tabs

clean-design tab tabs tailwind tailwindcss vue

Last synced: about 1 month ago
JSON representation

Vue Tailwind Tabs

• Host: GitHub
• URL: https://github.com/ocrvblockchain/vue-tailwind-tabs
• Owner: OCRVblockchain
• Created: 2021-02-09T06:31:58.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-17T08:33:52.000Z (almost 4 years ago)
• Last Synced: 2024-10-28T15:23:18.760Z (2 months ago)
• Topics: clean-design, tab, tabs, tailwind, tailwindcss, vue
• Language: Vue
• Homepage:
• Size: 2.09 MB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue Tailwind Tabs

![build](https://github.com/OCRVblockchain/vue-tailwind-tabs/workflows/build/badge.svg)

![downloads-week](https://img.shields.io/npm/dw/@ocrv/vue-tailwind-tabs)

![downloads](https://img.shields.io/npm/dt/@ocrv/vue-tailwind-tabs)

Vue component for creating tabs using [Tailwind CSS](https://tailwindcss.com).



## Install

```

npm install --save @ocrv/vue-tailwind-tabs

```

## Usage

1. Import library styles

```js

import '@ocrv/vue-tailwind-tabs/styles'

```

2. Import the components

```js

import {TabsWrapper, TabsContent, Tab} from '@ocrv/vue-tailwind-tabs'

```

Define data for ```activeTab``` and ```clickTab``` callback method

```js

export default {

    components: {

        TabsWrapper,

        TabsContent,

        Tab

    },

    data() {

        return {

            activeTab: 'tab1'

        }

    },

    methods: {

        clickTab(name) {

            this.activeTab = name

        }

    }

}

```

Next, in your HTML code:

```html

    

    

    

    


        Ad alias animi at consequuntur cumque delectus, dolor doloribus illum in, odit porro quasi.

    

    


        Aspernatur cupiditate, dolorum earum eius ex facilis!

    

    


        Deserunt ducimus explicabo facere ipsam.

    


```

More examples [here](https://github.com/OCRVblockchain/vue-tailwind-tabs/blob/main/src/components/Example.vue)