@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:

Attribute	Type	Default	Description
active	Boolean	false	Set as closed by default
disabled	Boolean	false	Prevent button from being clickable
hash	String	empty	Matching window.location.hash will open this component

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.