Accordion

This is a stacked set of collapsible panels

Usage

Use the Accordion component to display a list of collapsible items.

Bitrix24 is an online service that offers useful tools for your company. This includes chats and calls, tasks and projects, CRM, and AI-powered assistant.

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

Items

Use the items prop as an array of objects with the following properties:

label?: string
icon?: IconComponent
trailingIcon?: IconComponent
content?: string
value?: string
disabled?: boolean
slot?: string
class?: any
b24ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }

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

Multiple

Set the type prop to multiple to allow multiple items to be active at the same time. Defaults to single.

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

Collapsible

When type is single, you can set the collapsible prop to false to prevent the active item from collapsing.

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

Unmount

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

unmountOnHide

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

You can inspect the DOM to see each item's content being rendered.

Disabled

Use the disabled property to disable the Accordion.

You can also disable a specific item by using the disabled property in the item object.

disabled

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

Trailing Icon

Use the trailing-icon prop to customize the trailing Icon of each item.

You can also set an icon for a specific item by using the trailingIcon property in the item object.

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

Examples

Control active item(s)

You can control the active item by using the default-value prop or the v-model directive with the value of the item. If no value is provided, it defaults to the index as a string.

Bitrix24 is an online service that offers useful tools for your company.

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

When type="multiple", ensure to pass an array to the default-value prop or the v-model directive.

With drag and drop

Use the useSortable composable from @vueuse/integrations to enable drag and drop functionality on the Accordion. This integration wraps Sortable.js to provide a seamless drag and drop experience.

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

With body slot

Use the #body slot to customize the body of each item.

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

The #body slot includes some pre-defined styles, use the #content slot if you want to start from scratch.

With content slot

Use the #content slot to customize the content of each item.

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

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

#{{ item.slot }}
#{{ item.slot }}-body

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

With markdown content

You can use the MDC component from @nuxtjs/mdc to render markdown in the accordion items.

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

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`items`		`AccordionItem[]`
`trailingIcon`	`icons.chevronDown`	`IconComponent` The icon displayed on the right side of the trigger.
`labelKey`	`'label'`	`string` The key used to get the label from the item.
`collapsible`	`true`	`boolean` When type is "single", allows closing content when clicking trigger for an open item. When type is "multiple", this prop has no effect.
`defaultValue`		`string \| string[]` The default active value of the item(s). Use when you do not need to control the state of the item(s).
`modelValue`		`string \| string[]` The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with `v-model`
`type`	`'single'`	`"single" \| "multiple"` Determines whether a "single" or "multiple" items can be selected at a time. This prop will overwrite the inferred type from `modelValue` and `defaultValue`.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the accordion and all its items
`unmountOnHide`	`true`	`boolean` When `true`, the element will be unmounted on closed state.
`b24ui`		`{ root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; }`

Slots

Slot	Type
`leading`	`{ item: AccordionItem; index: number; open: boolean; b24ui: object; }`
`default`	`{ item: AccordionItem; index: number; open: boolean; }`
`trailing`	`{ item: AccordionItem; index: number; open: boolean; b24ui: object; }`
`content`	`{ item: AccordionItem; index: number; open: boolean; b24ui: object; }`
`body`	`{ item: AccordionItem; index: number; open: boolean; b24ui: object; }`

Emits

Event	Type
`update:modelValue`	`[value: string \| string[] \| undefined]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    accordion: {
      slots: {
        root: 'w-full',
        item: 'text-(--b24ui-typography-label-color) border-b border-(--ui-color-divider-vibrant-accent-more) last:border-b-0',
        header: 'flex',
        trigger: 'min-w-0 group flex-1 flex items-center gap-1.5 py-[12px] font-(--ui-font-weight-medium) text-(length:--ui-font-size-sm) leading-[20px] focus-visible:outline-(--ui-color-accent-soft-element-blue) cursor-pointer',
        content: 'motion-safe:data-[state=open]:animate-[accordion-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
        body: 'text-(length:--ui-font-size-sm) pb-[12px]',
        leadingIcon: 'shrink-0 size-[20px]',
        trailingIcon: 'shrink-0 size-[20px] ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
        label: 'text-start break-words'
      },
      variants: {
        disabled: {
          true: {
            trigger: 'cursor-not-allowed opacity-75'
          }
        }
      }
    }
  }
})

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: {
        accordion: {
          slots: {
            root: 'w-full',
            item: 'text-(--b24ui-typography-label-color) border-b border-(--ui-color-divider-vibrant-accent-more) last:border-b-0',
            header: 'flex',
            trigger: 'min-w-0 group flex-1 flex items-center gap-1.5 py-[12px] font-(--ui-font-weight-medium) text-(length:--ui-font-size-sm) leading-[20px] focus-visible:outline-(--ui-color-accent-soft-element-blue) cursor-pointer',
            content: 'motion-safe:data-[state=open]:animate-[accordion-down_200ms_ease-out] motion-safe:data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
            body: 'text-(length:--ui-font-size-sm) pb-[12px]',
            leadingIcon: 'shrink-0 size-[20px]',
            trailingIcon: 'shrink-0 size-[20px] ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
            label: 'text-start break-words'
          },
          variants: {
            disabled: {
              true: {
                trigger: 'cursor-not-allowed opacity-75'
              }
            }
          }
        }
      }
    })
  ]
})

Textarea

A textarea for entering multi-line text.

DescriptionList

For instances requiring the conversion of a table row into its own table to enhance page completeness.