uivCollapse
Flexible plugin for easy toggle behavior.
Example
Click the button below to show and hide another element.
vue
<template>
<div>
<Btn type="primary" @click="show = !show">Click me!</Btn>
</div>
<br />
<Collapse v-model="show">
<div class="well" style="margin-bottom: 0">Hi there.</div>
</Collapse>
</template>
<script setup>
import { ref } from 'vue';
import { Collapse, Btn } from 'uiv';
const show = ref(false);
</script>Accordion
Extend the default collapse behavior to create an accordion with the panel component.
vue
<template>
<div class="panel-group uiv">
<div class="panel panel-default">
<div class="panel-heading" role="button" @click="toggleAccordion(0)">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
<Collapse v-model="showAccordion[0]">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</Collapse>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="button" @click="toggleAccordion(1)">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
<Collapse v-model="showAccordion[1]">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</Collapse>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="button" @click="toggleAccordion(2)">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</div>
<Collapse v-model="showAccordion[2]">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</Collapse>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { Collapse } from 'uiv';
const showAccordion = ref([true, false, false]);
function toggleAccordion(index) {
if (showAccordion.value[index]) {
showAccordion.value[index] = false;
} else {
showAccordion.value = showAccordion.value.map((v, i) => i === index);
}
}
</script>API Reference
Collapse
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
v-model | Boolean | false | ✔ | Show / hide the component. |
tag | String | div | The HTML tag that render the collapse component. | |
transition | Number | 350 | Collapse transition speed. Use 0 to disable transition. |
Slots
| Name | Description |
|---|---|
default | Replace as the collapse body. |
Events
| Name | Params | Description |
|---|---|---|
show | This event fires immediately when the v-model prop is set to true. | |
shown | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). | |
hide | This event is fired immediately when the v-model prop is set to false. | |
hidden | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |