Skip to content

Vue component to wrap content in Collapsible element with trigger to open and close.

License

Notifications You must be signed in to change notification settings

glennflanagan/vue-collapsible

Repository files navigation

Netlify Status Npm Version License Downloads Per Week

Vue Responsive Collapsible Section Component (Collapsible)

Vue component to wrap content in Collapsible element with trigger to open and close.

Alt text

It's like an accordion, but where any number of sections can be open at the same time.

See the demo source code for code examples of how to use.

Installation

Install via npm

npm install vue-collapsible-component

or yarn

yarn add vue-collapsible-component

Alternatively just download the Collapsible.vue file form the src folder and include it in your project in your chosen way.

Usage

Collapsible can receive any HTML elements or Vue component as it's children. Collapsible will wrap the contents, as well as generate a trigger element which will control showing and hiding.

To customise the trigger element use the trigger slot for the open state, and closedTrigger slot for the closed state.

<template>
  <Collapsible class="example-collapsible">
    <div slot="trigger">
      <div class="customTrigger">
        <h2>Custom open trigger element</h2>
      </div>
    </div>

    <div slot="closedTrigger">
      <div class="customTrigger">
        <h2>Custom closed trigger element</h2>
      </div>
    </div>

    <div id="example2">
      <p>
        Lorem ipsum dolor sit ...
      </p>
    </div>
  </Collapsible>
</template>

<script>
  import 'vue-collapsible-component/lib/vue-collapsible.css';
  import Collapsible from 'vue-collapsible-component';

  export default {
    components: {
      Collapsible,
    },
  };
</script>

Props

These are the available overrides


openLabel <String>

Set the default trigger open label


closedLabel <String>

Set the default trigger close label


transitionDuration <String>

Override the default CSS transition duration. Example 500ms


transitionTimingFunction <String>

Override the default CSS transition timing function. Example ease-in-out


transitionDelay <String>

Override the default CSS transition delay. Example 300ms


isOpen <Boolean>

Sets the default open/closed state. Use this to control the open/close state programmatically.


onCollapse <Function>

Fired whenever the open/close state is changed with the new open/closed state.


Licence

MIT

Contributing

View the the README

About

Vue component to wrap content in Collapsible element with trigger to open and close.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published