Collapsible

インポート

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@caroainc/ui-components/collapsible'

基本的な使い方

<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="outline">
      <Icon name="ChevronDown" />
      詳細を表示
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="p-4 border rounded-md mt-2">
      折りたたまれていた内容がここに表示されます。
    </div>
  </CollapsibleContent>
</Collapsible>

初期状態で開く

デフォルトで開いている状態です。

<Collapsible defaultOpen>
  <CollapsibleTrigger asChild>
    <Button>{isOpen ? '閉じる' : '開く'}</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    コンテンツ
  </CollapsibleContent>
</Collapsible>

FAQ形式

<Collapsible className="border rounded-md">
  <CollapsibleTrigger asChild>
    <Button variant="ghost" className="w-full justify-between">
      <span>質問タイトル</span>
      <Icon name="ChevronDown" />
    </Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="px-4 pb-4">
      回答内容
    </div>
  </CollapsibleContent>
</Collapsible>

制御されたコンポーネント

const [isOpen, setIsOpen] = useState(false)

<Collapsible open={isOpen} onOpenChange={setIsOpen}>
  <CollapsibleTrigger asChild>
    <Button>{isOpen ? '閉じる' : '開く'}</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    コンテンツ
  </CollapsibleContent>
</Collapsible>

Props (Collapsible)

Prop	Type	Default	Description
`open`	`boolean`	`-`	開いているかどうか
`onOpenChange`	`(open: boolean) => void`	`-`	状態が変更された時のコールバック
`defaultOpen`	`boolean`	`false`	デフォルトで開いているかどうか

Collapsible

インポート

基本的な使い方

初期状態で開く

FAQ形式

制御されたコンポーネント

Props (Collapsible)

On this page