# 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 class option, to style it conditionally. See styling components.

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 class option, to style it conditionally. See styling components.

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 class option, to style it conditionally. See styling components.

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: { name: "fade", mode: "out-in" }.

If you defined a default transition in the config and want to disable it, use false.

# 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>