Accordion

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

基本構造

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...

実装方法について

details/summary を採用。
grid の 1fr を使ったトランジションで “height:100% がアニメーションできない問題” を解決。

CSS

Import

import { Accordion } from 'lism-css/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

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

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

<details class="d--accordion -p:20">
  <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:20">
    <div class="d--accordion_inner">
      <p>Lorem ipsum...</p>
    </div>
  </div>
</details>

↓

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

Accordion Label

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

アイコンを変更する

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

↓

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

Accordion Label

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

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

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

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

↓

Preview

Accordion Label

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

Accordion Label

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

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

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

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

↓

Preview

Accordion Label

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

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

Opt-in 機能

追加でCSSが必要な機能

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

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

↓

Example

Accordion Label

<Accordion.Root p='20'>
  <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='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

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

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

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

↓

Preview

メニューリンク

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

<Accordion.Root p='20'>
  <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='20'>...</Accordion.Body>
</Accordion.Root>

<details class="d--accordion -p:20">
  <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:20">
    <div class="d--accordion_inner">...</div>
  </div>
</details>

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

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

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

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