@mtcmedia/vue-collapsible

@mtcmedia/vue-collapsible

Install to production site

npm install @mtcmedia/vue-collapsible

Vue 2 - Install to production site

npm install @mtcmedia/vue-collapsible@2.0.1

Usage

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

Vue.component('MCollapsible', MtcCollapsible)

<MCollapsible>
    <template #title-button>
        <h2>replaces all content within the button</h2>
    </template>
    <!-- this is the main slot -->
    <h2>Add collapsible content here!</h2>
    <p>This can be anything</p>
</MCollapsible>

<!-- Option with completely custom html within trigger -->
<MCollapsible>
    <template #trigger="{ triggerProps }">
        <a href="https://www.mtcmedia.co.uk"
            :class="triggerProps.classes"
        >mtc.</a>
    </template>
    <!-- this is the main slot -->
    <h2>Add collapsible content here!</h2>
    <p>This can be anything</p>
</MCollapsible>
<MCollapsible>
    <template #trigger="{ triggerProps }">
        <button
            :class="triggerProps.classes"
            @click.prevent="customTriggerFunction(triggerProps)"
            :disabled="triggerProps.disabled"
        >mtc.</button>
    </template>
    <!-- this is the main slot -->
    <template #default>
        <h2>Add collapsible content here!</h2>
        <p>This can be anything</p>
        <p>Maybe you require to calculate something before opening the overlay</p>
    </template>
</MCollapsible>

customTriggerFunction () {
    triggerProps.setDisabled = true
}

Props

The component accepts these props:

Slots

The component accepts these slots:

• default : The content that will be hidden/shown on click of the button
• title-button : Replace entire button content
• title-text : Use to define the text the button
• title-icon : Use to add a custom icon to the title button
• trigger : Replace button trigger with custom html - has access to triggerProps as scoped data

triggerProps = {
    classes: [
        'MCollapsible__title',
        'MCollapsible__button'
    ],
    active: this.show, // the active state of this panel
    disabled: this.isDisabled, // the disabled state of this trigger
    showContent: this.showContent, // the function to trigger active state of this panel and toggle the content
    setDisabled: this.setDisabled // use this function to set the disabled state of the trigger
}

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.