Skip to content

Collapse

An easy way to toggle what you want

Examples

Base

Show code

Accordion

Show code

Class props

'Classes applied to the element'

Collapse component

An easy way to toggle what you want

html
<o-collapse></o-collapse>

Props

Prop nameDescriptionTypeValuesDefault
animationCustom animation (transition name)string-
From config:
collapse: {
  animation: "fade"
}
contentIdId property of the content container - default is an uuidstring-Default function (see source code)
openWhether collapse is open or not, use v-model:open to make it two-way bindingboolean-true
overrideOverride existing theme classes completelyboolean-
positionTrigger position"top" | "bottom"top, bottom
From config:
collapse: {
  position: "top"
}

Events

Event namePropertiesDescription
update:openvalue boolean - updated open propopen prop two-way binding
openon collapse opened
closeon collapse closed

Slots

NameDescriptionBindings
triggerDefine the collapse triggeropen boolean - collapse open state
defaultDefault content

Sass variables

Current theme ➜ Oruga

SASS VariableDefault

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.

Released under the MIT License.