手风琴

👑首创

TuiAccordion 是一种交互式的内容展示组件。 与传统的垂直折叠面板不同，它通常以水平或垂直的滑片形式存在。默认情况下，它展示一组折叠的标签，鼠标悬停（或点击）时展开当前项并收起其他项，非常适合展示并列的图文信息或画廊。

基础用法

默认模式 (Default)

最基础的用法，适用于展示文本或自定义 DOM 内容。

• direction: 默认为 h (水平)。
• itemMinSize: 设置收起状态下项目的宽度（像素）。

<script setup>
const items = [
  { title: '工作台', icon: 'tui-icon ti-star', type: 'primary' },
  { title: '消息', icon: 'tui-icon ti-message', type: 'success' },
  { title: '设置', 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">
        这里是展开后的详细内容区域...
      </div>
    </TuiAccordionItem>
  </TuiAccordion>
</template>

图片画廊模式

设置 contentType="image" 可开启专用的图片展示模式。 此时组件会自动优化布局，将 image 属性渲染为背景，并配合遮罩层展示标题和描述。

<template>
  <TuiAccordion contentType="image" :height="400">
    <TuiAccordionItem 
      v-for="(img, index) in images" 
      :key="index"
      :index="index"
      :image="img.src"
      :title="img.title"
      description="这是图片的详细描述文案..."
      :hasLinkButton="true"
      @navigateTo="handleViewDetail(index)"
    />
  </TuiAccordion>
</template>

方向与布局

垂直手风琴 (Vertical)

设置 direction="v" 即可切换为纵向布局。

注意

在垂直模式下，itemMinSize 控制的是收起状态的高度。

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

视觉与色彩定制

TuiAccordion 深度集成了 TuiTyped 组件，提供了强大的色彩管理能力。

语义化颜色

在 TuiAccordionItem 上直接设置 type 属性 (primary, success, danger 等)，组件会自动应用对应的主题色条或背景。

自定义颜色 (TypeColor)

如果预设的语义色无法满足需求，可通过 typeColor 属性传入任意 CSS 颜色值。

<TuiAccordionItem 
  :index="0" 
  title="自定义紫" 
  typeColor="#722ed1" 
/>

全局外观配置 (TypedConfig)

通过 typedConfig 属性，可以统一控制内部颜色条的外观风格（例如使用 line 线条风格或 background 背景风格）。

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

交互配置

• trigger: 触发方式，默认为 'hover'，可改为 'click'。
• autoplay: 是否开启自动轮播。
• interval: 自动轮播间隔 (ms)。
• pauseOnHover: 鼠标悬停在内容区时是否暂停轮播。
• motionBlur: 是否开启切换时的动态模糊特效（增强速度感）。

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

API 参考

TuiAccordion Props

属性名	类型	默认值	说明
direction	String	'h'	布局方向。可选：h (水平), v (垂直)。
contentType	String	'default'	内容渲染模式。可选：default, image。
height	Number/String	-	容器高度。
width	Number/String	-	容器宽度。
itemMinSize	Number	40	收起项的宽度/高度 (px)。
initialIndex	Number	0	初始展开的索引。
autoplay	Boolean	true	是否自动播放。
interval	Number	3000	自动播放间隔 (ms)。
trigger	String	'hover'	展开触发方式。可选：hover, click。
motionBlur	Boolean	true	是否开启动态模糊。
activeShowTitle	Boolean	true	展开项是否保留显示标题栏。
typedConfig	Object	-	透传给内部 TuiTyped 的配置 (如 appearance, tone)。
resizeObserver	String	'global'	尺寸监听策略。

TuiAccordionItem Props

属性名	类型	默认值	说明
index	Number	Required	必填。当前项的索引值。
title	String	-	标题文本。
description	String	-	描述文本。
icon	String	-	图标类名。
image	String	-	图片地址（仅在 contentType="image" 时有效）。
type	String	'default'	语义类型颜色。可选：primary, success, warning, danger 等。
typeColor	String	-	自定义颜色值（覆盖 type）。
hasLinkButton	Boolean	false	是否显示跳转按钮。

TuiAccordionItem Events

事件名	说明	回调参数
navigateTo	点击跳转按钮时触发。	-