Collapse #

Conditionnaly display some content.

Usage #

See using components for detailed instructions.

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

Config #

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

{
  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:

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 #

{ name: 'fade', mode: 'out-in' }

API #

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.
  </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 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.

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