Accordion

<Accordion>
- <AccordionHeader>, <AccordionBody>
Lismクラス: .l--accordion ( .l-- 以外を)
- .l--accordion__header, .l--accordion__body
実装について
- details/summary を採用。
- grid の 1fr を使って "height:100% 問題" を解決。
- Note: __body の padding は __body につけるようにする。（閉じる時にpaddingYが0 !importantになる。）

主なProps

<Accordion>
- trigger="icon"
<AccordionHeader>
- icon: アイコンを指定できます。内部の<Icon>コンポーネントに渡されます。
  - デフォルト: "mask-accordion-toggle"
  - openIcon, closeIcon に分けて指定することも可能。
- iconPosition: "right" | "left"
- labelTag: ヘッダーテキストのHTMLタグ。
<AccordionBody>
- 特になし?

Import

import { Accordion, AccordionHeader, AccordionBody } from '@loos/lism-core';

DEMO

アコーディオンが動作しない場合はリロードしてください。

Accordionの例

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>
	<AccordionHeader>
		<AccordionLabel>Accordionヘッダー</AccordionLabel>
		<AccordionIcon />
	</AccordionHeader>
	<AccordionBody>
		...
	</AccordionBody>
</Accordion>

<AccordionHeader>については、label, icon を指定してもうシンプルに書くこともできます。

シンプルな記述例

リサイズ可能エリアです ↑

<Accordion>
	<AccordionHeader label="Accordionヘッダー" />
	<AccordionBody>
		...
	</AccordionBody>
</Accordion>

アイコンを変えてみる caret-down-fill

リサイズ可能エリアです ↑

<Accordion>
	<AccordionHeader>
		<AccordionLabel>Accordionヘッダー</AccordionLabel>
		<AccordionIcon icon='caret-down-fill'/>
	</AccordionHeader>
	<AccordionBody>
		...
	</AccordionBody>
</Accordion>
 
or
 
<Accordion>
	<AccordionHeader label="Accordionヘッダー" icon='caret-down-fill' />
	<AccordionBody>
		...
	</AccordionBody>
</Accordion>

アイコンを左側に表示

リサイズ可能エリアです ↑

<Accordion>
	<AccordionHeader>
		<AccordionIcon />
		<AccordionLabel>Accordionヘッダー</AccordionLabel>
	</AccordionHeader>
	<AccordionBody>
		<DammyText length="l" />
	</AccordionBody>
</Accordion>

単体での装飾例

Accordionヘッダー1

リサイズ可能エリアです ↑

<Accordion shadow='2' radius='2'>
	<AccordionHeader label="Accordionヘッダー1" p='box' bgc="main" c="white" bdrs={{es: '0', ee: '0'}}/>
	<AccordionBody p='box' bgc="main:20%">
		...
	</AccordionBody>
</Accordion>
<hr />
<Accordion bd bdc="b200">
	<AccordionHeader label="Accordionヘッダー2" p='box' bgc="base" />
	<AccordionBody p='box' bgc="base" bd="top" bdc="b200">
		...
	</AccordionBody>
</Accordion>

AccordionGroup

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

AccordionGroupの内部はStackなので、hasDividerを指定できます。

AccordionGroup

リサイズ可能エリアです ↑

<AccordionGroup hasDivider>
	<Accordion>
		<AccordionHeader label="Accordionヘッダー1" />
		<AccordionBody>
			...
		</AccordionBody>
	</Accordion>
	<Accordion>
		<AccordionHeader label="Accordionヘッダー2" />
		<AccordionBody>
			...
		</AccordionBody>
	</Accordion>
	<Accordion>
		<AccordionHeader label="Accordionヘッダー3" />
		<AccordionBody>
			...
		</AccordionBody>
	</Accordion>
</AccordionGroup>

allowMultipleをfalseに指定すると、複数のアコーディオンを同時に開くことを禁止します。

AccordionGroup

リサイズ可能エリアです ↑

<AccordionGroup hasDivider allowMultiple={false}>
	...
</AccordionGroup>

AccordionGroupにdurationを指定すると、その子要素である<Accordion>全てに同じdurationが適用されます。

AccordionGroup

<AccordionGroup hasDivider bd radius='3' duration='.5s'>
	...
</AccordionGroup>

AccordionGroupはStackで構成されているため、gapでアコーディオン間の余白を調整できます。

AccordionGroup

