# Collapse
Conditionnaly display some content.
# Config
The options below are to be set in the global configuration at the following location:
{
components: {
collapse: {
// ...
},
collapseBtn: {
// ...
}
collapseContent: {
// ...
}
}
}
# CCollapse, CCollapseBtn and CCollapseContent
# class
Classes applied to the component root element, except when the prop bare
is set to true
. See styling components.
- type:
Array<String | Object> | Object | String | (props: Object) => {}
- default:
null
# Example
Using the CCollapseBtn
component:
class({ active }) {
return ['collapse-btn', {
'collapse-btn--active': active,
}]
}
# CCollapseBtn
# inheritBtnClass
Since the CCollapseBtn is a CBtn in the background, it will inherits its class
config option. To disable this behavior, set this option to false
.
- type:
Boolean
- default:
true
# CCollapseContent
# transition
Apply a common transition to all Collapses. The object can contain any Vue built-in transition component props (opens new window).
- type:
object
- default:
null
# Example
{ name: 'fade', mode: 'out-in' }
# API
CCollapse
Name | Type | Default | Description |
---|---|---|---|
Props | |||
variant | string|array | null | Useful when used in the component config |
bare | boolean | false | Disable class inheritance from the component config. See styling components. |
modelValue | boolean | false | Optionally bind the Collapse state with the parent component. |
Events | |||
update:modelValue |
CCollapseBtn
Name | Type | Default | Description |
---|---|---|---|
Props | |||
variant | string|array | null | Useful when used in the component config |
bare | boolean | false | Disable class inheritance from the component config. See styling components. |
CCollapseContent
Name | Type | Default | Description |
---|---|---|---|
Props | |||
variant | string|array | null | Useful when used in the component config |
bare | boolean | false | Disable class inheritance from the component config. See styling components. |
transition | BaseTransitionProps | false | null | The object can contain any Vue built-in transition component props. For example: If you defined a default transition in the config and want to disable it, use |
# Examples
# Simplest
<CCollapse>
<CCollapseBtn>Collapse</CCollapseBtn>
<CCollapseContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum molestias pariatur tempora ab, libero quo maiores sapiente doloribus nihil commodi eaque accusantium praesentium! Nobis natus qui voluptate inventore molestias quisquam, consequuntur harum?
</CCollapseContent>
</CCollapse>
# Controlled
You can control the Collapse status with the v-model
directive, for example to make it open by default or to programatically change its state.
<script>
export default {
data() {
return { collapseOpen: true };
},
};
</script>
<template>
<CCollapse v-model="collapseOpen">
<CCollapseBtn>{{ collapseOpen ? 'Close' : 'Open' }}</CCollapseBtn>
<CCollapseContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis
fuga cupiditate suscipit blanditiis, aliquid minima harum molestias
pariatur tempora ab, libero quo maiores sapiente doloribus nihil
commodi eaque accusantium praesentium! Nobis natus qui voluptate
inventore molestias quisquam, consequuntur harum?
</CCollapseContent>
</CCollapse>
</template>
# With transition
Here’s an example where the transition is directly passed as a prop to the CCollapseContent
. You can also define it globally for all your collapses; see the config.
<CCollapse>
<CCollapseBtn>Collapse with transition</CCollapseBtn>
<CCollapseContent :transition="{ name: 'fade' }">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum molestias pariatur tempora ab, libero quo maiores sapiente doloribus nihil commodi eaque accusantium praesentium! Nobis natus qui voluptate inventore molestias quisquam, consequuntur harum?
</CCollapseContent>
</CCollapse>