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