Collapsible
1つのコンテンツブロックを開閉するシンプルなコンポーネント。「もっと見る」「詳細を表示」など、単一の折りたたみが必要なときに使う。
インストール
npx shoji add collapsible
プレビュー
使用例
インストール済みパッケージ
@shoji-ui/button
パターン
Show More
「もっと見る」で長いテキスト・リストを展開するパターン。記事本文・商品説明・コメントの省略表示で使う。
collapsibletexttruncate
Shoji は shadcn/ui ベースの日本発コンポーネントライブラリです。デジタル庁ガイドライン準拠のサイズ体系・...
Advanced Settings
フォーム末尾の「詳細設定」開閉。通常は折りたたまれていて、必要な場合のみ展開できる設定画面のパターン。
collapsibleformsettings
使い方
こんなときに使う
- 「詳細を見る」「もっと読む」などの1段階の展開
- サイドバーのサブメニュー展開
- フォームの高度なオプション表示
使わないほうがいい場面
- 複数項目を比較しながら開閉させたい場合（Accordion を使う）
JP 最適化のポイント
- 「詳細を表示する ▾」→「詳細を隠す ▴」のようにラベルを状態に合わせて切り替える — 日本語のほうが英語より状態変化が直感的に伝わる