Neumorphism UI

Collapsible

補足や詳細設定など、一つの独立した領域を開閉する場合に使います。

プレビュー

詳細設定の展開

周りの内容を変えず、制御された詳細領域を切り替えます。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/collapsible

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

Collapsible に CollapsibleTrigger と CollapsibleContent を配置します。アプリで開閉を追跡する場合は open と onOpenChange を使います。

"use client";

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";

export default function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
      <CollapsibleContent><div>Optional project settings go here.</div></CollapsibleContent>
    </Collapsible>
  );
}

API リファレンス

追加設定のグループを展開、折りたたみするコンテナー。 内容を説明するトリガー名を付け、Enter と Space で展開を確認します。

コンポーネントプロパティ型デフォルト説明
Collapsibleopen / defaultOpenboolean—制御状態または初期状態を指定します。
CollapsibleTriggerdisabledboolean—ユーザー操作を無効にします。
CollapsibleContentkeepMountedboolean—閉じていてもパネルを DOM に保持します。

アクセシビリティ

  • 01

    内容を説明するトリガー名を付け、Enter と Space で展開を確認します。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。