TAccordion / TAccordionItem / 折叠面板

Accordion organizes content into collapsible panels. Supports accordion mode (single expand) and multi-expand, three variants, before-change interception, full ARIA support, and keyboard navigation. / 折叠面板将内容组织为可展开/收起的面板，支持手风琴模式和多展开模式、三种变体、切换拦截钩子、完整 ARIA 支持和键盘导航。

TAccordion Props

Prop	Type / 类型	Default / 默认值	Description / 说明
modelValue	string | string[]	—	v-model expanded item(s) / 展开项
accordion	boolean	false	Accordion mode (single expand) / 手风琴模式
variant	'default' | 'flush' | 'tabs'	'default'	Visual variant
inverted	boolean	false	Inverted style
plusIcon	boolean	false	Use +/- icon instead of chevron
expandIconPosition	'left' | 'right'	'right'	Expand icon position
hideArrow	boolean	false	Hide expand arrow
beforeChange	(name, expanded) => boolean	—	Intercept toggle (async supported)

TAccordionItem Props

Prop	Type / 类型	Default / 默认值	Description / 说明
name	string	—	Unique identifier (required) / 唯一标识（必填）
title	string	—	Title text / 标题文字
icon	Icon	—	Left side icon
disabled	boolean	false	Disabled

Events / 事件

Event	Payload	Description / 说明
@update:modelValue	string | string[]	v-model update
@change	(name, expanded)	Panel toggled

Slots / 插槽

Slot	Props	Description / 说明
default (TAccordion)	—	AccordionItem children
default (TAccordionItem)	—	Panel body content
title	{ isActive, toggle }	Custom title
icon	{ isActive }	Custom expand icon

Basic Usage / 基础用法

<script setup lang="ts">
import { TAccordion, TAccordionItem } from '@gulcc/tabler-vue'

const active = ref('item-1')
</script>

<template>
  <TAccordion v-model="active" accordion>
    <TAccordionItem name="item-1" title="Section 1 / 第一部分">
      Content for section 1 / 第一部分内容
    </TAccordionItem>
    <TAccordionItem name="item-2" title="Section 2 / 第二部分">
      Content for section 2 / 第二部分内容
    </TAccordionItem>
    <TAccordionItem name="item-3" title="Section 3 / 第三部分" disabled>
      Disabled section / 禁用的部分
    </TAccordionItem>
  </TAccordion>
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TAccordion, TAccordionItem } from '@gulcc/tabler-vue'
import { IconSettings } from '@tabler/icons-vue'

// Multi-expand / 多展开
const activeMultiple = ref(['item-1', 'item-3'])

// Before-change guard / 切换拦截
const beforeChange = async (name: string, expanded: boolean) => {
  if (!expanded) return true
  if (name === 'item-2') {
    await confirm('Allow expanding item-2?')
  }
  return true
}
</script>

<template>
  <!-- Multi-expand mode / 多展开模式 -->
  <TAccordion v-model="activeMultiple">
    <TAccordionItem name="item-1" title="Panel 1">
      Content / 内容
    </TAccordionItem>
    <TAccordionItem name="item-2" title="Panel 2">
      Content / 内容
    </TAccordionItem>
  </TAccordion>

  <!-- With icon + flush variant / 带图标 + flush 变体 -->
  <TAccordion variant="flush">
    <TAccordionItem name="settings" title="Settings / 设置" :icon="IconSettings">
      Settings panel / 设置面板
    </TAccordionItem>
  </TAccordion>

  <!-- Before-change interception / 切换拦截 -->
  <TAccordion accordion :before-change="beforeChange">
    <TAccordionItem name="item-1" title="Allowed / 允许">
      Content / 内容
    </TAccordionItem>
    <TAccordionItem name="item-2" title="Intercepted / 拦截">
      Requires confirmation / 需确认
    </TAccordionItem>
  </TAccordion>

  <!-- Plus icon + inverted / 加号图标 + 反转 -->
  <TAccordion plus-icon inverted>
    <TAccordionItem name="faq1" title="Question 1 / 问题1">
      Answer / 答案
    </TAccordionItem>
  </TAccordion>
</template>

Tips / 避坑指南

• name is required on each TAccordionItem — it's used as the unique identifier for v-model
• accordion={true} restricts to single panel expand (v-model is string); accordion={false} allows multi-expand (v-model is string[])
• beforeChange can be async — return false to prevent toggle, true to allow
• Disabled items (disabled) are still keyboard-navigable via Arrow keys but cannot be toggled
• Keyboard: ArrowUp/Down to navigate, Enter/Space to toggle, Home/End to jump to first/last