@mtcmedia/vue-collapsible
Install to production site
npm install @mtcmedia/vue-collapsibleVue 2 - Install to production site
npm install @mtcmedia/vue-collapsible@2.0.1Usage
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 installCompiles and hot-reloads for development
npm run serveCompiles and minifies for production
npm run buildRun your unit tests
npm run test:unitLints and fixes files
npm run lint