コンテンツにスキップ
Lism UI

Accordion

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

実装方法について
  • details/summary を採用。
  • grid の 1fr を使った transition で “height:100% 問題” を解決。
↓
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.Header>
    <Accordion.Label>Accordion.Label</Accordion.Label>
    <Accordion.Icon/>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

Props

プロパティ説明
<Accordions>
variant		.d--accordions--{variant} バリエーションクラスを出力します
<Accordion.Root>
variant		.d--accordion--{variant} バリエーションクラスを出力します
<Accordions>,
<Accordion.Root>
duration		--acc-duration が出力され、トランジションの時間を変更できます。
<Accordions>
allowMultiple		data-acc-multiple が出力され、複数のアコーディオンを同時に開くことを禁止します。
<Accordion.Icon>
icon		内部で呼び出される<Icon> に渡す icon を指定できます。ただし、<Accordion.Icon>に子要素が配置されている場合は無視されます。
<Accordion.Icon>
isTrigger		data-role="trigger" buttonタグでの出力となり[data-role="trigger"]が付与されます。

Import

import { Accordions, Accordion } from '@lism-ui/core';

HTML で使用する場合、jsファイルが必要です。

<script src='...'></script>

Usage

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

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.Header>
    <Accordion.Label tag='h3' f='inherit'>Accordion.Label</Accordion.Label>
    <Accordion.Icon/>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>
↓
アイコンの位置を逆にする
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.Header>
    <Accordion.Icon/>
    <Accordion.Label>Accordion.Label</Accordion.Label>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

アイコンを変更する

<Accordion.Label>に指定するiconは、内部で<Icon>に渡されます。
デフォルトは'caret-down'になっています。

↓
'caret-down-fill'を指定する
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.Header>
    <Accordion.Label>Accordion.Label</Accordion.Label>
    <Accordion.Icon icon='caret-down-fill'/>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>
↓
外部コンポーネントを指定する
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. 

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

開閉時にアイコンを変更する (Opt-in)

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

↓
Example
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.Header>
    <Accordion.Label>Accordion.Label</Accordion.Label>
    <Accordion.Icon>
      <Icon icon={{as:Plus, weight:'bold'}} />
      <Icon icon={{as:Minus, weight:'bold'}} />
    </Accordion.Icon>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

<Accordions>

アコーディオン専用のラッパーコンポーネントです。

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

<Accordions hasDivider bd>
  <Accordion.Root p='20'>
    <Accordion.Header>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body mbs='20'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root p='20'>
    <Accordion.Header>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body mbs='20'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root p='20'>
    <Accordion.Header>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body mbs='20'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>

allowMultiple

allowMultipleにfalseを指定すると [data-acc-multiple="disallow"]が出力され、複数のアコーディオンを同時に開くことを禁止します。

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

<Accordions hasDivider bdc='base' allowMultiple={false}>
  <Accordion.Root>
    <Accordion.Header p='30' bgc='text' c='base'>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body p='30'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root>
    <Accordion.Header p='30' bgc='text' c='base'>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body p='30'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  ...
</Accordions>

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

--acc-durationでトランジションの秒数を管理します。

<Accordions>,<Accordion>にdurationを指定すると、（--acc-duration）を出力できます。

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

<Accordions duration='0.4s' g='30'>
  <Accordion.Root bgc='base-2' bxsh='1' bdrs='3'>
    <Accordion.Header p='30'>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body p='30' bd='t' bdc='divider'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root bgc='base-2' bxsh='1' bdrs='3'>
    <Accordion.Header p='30'>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body p='30' bd='t' bdc='divider'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  ...
</Accordions>

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

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

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

これにより、アコーディオンヘッダー内にリンクを置いてもクリックできるようになります。

↓
Preview
Labelテキスト（ヘルプリンク）

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>Labelテキスト（<a href="#acc-innerlink">ヘルプリンク</a>）</Accordion.Label>
    <Accordion.Icon isTrigger bd bdrs='1' bgc='inherit'/>
  </Accordion.Header>
  <Accordion.Body mbs='20'>...</Accordion.Body>
</Accordion.Root>

ただし、Tabキーでのカーソル操作時は、summaryタグ全体の選択を回避できません。