Collapsible

単独の折りたたみ。スタイルは付かない。

中身をひとつ開閉するだけの、スタイルの付いていないプリミティブです。見出しが縦に並ぶ形なら Accordion を使ってください。

export const client = "only";

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Button,
} from "@squadbase/vantage/ui";
import { ChevronRight } from "lucide-react";

export default function Example() {
  return (
    <Collapsible className="w-80">
      <CollapsibleTrigger
        render={<Button variant="ghost" size="sm" className="w-full justify-start" />}
      >
        <ChevronRight className="transition-transform duration-200 data-open:rotate-90" />
        クエリの詳細
      </CollapsibleTrigger>
      <CollapsibleContent className="px-3 py-2 text-sm text-muted-foreground">
        直近 30 日・地域フィルタ適用済み・スキャン 1.2 GB
      </CollapsibleContent>
    </Collapsible>
  );
}

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@squadbase/vantage/ui";

open / defaultOpen / onOpenChange で制御します。開いているかどうかはトリガーとパネルの両方に data-open が付くので、CSS だけで矢印を回せます。

<ChevronRight className="transition-transform data-open:rotate-90" />