Skip to content
On this page

Collapse

Conditionnaly display some content.

Usage

See using components for detailed instructions.

js
import { CCollapse, CCollapseBtn, CCollapseContent } from 'chusho';

Config

The options below are to be set in the global configuration at the following location:

js
{
  components: {
    collapse: {
      class: ({ active, modelValue, variant }) => {},
    },
    collapseBtn: {
      class: ({ active, variant }) => {},
    },
    collapseContent: {
      class: ({ transition, variant }) => {},
      transition: {},
    },
  },
}

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:

js
class({ active }) {
    return ['collapse-btn', {
        'collapse-btn--active': active,
    }]
}

transition

Apply a common transition to all Collapses. The object can contain any Vue built-in transition component props.

  • type: object
  • default: null
Example
js
{ name: 'fade', mode: 'out-in' }

API

NameTypeDefaultDescription
Props
variant string|array|objectundefined

Useful when used in the component config class option, to style it conditionally. See styling components.

bare booleanfalse

Disable class inheritance from the component config. See styling components.

modelValue booleanfalse

Optionally bind the Collapse opening state with the parent component.

Events
update:modelValue
Emitted when the collapse open state changes.
ArgumentTypeDescription
modelValueboolean

Whether the collapse is open or not

Slots
default
Binding nameTypeDescription
activeboolean

true when collapse is open

Examples

Simplest

template
<CCollapse>
  <CCollapseBtn>Collapse</CCollapseBtn>
  <CCollapseContent>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae.
  </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.

vue
<script>
export default {
  data() {
    return { collapseOpen: true };
  },
};
</script>

<template>
  <CCollapse v-model="collapseOpen">
    <CCollapseBtn>
      {{ collapseOpen ? 'Close' : 'Open' }}
    </CCollapseBtn>
    <CCollapseContent class="mt-4">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in,
      iste id nobis dolor excepturi dolore expedita vero quae.
    </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.

template
<CCollapse>
  <CCollapseBtn>Collapse with transition</CCollapseBtn>
  <CCollapseContent :transition="{ name: 'fade' }" class="mt-4">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae.
  </CCollapseContent>
</CCollapse>

Released under the MIT License.