エディタEditorExperimental
Figma 風のエディタレイアウト（サイドバーとキャンバス）です。
プレビュー
状態とバリエーション
topBar・leftPanel・rightPanel はどれも省略でき、渡した口だけが現れます。左の枠は中くらいの幅から、右の枠は広い幅から出ます。
3つの枠すべて
上の帯・左のレイヤー・右の属性をそろえた、編集画面の標準形です。
アートボード
右の枠を外す
rightPanel を省くと、キャンバスが右まで広がります。属性を浮かせて出す編集画面はこの形です。
アートボード
キャンバスだけ
topBar だけを残して左右を外すと、絵に集中する形になります。閲覧や書き出しの画面に向きます。
アートボード
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| topBar | React.ReactNode | - | Content for the top toolbar area (fixed height). |
| leftPanel | React.ReactNode | - | Content for the left sidebar (collapsible/responsive logic handled internally if needed). |
| rightPanel | React.ReactNode | - | Content for the right sidebar (typically for properties/inspectors). |
| children | React.ReactNode | - | The central canvas area content. |
| className | string | - | Additional classes for the root container. |
Usage
import { EditorTemplate } from "@gunjo/ui";
export function EditorPage() {
return (
<EditorTemplate
topBar={<div className="h-14 border-b flex items-center px-4">Toolbar</div>}
leftPanel={<div className="w-64 border-r h-full p-4">Layers</div>}
rightPanel={<div className="w-72 border-l h-full p-4">Properties</div>}
>
<div className="flex-1 bg-muted/50 flex items-center justify-center">
Canvas Area
</div>
</EditorTemplate>
)
}