@ocrv/vue-tailwind-tabs

Vue Tailwind Tabs

Usage no npm install needed!

<script type="module">
  import ocrvVueTailwindTabs from 'https://cdn.skypack.dev/@ocrv/vue-tailwind-tabs';
</script>

README

Vue Tailwind Tabs

build downloads-week downloads

Vue component for creating tabs using Tailwind CSS.

Снимок экрана 2021-02-17 в 11 31 05

Install

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

Usage

  1. Import library styles
import '@ocrv/vue-tailwind-tabs/styles'
  1. Import the components
import {TabsWrapper, TabsContent, Tab} from '@ocrv/vue-tailwind-tabs'

Define data for activeTab and clickTab callback method

export default {
    components: {
        TabsWrapper,
        TabsContent,
        Tab
    },
    data() {
        return {
            activeTab: 'tab1'
        }
    },
    methods: {
        clickTab(name) {
            this.activeTab = name
        }
    }
}

Next, in your HTML code:

<TabsWrapper>
    <Tab title="Tab 1" :isActive="activeTab === 'tab1'" @click="clickTab('tab1')" />
    <Tab title="Tab 2" :isActive="activeTab === 'tab2'" @click="clickTab('tab2')" />
    <Tab title="Tab 3" :isActive="activeTab === 'tab3'" @click="clickTab('tab3')" />
</TabsWrapper>

<TabsContent>
    <div v-if="activeTab === 'tab1'">
        Ad alias animi at consequuntur cumque delectus, dolor doloribus illum in, odit porro quasi.
    </div>
    <div v-if="activeTab === 'tab2'">
        Aspernatur cupiditate, dolorum earum eius ex facilis!
    </div>
    <div v-if="activeTab === 'tab3'">
        Deserunt ducimus explicabo facere ipsam.
    </div>
</TabsContent>

More examples here