Accordion

アコーディオン要素を作成できるUIコンポーネントです。

実装方法について

details/summary を採用。
grid の 1fr を使ったトランジションを採用。

基本構造

details.d--accordion
  summary.d--accordion_header
    span.d--accordion_label ...Header label...
    span.d--accordion_icon
      svg.a--icon
  div.d--accordion_body
    div.d--accordion_inner.l--flow ...Contents...

CSS

JavaScript

@lism-css/ui パッケージで提供しています。

Import

import { Accordion } from '@lism-css/ui/react';

以下のコンポーネントが利用できます。

<Accordion.Root>
<Accordion.Header>
<Accordion.Label>
<Accordion.Icon>
<Accordion.Body>

また、.HeaderLabel を使うと、.Header, .Label, .Icon をまとめて配置できます。

<Accordion.HeaderLabel {...props}>Text</Accordion.HeaderLabel>

↓ これは以下のように内部で展開されます

<Accordion.Header {...props}>
  <Accordion.Label>Text</Accordion.Label>
  <Accordion.Icon/>
</Accordion.Header>

Props

プロパティ	説明
`<Accordion.Icon>` `icon`	内部で呼び出される`<Icon>` に渡す `icon` を指定できます。ただし、`<Accordion.Icon>`に子要素が配置されている場合は無視されます。
`<Accordion.Icon>` `isTrigger`	アイコンが `button`タグでの出力となり`[data-role="trigger"]`が付与されます。
`<Accordion.Body>` `flow`	`__inner`に渡されます。

Usage

↓

Preview

Accordion Label

<Accordion.Root p='15'>
  <Accordion.HeaderLabel>Accordion Label</Accordion.HeaderLabel>
  <Accordion.Body my-s='15'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

<details class="d--accordion -p:15">
  <summary class="d--accordion_header">
    <span class="d--accordion_label">Accordion Label</span>
    <span class="d--accordion_icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor" focusable="false" class="a--icon" aria-hidden="true"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>
    </span>
  </summary>
  <div class="d--accordion_body -my-s:15">
    <div class="d--accordion_inner">
      <p>Lorem ipsum...</p>
    </div>
  </div>
</details>

↓

ラベルのHTMLタグをh3タグにする

Accordion Label

<Accordion.Root p='15'>
  <Accordion.Header>
    <Accordion.Label tag='h3' f='inherit' fw='bold'>Accordion Label</Accordion.Label>
    <Accordion.Icon/>
  </Accordion.Header>
  <Accordion.Body my-s='15'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

アイコンを変更する

<Accordion.Label>に指定するiconは、内部で<Icon>に渡されます。

↓

外部コンポーネントを指定する

Accordion Label

import { CaretDoubleDown } from "@phosphor-icons/react";

<Accordion.Root p='15'>
  <Accordion.Header>
    <Accordion.Label>Accordion Label</Accordion.Label>
    <Accordion.Icon icon={CaretDoubleDown}/>
  </Accordion.Header>
  <Accordion.Body my-s='15'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

アコーディオンの同時開閉を禁止する

複数の<Accordion.Root>(.d--accordion)を含む親要素に [data-accordion-multiple="disallow"]を指定すると、複数のアコーディオンを同時に開くことを禁止し、どれかが開くとその兄弟アコーディオンを閉じるようになります。

↓

Preview

Accordion Label

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Accordion Label

<Stack g='1px' data-accordion-multiple='disallow'>
  <Accordion.Root>
    <Accordion.HeaderLabel p='20' bgc='text' c='base'>Accordion Label</Accordion.HeaderLabel>
    <Accordion.Body p='20'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root>
    <Accordion.HeaderLabel p='20' bgc='text' c='base'>Accordion Label</Accordion.HeaderLabel>
    <Accordion.Body p='20'>
      <Dummy length='xl' />
    </Accordion.Body>
  </Accordion.Root>
  ...
</Stack>

開閉トランジションの時間を変更する

アコーディオン用のトランジションは--acc-durationで秒数を管理できます。

親要素に変数をセットすると一括管理できます。

↓

Preview

Accordion Label

<Stack g='20' style={{'--acc-duration': '.25s'}}>
  <Accordion.Root bgc='base-2' bxsh='10' bdrs='20'>
    <Accordion.HeaderLabel p='20'>Accordion Label</Accordion.HeaderLabel>
    <Accordion.Body p='20' bd-t>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root bgc='base-2' bxsh='10' bdrs='20'>
    <Accordion.HeaderLabel p='20'>Accordion Label</Accordion.HeaderLabel>
    <Accordion.Body p='20' bd-t>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  ...
</Stack>

CSSで:rootの--acc-durationを上書きすると、デフォルトの開閉速度を変更できます。

Opt-in 機能

追加でCSSが必要な機能

開閉時のアイコンを分ける

追加で少しCSSを加える必要がありますが、開閉時にアイコンを切り替える例も紹介します。

↓

Example

Accordion Label

<Accordion.Root p='15'>
  <Accordion.Header>
    <Accordion.Label>Accordion Label</Accordion.Label>
    <Accordion.Icon>
      <Icon setTransition ga='1/1' icon={{as:Plus, weight:'bold'}} />
      <Icon setTransition ga='1/1' icon={{as:Minus, weight:'bold'}} />
    </Accordion.Icon>
  </Accordion.Header>
  <Accordion.Body my-s='15'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

アコーディオントリガーをアイコンのみにする

<Accordion.Icon> に isTrigger を指定すると、buttonタグでの出力となり[data-role="trigger"]が付与されます。
この時、アコーディオンを開閉するためのclickイベントは summary（アコーディオンヘッダー）全体ではなくアイコン部分に対して登録されます。

これにより、アコーディオンヘッダー内部のテキストリンクをクリックできるようになり、さらに以下に示すような追加CSSを適用することで、アイコン部分だけをクリックできるように制限することもできます。

↓

Preview

メニューリンク

Lorem ipsum dolor sit amet.Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<Accordion.Root p='15'>
  <Accordion.Header trigger='icon'>
    <Accordion.Label><a href="#acc-innerlink">メニューリンク</a></Accordion.Label>
    <Accordion.Icon isTrigger bd bdrs='5' bgc='inherit' p='10' />
  </Accordion.Header>
  <Accordion.Body my-s='15'>...</Accordion.Body>
</Accordion.Root>

<details class="d--accordion -p:15">
  <summary class="d--accordion_header">
    <span class="d--accordion_label">Labelテキスト（<a href="#acc-innerlink">ヘルプリンク</a></span>
    <button class="d--accordion_icon -d:ig -bd -bdrs:5 -bgc:inherit -p:10" data-role="trigger">
      <svg class="a--icon"...>...</svg>
    </button>
  </summary>
  <div class="d--accordion_body -my-s:15">
    <div class="d--accordion_inner">...</div>
  </div>
</details>

上記の追加CSSを適用しても、Tabキーでのカーソル操作時におけるsummaryタグ全体の選択を回避することはできません。

スクリプトの処理の内容について

おおまかな処理ステップは以下の通りです。

d--accordion のsummary要素、または（data-role="trigger"があればその要素）に対してクリックイベント・トグルイベントを登録
クリック時、開閉状態に応じて、open属性とdata-opened属性を操作。
- アニメーションの終了を待ってから状態を確定する。
- アコーディオンが開く時、親要素にdata-accordion-multiple="disallow" があるかチェックし、あれば他の兄弟要素を閉じる。
トグル時の処理
- open属性とdata-opened属性が食い違った場合に修正。
イベント解除(コンポーネントのアンマウント時に登録イベントを解除。)