Accordion - Bitrix24 UI

Usage

Use the accordion and accordion-item components to display an Accordion in your content.

Yes! While optimized for Nuxt, Bitrix24 UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the installation guide to get started.

::accordion
---
defaultValue:
  - '1'
---

::accordion-item{label="Is Bitrix24 UI free to use?"}
Yes! Bitrix24 UI is completely free and open source under the MIT license. All 100+ components are available to everyone.
::

::accordion-item{label="Can I use Bitrix24 UI with Vue without Nuxt?"}
Yes! While optimized for Nuxt, Bitrix24 UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the [installation guide](/docs/getting-started/installation/vue/) to get started.
::

::accordion-item{label="Is Bitrix24 UI production-ready?"}
Yes! Bitrix24 UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.
::

::

API

Props

Prop	Default	Type
`type`	`'multiple'`	`"multiple" \| "single"`
`b24ui`		`{ root?: ClassNameValue; trigger?: ClassNameValue; } & { root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    prose: {
      accordion: {
        slots: {
          root: 'my-[20px]',
          trigger: 'text-(--b24ui-typography-label-color)'
        }
      },
      accordionItem: {
        base: 'pb-[20px] text-(--b24ui-typography-description-color) *:first:mt-0 *:last:mb-0 *:my-[6px]'
      }
    }
  }
})

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: {
          accordion: {
            slots: {
              root: 'my-[20px]',
              trigger: 'text-(--b24ui-typography-label-color)'
            }
          },
          accordionItem: {
            base: 'pb-[20px] text-(--b24ui-typography-description-color) *:first:mt-0 *:last:mb-0 *:my-[6px]'
          }
        }
      }
    })
  ]
})

Code

Render code snippets and highlighted code blocks, complete with clipboard copying.

Badge

Present versioning information, status labels, and relevant tags within your material.