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>

アコーディオン

アコーディオン

同時に展開できるのは 1 項目までです。

すべて折りたたむことができます。

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

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="1 つだけ開く">内容</LhCollapseItem>
    <LhCollapseItem name="b" title="再クリックで折りたたむ">内容</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="1 つだけ開く">内容</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	アコーディオンモード：同時に 1 つだけ展開	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[]
  /** アコーディオンモード：同時に 1 つだけ展開 */
  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