Details

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

クリックでコンテンツを開閉できるアコーディオンUIをdetails/summary要素で作成できるUIコンポーネントです。

Accordionとは違い、jsを使わずCSSだけでの実装となっています。

↓

Preview

Details Title

ここにコンテンツが入ります。

<Details.Root bd>
  <Details.Summary p="20" bgc="base-2" hov="neutral">
    <Details.Title>Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content p="20">
    <p>ここにコンテンツが入ります。</p>
  </Details.Content>
</Details.Root>

<details class="c--details -bd">
  <summary class="c--details_summary l--flex -g:10 -ai:center -p:20 -bgc:base-2 -hov:neutral">
    <span class="c--details_title set--plain -fx:1">Details Title</span>
    <span class="c--details_icon a--icon" aria-hidden="true"></span>
  </summary>
  <div class="c--details_body">
    <div class="c--details_content l--flow -flow:s -p:20">
      <p>ここにコンテンツが入ります。</p>
    </div>
  </div>
</details>

How to use

@lism-css/ui パッケージでDetails(.c--details)として提供しています。

Import

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

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

<Details.Root>
<Details.Summary>
<Details.Title>
<Details.Icon>
<Details.Content>

Props

プロパティ	説明
`<Details.Root>` `--duration`	展開アニメーションの秒数
`<Details.Title>` `as`	summary要素内のタイトルを出力するHTMLタグの種類

基本構造

<Details.Root>
  <Details.Summary>
    <Details.Title>Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content>...Contents...</Details.Content>
</Details.Root>

ソースコード

ソースコードは GitHub で公開しています。

Examples

タイトルのHTMLタグを変更し、複数同時展開を制限する例

<Details.Title>はデフォルトではspanタグで出力されますが、asでHTMLタグを指定できます。

また、details/summaryの基本的な機能として、name属性を指定すると同じグループ内で同時に展開可能な要素が一つのみとなります。

↓

例

Details Title

ここにコンテンツが入ります。

Details Title

ここにコンテンツが入ります。

<Stack g="10">
  <Details.Root bd name="details-group-01">
    <Details.Summary p="20" bgc="base-2" hov="neutral">
      <Details.Title as="h3">Details Title</Details.Title>
      <Details.Icon />
    </Details.Summary>
    <Details.Content p="20">
      <p>ここにコンテンツが入ります。</p>
    </Details.Content>
  </Details.Root>
  <Details.Root bd name="details-group-01">
    <Details.Summary p="20" bgc="base-2" hov="neutral">
      <Details.Title as="h3">Details Title</Details.Title>
      <Details.Icon />
    </Details.Summary>
    <Details.Content p="20">
      <p>ここにコンテンツが入ります。</p>
    </Details.Content>
  </Details.Root>
</Stack>

summary内の見出し要素について

「summary内に見出し要素を配置しても、スクリーンリーダーでロール検出ができない」という問題がありましたが、2026年現在、すでにモダンブラウザではほとんど解決しているようです。

アニメーション時間を変更する例

<Details>の開閉アニメーションの時間は--duration変数で管理しており、初期値は、<Accordion>と同じ--acc-durationになっています。

局所的な調整には --duration変数を調整し、全体的な調整には:rootで--acc-durationを上書きしてください。

↓

例

Details Title

ここにコンテンツが入ります。

<Details.Root bd style={{ '--duration': '.4s' }}>
  <Details.Summary p="20" bgc="base-2" hov="neutral">
    <Details.Title as="h3">Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content p="20">
    <p>ここにコンテンツが入ります。</p>
  </Details.Content>
</Details.Root>