Collapse 折叠面板

手风琴 / 多展开内容折叠组，严格对齐 APG accordion pattern。

基础用法

基础用法

与页面整体保持一致的视觉与交互。

操作后给予清晰及时的状态反馈。

<script setup lang="ts">
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="一致性和多样性">内容</LhCollapseItem>
    <LhCollapseItem name="b" title="反馈">内容</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="一致性和多样性">内容</LhCollapseItem>
    <LhCollapseItem name="b" title="反馈">内容</LhCollapseItem>
  </LhCollapse>
</template>

手风琴

手风琴

同时最多展开一项。

允许全部收起。

<script setup lang="ts">
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="只开一个">内容</LhCollapseItem>
    <LhCollapseItem name="b" title="再次点击收起">内容</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="只开一个">内容</LhCollapseItem>
    <LhCollapseItem name="b" title="再次点击收起">内容</LhCollapseItem>
  </LhCollapse>
</template>

受控 v-model 与禁用项

v-model 受控当前展开面板（单值或数组，随 accordion 模式变化）；disabled 禁用单个面板。

受控展开

受控内容 A

禁用内容

受控内容 C

<script setup>
import { ref } from 'vue'

const activeNames = ref(['a'])
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="面板 A">受控内容 A</LhCollapseItem>
    <LhCollapseItem name="b" title="面板 B（禁用）" disabled>禁用内容</LhCollapseItem>
    <LhCollapseItem name="c" title="面板 C">受控内容 C</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {
  data() {
    return { activeNames: ['a'] }
  },
}
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="面板 A">受控内容 A</LhCollapseItem>
    <LhCollapseItem name="b" title="面板 B（禁用）" disabled>禁用内容</LhCollapseItem>
    <LhCollapseItem name="c" title="面板 C">受控内容 C</LhCollapseItem>
  </LhCollapse>
</template>

API

LhCollapse Props

属性名	说明	类型	默认值
modelValue	当前激活的面板（受控 v-model，单值或数组）	LhCollapseKey | LhCollapseKey[]	—
accordion	手风琴模式：同时只展开一个	boolean	false
sx	sx 快速布局属性	LhSxProps	—

Events

事件名	说明	回调参数
update:modelValue	展开面板变化时触发（受控 v-model）	(value: LhCollapseKey | LhCollapseKey[])
change	展开面板变化时触发（非受控；accordion 下为单值）	(value: LhCollapseKey | LhCollapseKey[])

LhCollapseItem Props

属性名	说明	类型	默认值
name	面板唯一标识	string | number	—
title	标题（也可用 title 插槽）	string	—
disabled	禁用	boolean	false
sx	sx 快速布局属性	LhSxProps	—

插槽：title 标题、default 内容。

无障碍

• 对齐 APG accordion pattern：标题为真实 <button aria-expanded aria-controls>，内容区 role="region" + aria-labelledby
• Enter / Space 切换；禁用项原生 disabled 移出交互
• 高度过渡用 CSS grid-template-rows: 0fr/1fr（无 JS 测高），尊重 prefers-reduced-motion

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/collapse/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhCollapseProps

/** 折叠面板 props */
export interface LhCollapseProps {
  /** 当前激活的面板（受控 v-model: Omit 便于手风琴单值） */
  modelValue?: LhCollapseKey | LhCollapseKey[]
  /** 手风琴模式：同时只展开一个 */
  accordion?: boolean
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhCollapseItemProps

/** 面板项 props */
export interface LhCollapseItemProps {
  /** 面板唯一标识（必填） */
  name: LhCollapseKey
  /** 标题（也可用 title 插槽） */
  title?: string
  disabled?: boolean
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhCollapseKey _{（来自 @lh-ui/share/core/collapse）}

export type LhCollapseKey = string | number