開閉パネルトグルCollapsiblePanelToggleExperimental
境界線上に配置して、左右上下の折りたたみパネルを開閉するトグルボタンです。
プレビュー
状態とバリエーション
左境界
左側のナビゲーションやサイドバーを開閉する標準的な境界トグルです。
右境界
右側の補助パネルやインスペクターを開閉する境界トグルです。
上境界
上部のフィルターや補助ツールバーを開閉する境界トグルです。
フィルター公開中担当あり
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| side | "left" | "right" | "top" | "bottom" | "left" | トグルを置くパネルの境界です。アイコンとツールチップ方向も切り替わります。 |
| collapsed | boolean | - | 対象パネルが折りたたまれているかどうかです。 |
| openLabel | string | "Open panel" | 折りたたみ時に表示する aria-label とツールチップです。 |
| closeLabel | string | "Close panel" | 展開時に表示する aria-label とツールチップです。 |
| tooltip | React.ReactNode | - | ツールチップ内容の上書きです。未指定時は openLabel / closeLabel を使います。 |
| iconClassName | string | - | アイコンに追加する className です。 |
| Button props | TooltipButton props | - | onClick、disabled、className などのボタン props を渡せます。 |
使い方
import { CollapsiblePanelToggle } from "@gunjo/ui";
import { useState } from "react";
export function SidebarHandle() {
const [collapsed, setCollapsed] = useState(false);
const sidebarWidth = collapsed ? 0 : 176;
return (
<div
className="relative grid h-56 overflow-visible rounded-lg border bg-background transition-[grid-template-columns]"
style={{ gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)` }}
>
<aside
className="relative min-w-0 overflow-visible border-r bg-muted/30"
>
<div
className={
collapsed
? "pointer-events-none w-44 -translate-x-2 space-y-2 p-4 text-sm opacity-0 transition-[opacity,transform]"
: "w-44 translate-x-0 space-y-2 p-4 text-sm opacity-100 transition-[opacity,transform]"
}
aria-hidden={collapsed}
>
<p className="font-medium">ナビゲーション</p>
<div className="rounded bg-background px-2 py-1 text-muted-foreground">ページ一覧</div>
<div className="rounded bg-background px-2 py-1 text-muted-foreground">設定</div>
</div>
<CollapsiblePanelToggle
side="left"
collapsed={collapsed}
openLabel="左パネルを開く"
closeLabel="左パネルを閉じる"
onClick={() => setCollapsed((value) => !value)}
className="absolute right-0 top-10 translate-x-1/2"
/>
</aside>
<main className="flex min-w-0 flex-1 items-center justify-center p-4">
メインコンテンツ
</main>
</div>
);
}