<AccordionGroup gap={20}>
	<Accordion hasDivider bdc='b200' bgc='pale' shadow='1' radius='3'>
		<AccordionHeader label="Accordionヘッダー1" p='box'/>
		<AccordionBody p='box'>
			...
		</AccordionBody>
	</Accordion>
	<Accordion hasDivider bdc='b200' bgc='pale' shadow='1' radius='3'>
		<AccordionHeader label="Accordionヘッダー2" p='box'/>
		<AccordionBody p='box'>
			...
		</AccordionBody>
	</Accordion>
	<Accordion hasDivider bdc='b200' bgc='pale' shadow='1' radius='3'>
		<AccordionHeader label="Accordionヘッダー3" p='box'/>
		<AccordionBody  p='box'>
			...
		</AccordionBody>
	</Accordion>
	...
</AccordionGroup>

アイコンを変更する方法

<AccordionHeader> または <AccordionIcon> のiconとiconPropsにアイコン用のコンポーネントとpropsを指定できます。

アイコンを変えてみる

リサイズ可能エリアです ↑

import { CaretDown } from "@phosphor-icons/react";
 
<Accordion>
	<AccordionHeader>
		<AccordionLabel>アコーディオン</AccordionLabel>
		<AccordionIcon icon={CaretDown} iconProps={{weight:'fill'}} />
	</AccordionHeader>
	<AccordionBody>
		<p>...</p>
	</AccordionBody>
</Accordion>
 
or
 
<Accordion>
	<AccordionHeader label='アコーディオン' icon={CaretDown} iconProps={{weight:'fill'}} />
	<AccordionBody>
		<p>...</p>
	</AccordionBody>
</Accordion>

開閉時にアイコンを切り替える

<AccordionIcon>の子要素(children)に直接<Icon>を配置することもでき、アイコンを2つ配置してdata-to属性を指定すると開くアイコンと閉じるアイコンを分けることが可能です。

開閉時にアイコンを切り替える

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

リサイズ可能エリアです ↑

import { CaretDown, Minus, Plus, X } from "@phosphor-icons/react";
 
<Accordion>
	<AccordionHeader>
		<AccordionLabel>プラス/マイナス</AccordionLabel>
		<AccordionIcon>
			<Icon as={Plus} weight="bold" data-to="open" />
			<Icon as={Minus} weight="bold" data-to="close" />
		</AccordionIcon>
	</AccordionHeader>
	<AccordionBody>
		<DammyText length="m" />
	</AccordionBody>
</Accordion>
 
 
<Accordion>
	<AccordionHeader>
		<AccordionLabel>キャレット/クローズ</AccordionLabel>
		<AccordionIcon>
			<Icon as={CaretDown} weight="bold" data-to="open" />
			<Icon as={X} weight="bold" data-to="close" />
		</AccordionIcon>
	</AccordionHeader>
	<AccordionBody>
		<DammyText length="m" />
	</AccordionBody>
</Accordion>

ヘッダーのHTMLタグをhタグにする

Accordionの例

Accordion Contents.

リサイズ可能エリアです ↑

<Accordion>
	<AccordionHeader>
		<AccordionLabel tag="h3">アコーディオンヘッダー</AccordionLabel>
		<AccordionIcon/>
	</AccordionHeader>
	<AccordionBody>...</AccordionBody>
</Accordion>

ヘッダーに要素を追加する

<AccordionHeader> は flexで要素を並べているだけなので、例えばアイコンを2つ使用することなども可能です。

アイコンをもう一つ使用する

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

リサイズ可能エリアです ↑

<Accordion>
	<AccordionHeader>
		<Icon as={SealQuestion} size="2em" />
		<AccordionLabel>アコーディオンヘッダー</AccordionLabel>
		<AccordionIcon />
	</AccordionHeader>
	<AccordionBody>
		...
	</AccordionBody>
</Accordion>

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

AccordionIcon に isTrigger を指定すると、data-role="trigger"が出力されます。
これにより、アコーディオンを展開するためのclickイベントがヘッダー全体ではなくアイコン部分に対して登録され、アコーディオンヘッダー内のリンクをクリックできるようになります。

さらに、アイコン部分も少し強調されて表示されます。

Accordionの例

Accordion Contents.

リサイズ可能エリアです ↑

<Accordion>
	<AccordionHeader>
		<AccordionLabel><a href="#acc">アコーディオンのタイトル</a></AccordionLabel>
		<AccordionIcon isTrigger/>
	</AccordionHeader>
	<AccordionBody>...</AccordionBody>
</Accordion>

Note:

<summary>自体がtoggleイベントを持つため、<AccordionHeader>内のリンク以外のエリアをクリックしてもアコーディオンは開閉します。
これを防いでアイコンのみだけをクリッカブルにしたい場合は、以下のようにCSSを追加してください。

.c--accordion__header:has([data-role='trigger']) {
	pointer-events: none;
}

Decobox Tab