vue-collapse-it
Vue directive to expand/collapse elements.
Install
yarn add vue-collapse-itBrowser
<!-- From CDN -->
<script src="https://unpkg.com/vue-collapse-it@0.1.3/dist/vue-collapse-it.umd.js"></script>Demo
Options
| Option | Type | Default | Description |
|---|---|---|---|
| directive | string | 'collapse' | name of the directive (v-collapse). |
| speed | number | 300 | transition duration in miliseconds. |
| collapsed | boolean | false | collapse state of elements used the directive. |
Usage
Import the plugin in your main.js file
import VCollapse from 'vue-collapse-it'
const app = createApp(App)
// use the plugin
app.use(VCollapse)
// or you can set your default options
app.use(VCollapse, {
directive: '',
speed: 500,
})
app.mount('#app')Example usage:
<template>
<div>
<!-- you can directly use a single boolean value like this -->
<div v-collapse="isCollapsed" class="box"></div>
<!-- or use an object witrh available configs -->
<div
v-collapse="{
speed: 1000,
collapsed: isCollapsed,
}"
class="box"
></div>
<button @click="toggle">toggle</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const isCollapsed = ref(false)
const toggle = () => {
isCollapsed.value = !isCollapsed.value
}
return {
isCollapsed,
toggle,
}
},
}
</script>
<style scoped>
.box {
height: 300px;
width: 300px;
background: pink;
padding: 50px;
margin: 50px;
}
</style>