v2.4.1

Accordion

This is a stacked set of collapsible panels
GitHub
Demo
Nuxt UI
AccordionAccordion

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.
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion :items="items" />
</template>

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 }
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion :items="items" />
</template>

Multiple

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

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion type="multiple" :items="items" />
</template>

Collapsible

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

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion :collapsible="false" :items="items" />
</template>

Unmount

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

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion :unmount-on-hide="false" :items="items" />
</template>
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.

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])
</script>

<template>
  <B24Accordion disabled :items="items" />
</template>

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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'

const items = ref<AccordionItem[]>([
  {
    label: 'Icons',
    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
  },
  {
    label: 'Colors',
    content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
  },
  {
    label: 'Components',
    content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
  }
])
</script>

<template>
  <B24Accordion :trailing-icon="RocketIcon" :items="items" />
</template>

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.
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items: AccordionItem[] = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon,
    content: 'Bitrix24 is an online service that offers useful tools for your company.'
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon,
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon,
    content: 'Bitrix24 is an online service for business management and work automation.'
  }
]

const active = ref('0')

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = String((Number(active.value) + 1) % items.length)
  }, 2000)
})
</script>

<template>
  <B24Accordion v-model="active" :items="items" />
</template>
Use the value-key prop to change the key used to match items when a v-model or default-value is provided.
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.

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import { useSortable } from '@vueuse/integrations/useSortable'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items = shallowRef<AccordionItem[]>([
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon,
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon,
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon,
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
])

const accordion = useTemplateRef<HTMLElement>('accordion')

useSortable(accordion, items, {
  animation: 150
})
</script>

<template>
  <B24Accordion ref="accordion" :items="items" />
</template>

With body slot

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

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items: AccordionItem[] = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon
  }
]
</script>

<template>
  <B24Accordion :items="items">
    <template #body="{ item }">
      This is the <b>{{ item.label }}</b> panel.
    </template>
  </B24Accordion>
</template>
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.

<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items: AccordionItem[] = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon
  }
]
</script>

<template>
  <B24Accordion :items="items">
    <template #content="{ item }">
      <p class="pb-3.5 text-(length:--ui-font-size-sm) text-(--b24ui-typography-description-color)">
        This is the <b>{{ item.label }}</b> panel.
      </p>
    </template>
  </B24Accordion>
</template>

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
<script setup lang="ts">
import type { AccordionItem } from '@bitrix24/b24ui-nuxt'
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon,
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon,
    slot: 'features' as const,
    content: 'Bitrix24 is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon,
    content: 'Bitrix24 is an online service for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
] satisfies AccordionItem[]
</script>

<template>
  <B24Accordion :items="items">
    <template #features="{ item }">
      <p class="text-(length:--ui-font-size-sm) pb-3.5 text-(--ui-color-accent-main-primary)">
        {{ item.content }}
      </p>
    </template>
  </B24Accordion>
</template>

With markdown content

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

<script setup lang="ts">
import SmartActivityIcon from '@bitrix24/b24icons-vue/outline/SmartActivityIcon'
import FeedbackIcon from '@bitrix24/b24icons-vue/outline/FeedbackIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'

const items = [
  {
    label: 'Getting started with Bitrix24',
    icon: SmartActivityIcon,
    content: '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.'
  },
  {
    label: 'Main features of Bitrix24',
    icon: FeedbackIcon,
    content: '[Bitrix24](https://www.bitrix24.com/) is an online service that has all the tools for company operation and business management.'
  },
  {
    label: 'Bitrix24 Cloud plans',
    icon: RocketIcon,
    content: 'Bitrix24 is an `online service` for business management and work automation. It contains tools for companies of all sizes and industries. Bitrix24 has several plans with different sets of tools that are suitable for different types of business.'
  }
]
</script>

<template>
  <B24Accordion
    type="multiple"
    :items="items"
    :unmount-on-hide="false"
    :default-value="['3']"
    :ui="{
      trigger: 'text-base',
      body: 'text-base text-(--b24ui-typography-description-color)'
    }"
  >
    <template #body="{ item }">
      <MDC :value="item.content" unwrap="p" />
    </template>
  </B24Accordion>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

items T[]
trailingIconicons.chevronDownIconComponent

The icon displayed on the right side of the trigger.

valueKey'value' keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>

The key used to get the value from the item.

labelKey'label' keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>

The key used to get the label from the item.

collapsibletrueboolean

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.

disabledfalseboolean

When true, prevents the user from interacting with the accordion and all its items

unmountOnHidetrueboolean

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: T; index: number; open: boolean; b24ui: object; }
default{ item: T; index: number; open: boolean; }
trailing{ item: T; index: number; open: boolean; b24ui: object; }
content{ item: T; index: number; open: boolean; b24ui: object; }
body{ item: T; 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.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24