Disclosure

The BDisclosure component is used to hide parts of the flow. Internally it uses BTransitionExpand to handle smooth transitioning to any height.

Normally hidden

the hidden message!
more!

and some

<template>
  <BDisclosure label="Click to show">
    the hidden message!<br>
    more!<br>
    <br>
    and some
  </BDisclosure>
</template>

Normally shown

Add the default-open prop to have it open by default

the not so hidden message!
more!

and some

<template>
  <BDisclosure
    default-open
    label="Click to hide"
  >
    the not so hidden message!<br>
    more!<br>
    <br>
    and some
  </BDisclosure>
</template>

The label slot

BDisclosure has a label slot that can be used to customize the label & content inside the button. The slot has access to the open prop to allow for conditional rendering by state.

the hidden message!
more!

and some

<template>
  <BDisclosure>
    <template #label="{ open }">
      <BChip icon="i-mdi:filmstrip">
        Video
      </BChip>
      <i
        :class="{ 'rotate-180': open }"
        class="i-mdi:chevron-down ml-2 transition-transform"
      />
    </template>

    the hidden message!<br>
    more!<br>
    <br>
    and some
  </BDisclosure>
</template>

Accessability

BDisclosure is based on the disclosure component from @headless-ui/vue and has all the right aria properties handled