ProseCodeCollapse - Bitrix24 UI

Usage

Wrap your code-block with a code-collapse component to display a collapsible code block.

app/assets/css/main.css

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
}

::code-collapse

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
}
```

::

API

Props

Prop	Default	Type
`icon`	`ui.icons.chevronDown`	`IconComponent` The icon displayed to toggle the code.
`name`	`t('prose.codeCollapse.name')`	`string` The name displayed in the trigger label.
`openText`	`t('prose.codeCollapse.openText')`	`string` The text displayed when the code is collapsed.
`closeText`	`t('prose.codeCollapse.closeText')`	`string` The text displayed when the code is expanded.
`open`	`false`	`boolean`
`b24ui`		`{ root?: SlotClass; footer?: SlotClass; trigger?: SlotClass; triggerIcon?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/code-collapse.ts

export default {
  slots: {
    root: 'relative my-5 bg-(--ui-color-design-outline-bg) [&>div]:my-0 [&_pre]:max-h-[80vh] [&_pre]:pb-[48px]',
    footer: 'h-[64px] absolute inset-x-px bottom-px rounded-b-(--ui-border-radius-md) flex items-center justify-center',
    trigger: 'group',
    triggerIcon: 'group-data-[state=open]:rotate-180'
  },
  variants: {
    open: {
      true: {
        root: 'rounded-(--ui-border-radius-md)'
      },
      false: {
        root: 'max-h-[200px] overflow-hidden rounded-b-(--ui-border-radius-md) [&_pre]:overflow-hidden',
        footer: 'inset-x-0 bottom-0 border border-t-0 border-(--ui-color-design-outline-stroke) bg-linear-to-t from-(--ui-color-g-plastic-greish-bg)'
      }
    }
  }
}

CardGroup

Arrange content cards into flexible grids to enhance structure and readability.

CodeGroup

Use a tabbed layout to present multiple code snippets for a clearer view.