Neumorphism UI
ナビゲーションと開示@neumorphism-ui/collapsible

Collapsible

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

@neumorphism-ui/collapsible
Registry JSON

プレビュー

インストール

インストール: collapsiblenpx shadcn@latest add @neumorphism-ui/collapsible

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

Import

Collapsible の import コード
"use client";

import * as React from "react";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";

Example

Collapsible の使用コード
export default function Example() {
  const [expanded, setExpanded] = React.useState(false);
  return (<Collapsible open={expanded} onOpenChange={setExpanded}><CollapsibleTrigger>{"詳細設定"}<span aria-hidden="true">{expanded ? "−" : "+"}</span></CollapsibleTrigger><CollapsibleContent><div>{"初期設定を変更せずに追加の設定を表示します。"}</div></CollapsibleContent></Collapsible>);
}

API リファレンス

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

アクセシビリティ

  • 01

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

  • 02

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