Collapsible

A collapsible component for showing or hiding its content.

Usage

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.

{
  "wait": "Loading client-side content..."
}

Unmount

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

unmountOnHide

{
  "wait": "Loading client-side content..."
}

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

Disabled

Use the disabled prop to disable the Collapsible.

disabled

{
  "wait": "Loading client-side content..."
}

Examples

Control open state

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

{
  "wait": "Loading client-side content..."
}

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

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

With rotating icon

Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`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. 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.
`b24ui`		`{ root?: ClassNameValue; content?: ClassNameValue; }`

Slots

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

Emits

Event	Type
`update:open`	`[value: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    collapsible: {
      slots: {
        root: '',
        content: 'motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        collapsible: {
          slots: {
            root: '',
            content: 'motion-safe:data-[state=open]:animate-[collapsible-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
          }
        }
      }
    })
  ]
})

Chip

An indicator that shows either a number or a state.

Countdown

Countdown with options control.