@mtcmedia/vue-tabs-accordion

This component is wrapper for MtcCollapsible. It groups MtcCollapsible into an accordion component. There is also a tabs mode. The modes can be flipped between using the responsive prop.

Install to production site

npm install @mtcmedia/vue-tabs-accordion

Usage

import MtcTabsAccordion from '@mtcmedia/vue-tabs-accordion'
import MtcCollapsible from '@mtcmedia/vue-collapsible'
import '@mtcmedia/vue-vue-tabs-accordion/dist/MtcTabsAccordion.css'
import '@mtcmedia/vue-collapsible/dist/MtcCollapsible.css'

Vue.component('MtcTabsAccordion', MtcTabsAccordion)
Vue.component('MtcCollapsible', MtcCollapsible)

<MtcTabsAccordion>
  <!-- you can loop over data to add multiple collapsible components -->
  <MtcCollapsible v-for="(tab, index) in data" :key="index" :active="tab.active">
    <template #title-text>{{ tab.title }}</template>
      <template #default>
        <div v-html="tab.content"></div>
      </template>
  </MtcCollapsible>

  <!-- or you can add them individually or a combination of both -->
  <MtcCollapsible :active="false">
    <template #title-text>This is a fourth Tab</template>
    <template #default>
      <h1>Here is some silly content.</h1>
    </template>
  </MtcCollapsible>
</MtcTabsAccordion>

Props

The component accepts these props:

| Attribute | Type | Default | Description | | :--- | :--- | :--- | :--- | | mode | String | accordion | Can be set as tabs | | responsive | Object | {} | Define mode for certain window widths |

This component is mobile first.

{
    640: {
        mode: 'tabs'
    },
    1200: {
        mode: 'accordion'
    }
}

Slots

The component accepts these slots:

• default : Must use MtcCollapsible component within the slot.

Development Setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.