Collapsible

Smooth content toggle with expand and collapse effects.

Wrap your content with the collapsible component to display a Collapsible in your content.

Prop	Default	Type
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::

API

Props

Prop	Default	Type
`icon`	`icons.chevronDown`	`IconComponent` The icon displayed to toggle the collapsible.
`name`	`t('prose.collapsible.name')`	`string` The name displayed in the trigger label.
`openText`	`t('prose.collapsible.openText')`	`string` The text displayed when the collapsible is open.
`closeText`	`t('prose.collapsible.closeText')`	`string` The text displayed when the collapsible is closed.
`b24ui`		`{ root?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; content?: ClassNameValue; } & { root?: ClassNameValue; content?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    prose: {
      collapsible: {
        slots: {
          root: 'my-[20px]',
          trigger: 'group relative rounded-(--ui-border-radius-md) inline-flex items-center gap-[4px] text-(--b24ui-typography-description-color) hover:text-(--b24ui-typography-label-color) text-(length:--ui-font-size-3xs) leading-(--ui-font-line-height-2xs) focus-visible:ring-2 focus-visible:ring-(--ui-color-design-selection-stroke) focus:outline-none cursor-pointer transition-colors',
          triggerIcon: 'size-[14px] shrink-0 motion-safe:group-data-[state=open]:rotate-180 transition-transform duration-200',
          triggerLabel: 'truncate',
          content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
        }
      }
    }
  }
})

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: {
        prose: {
          collapsible: {
            slots: {
              root: 'my-[20px]',
              trigger: 'group relative rounded-(--ui-border-radius-md) inline-flex items-center gap-[4px] text-(--b24ui-typography-description-color) hover:text-(--b24ui-typography-label-color) text-(length:--ui-font-size-3xs) leading-(--ui-font-line-height-2xs) focus-visible:ring-2 focus-visible:ring-(--ui-color-design-selection-stroke) focus:outline-none cursor-pointer transition-colors',
              triggerIcon: 'size-[14px] shrink-0 motion-safe:group-data-[state=open]:rotate-180 transition-transform duration-200',
              triggerLabel: 'truncate',
              content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
            }
          }
        }
      }
    })
  ]
})

CodePreview

For clearer docs, pair code snippets with their visual output and source.

Field

Provide clear and comprehensive documentation for the API configurable elements.

Collapsible

Usage

API

Props

Slots

Theme