Accordion

👑Pioneer

TuiAccordion is an interactive content display component. Unlike traditional vertical folding panels, it typically exists in the form of horizontal or vertical slides. By default, it displays a group of collapsed tabs; hovering (or clicking) expands the current item while collapsing others, making it ideal for displaying side-by-side graphic information or galleries.

Basic Usage

Default Mode

The most basic usage, suitable for displaying text or custom DOM content.

• direction: Defaults to h (horizontal).
• itemMinSize: Sets the width of items in their collapsed state (in pixels).

<script setup>
const items = [
  { title: 'Workbench', icon: 'tui-icon ti-star', type: 'primary' },
  { title: 'Messages', icon: 'tui-icon ti-message', type: 'success' },
  { title: 'Settings', icon: 'tui-icon ti-settings', type: 'warning' }
];
</script>

<template>
  <TuiAccordion :height="300">
    <TuiAccordionItem 
      v-for="(item, index) in items" 
      :key="index"
      :index="index"
      :title="item.title"
      :icon="item.icon"
      :type="item.type"
    >
      <div class="content">
        Detailed content area after expansion...
      </div>
    </TuiAccordionItem>
  </TuiAccordion>
</template>

Image Gallery Mode

Setting contentType="image" enables a dedicated image display mode. In this mode, the component automatically optimizes the layout, rendering the image attribute as a background and using an overlay to display the title and description.

<template>
  <TuiAccordion contentType="image" :height="400">
    <TuiAccordionItem 
      v-for="(img, index) in images" 
      :key="index"
      :index="index"
      :image="img.src"
      :title="img.title"
      description="Detailed description text for the image..."
      :hasLinkButton="true"
      @navigateTo="handleViewDetail(index)"
    />
  </TuiAccordion>
</template>

Direction and Layout

Vertical Accordion

Set direction="v" to switch to a vertical layout.

Note: In vertical mode, itemMinSize controls the height of the collapsed state.

<TuiAccordion direction="v" :height="500">
</TuiAccordion>

Visual and Color Customization

TuiAccordion deeply integrates the TuiTyped component, providing powerful color management capabilities.

Semantic Colors

By setting the type attribute directly on the TuiAccordionItem (primary, success, danger, etc.), the component will automatically apply the corresponding theme color bar or background.

Custom Colors (TypeColor)

If preset semantic colors do not meet requirements, any CSS color value can be passed through the typeColor attribute.

<TuiAccordionItem 
  :index="0" 
  title="Custom Purple" 
  typeColor="#722ed1" 
/>

Global Appearance Configuration (TypedConfig)

The typedConfig attribute allows unified control over the appearance of internal color bars (e.g., using the line style or background style).

<template>
  <TuiAccordion 
    :typedConfig="{ appearance: 'line', tone: 'base' }"
  >
    ...
  </TuiAccordion>
</template>

Interaction Configuration

• trigger: Trigger method; defaults to 'hover', can be changed to 'click'.
• autoplay: Whether to enable automatic carousel.
• interval: Automatic carousel interval in milliseconds.
• pauseOnHover: Whether to pause the carousel when the mouse hovers over the content area.
• motionBlur: Whether to enable motion blur effects during switching (to enhance the sense of speed).

<TuiAccordion 
  trigger="click" 
  autoplay 
  :interval="5000" 
  :motionBlur="false"
>
  ...
</TuiAccordion>

API Reference

TuiAccordion Props

Property	Type	Default	Description
direction	String	'h'	Layout direction. Options: h (horizontal), v (vertical).
contentType	String	'default'	Content rendering mode. Options: default, image.
height	Number/String	-	Container height.
width	Number/String	-	Container width.
itemMinSize	Number	40	Collapsed item width/height (px).
initialIndex	Number	0	Initial expanded index.
autoplay	Boolean	true	Whether to auto-play.
interval	Number	3000	Auto-play interval (ms).
trigger	String	'hover'	Expansion trigger method. Options: hover, click.
motionBlur	Boolean	true	Whether to enable motion blur.
activeShowTitle	Boolean	true	Whether the expanded item retains the title bar.
typedConfig	Object	-	Configuration passed to internal TuiTyped (e.g., appearance, tone).
resizeObserver	String	'global'	Size monitoring strategy.

TuiAccordionItem Props

Property	Type	Default	Description
index	Number	Required	Required. Index of the current item.
title	String	-	Title text.
description	String	-	Description text.
icon	String	-	Icon class name.
image	String	-	Image URL (only valid when contentType="image").
type	String	'default'	Semantic color type. Options: primary, success, warning, danger, etc.
typeColor	String	-	Custom color value (overrides type).
hasLinkButton	Boolean	false	Whether to show a navigation button.

TuiAccordionItem Events

Event Name	Description	Callback Parameters
navigateTo	Triggered when the navigation button is clicked.	-