Collapsible
Recently Added
Collapsible component easily toggles visibility of almost any content on your pages in a vertically and horizontally collapsing container
#Basic
You can hide or show the collapsible container by setting show prop true or false.You can also set the oriantation through orientation prop default value is vertical you can set it to horizontal. LightVue collapsible is Both compatible with Vue 2.x and Vue 3.x
#Nested
You can also nest collapsibe inside collapsibe
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvCollapsible from 'lightvue/collapsible';
// Register the component locally
export default {
components: {
LvCollapsible
}
}// Register the component globally (Vue 2.x)
Vue.component('LvCollapsible', LvCollapsible);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvCollapsible', LvCollapsible);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below:
Props
Type
Default
Description
name
String
collapsible
Configures the name of transition.
show
Boolean
true
Configures the visibility of the content, inside collapsible component.
orientation
String
vertical
Configures the direction of transition.
duration
Number
350
Configures the duration of transition.