Accordion

開閉する見出しの縦積み。既定では 1 つだけ開く。

見出しをクリックして中身を開閉するリストです。既定では一度に 1 つだけ開きます。複数を同時に開きたいときは openMultiple を付けます。

export const client = "only";

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Accordion className="w-96" defaultValue={["freshness"]}>
      <AccordionItem value="freshness">
        <AccordionTrigger>集計はいつ更新されますか？</AccordionTrigger>
        <AccordionContent>
          毎時 05 分に前 1 時間分をまとめて取り込みます。
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="timezone">
        <AccordionTrigger>タイムゾーンは何ですか？</AccordionTrigger>
        <AccordionContent>
          日付の区切りはすべて Asia/Tokyo です。
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@squadbase/vantage/ui";

パーツ

パーツ	役割
`Accordion`	全体。`value` / `defaultValue` は開いている項目の配列
`AccordionItem`	1 項目。`value` で識別する
`AccordionTrigger`	見出しボタン。シェブロンは自動で付く
`AccordionContent`	開閉する中身

複数同時に開く

<Accordion openMultiple defaultValue={["a", "b"]}>

常に開いている単独の折りたたみが欲しいだけなら Collapsible の方が軽量です。