Collapsible

A collapsible component for showing or hiding its content.

Collapsible

Nuxt UI

Git

Demo

Usage

INFO

Reduced movement is taken into account

Use a Button or any other component in the default slot of the Collapsible.

Then, use the #content slot to add the content displayed when the Collapsible is open.

Details

<script setup lang="ts">
import ChevronDownIcon from '@bitrix24/b24icons-vue/actions/ChevronDownIcon'
</script>

<template>
  <B24Collapsible class="w-full h-40">
    <B24Button
      class="group"
      label="More"
      color="link"
      :icon="ChevronDownIcon"
      :b24ui="{
        leadingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      }"
    />

    <template #content>
      <Placeholder class="h-28 w-full" />
    </template>
  </B24Collapsible>
</template>

Unmount

Use the unmount-on-hide prop to prevent the content from being unmounted when the Collapsible is collapsed. Defaults to true.

INFO

You can inspect the DOM to see the content being rendered.

Details

<script setup lang="ts">
import ChevronDownIcon from '@bitrix24/b24icons-vue/actions/ChevronDownIcon'

export interface ExampleProps {
  isUnmountOnHide?: any
}

withDefaults(defineProps<ExampleProps>(), {
  isUnmountOnHide: true
})
</script>

<template>
  <B24Collapsible
    :unmount-on-hide="isUnmountOnHide"
    class="w-full h-40"
  >
    <B24Button
      class="group"
      label="More"
      color="link"
      :icon="ChevronDownIcon"
      :b24ui="{
        leadingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      }"
    />

    <template #content>
      <Placeholder class="h-28 w-full" />
    </template>
  </B24Collapsible>
</template>

Disabled

Use the disabled prop to disable the Collapsible.

Details

<script setup lang="ts">
import ChevronDownIcon from '@bitrix24/b24icons-vue/actions/ChevronDownIcon'

export interface ExampleProps {
  isDisabled?: any
}

withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})
</script>

<template>
  <B24Collapsible
    :disabled="isDisabled"
    class="w-full h-40"
  >
    <B24Button
      class="group"
      label="More"
      color="link"
      :icon="ChevronDownIcon"
      :b24ui="{
        leadingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      }"
    />

    <template #content>
      <Placeholder class="h-28 w-full" />
    </template>
  </B24Collapsible>
</template>

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

INFO

In this example, leveraging defineShortcuts, you can toggle the Collapsible by pressing O.

TIP

This allows you to move the trigger outside of the Collapsible or remove it entirely.

Details

<script setup lang="ts">
import { ref } from 'vue'
import ChevronDownIcon from '@bitrix24/b24icons-vue/actions/ChevronDownIcon'

const open = ref(true)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Collapsible
    v-model:open="open"
    class="w-full h-40"
  >
    <B24Button
      class="group"
      label="More"
      color="link"
      :icon="ChevronDownIcon"
      :b24ui="{
        leadingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
      }"
    />

    <template #content>
      <Placeholder class="h-28 w-full" />
    </template>
  </B24Collapsible>
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
b24ui		{ root?: ClassNameValue; content?: ClassNameValue; }
disabled		boolean When `true`, prevents the user from interacting with the collapsible.
defaultOpen		boolean The open state of the collapsible when it is initially rendered. <br> Use when you do not need to control its open state.
open		boolean The controlled open state of the collapsible. Can be binded with `v-model`.
unmountOnHide	true	boolean When `true`, the element will be unmounted on closed state.

Slots

Slot	Type
default	{ open: boolean; }
content	{}

Emits

Event	Type