マーキーフレームMarqueeFrameExperimental
パターンや画面を、擬似ブラウザと表示サイズ切り替えの中で確認するフレームです。
プレビュー
状態とバリエーション
URL 連動
URL バーと外部ボタンのどちらからでも、擬似ブラウザ内の表示を切り替えます。
モバイル初期表示
スマホ画面の確認を主目的にする場合は、初期表示サイズをモバイルにします。
カスタム表示サイズ
パターン固有の画面比率に合わせて、デスクトップ / タブレット / モバイルのサイズを差し替えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| path | string | - | フレームの URL に表示する現在のパスです。 |
| children | (viewport) => ReactNode | - | 現在の表示サイズを受け取って描画するパターン内容です。 |
| host | string | gunjo.example | URL バーに表示する擬似ホストです。 |
| storageKey | string | - | 選択中の表示サイズを sessionStorage に保存するキーです。 |
| viewportSizes | Record<viewport, size> | - | デスクトップ / タブレット / モバイルの表示サイズプリセットを差し替えます。 |
| onPathChange | (path) => void | - | 有効な URL パスが送信された時に呼び出されます。 |
使い方
import * as React from "react";
import { Button, MarqueeFrame } from "@gunjo/ui";
const pathOptions = [
{ path: "/media", label: "ライブラリ" },
{ path: "/media/assets", label: "素材" },
{ path: "/media/settings", label: "設定" },
];
const pageCopy = {
"/media": {
title: "メディアライブラリ",
description: "URL バーの変更が MarqueeFrame から通知されます。",
},
"/media/assets": {
title: "すべての素材",
description: "擬似ブラウザ内のページ遷移として表示が切り替わります。",
},
"/media/settings": {
title: "ライブラリ設定",
description: "有効な URL を送信すると描画中のパターンを更新できます。",
},
};
export function Example() {
const [path, setPath] = React.useState("/media");
const copy = pageCopy[path];
return (
<div className="w-full space-y-4">
<div className="flex flex-wrap items-center gap-2">
{pathOptions.map((item) => (
<Button
key={item.path}
type="button"
size="sm"
variant={path === item.path ? "default" : "outline"}
onClick={() => setPath(item.path)}
>
{item.label}
</Button>
))}
</div>
<MarqueeFrame
host="gunjo.example"
path={path}
defaultPath="/media"
navigablePaths={pathOptions.map((item) => item.path)}
onPathChange={setPath}
>
{(viewport) => (
<div className="flex h-full items-center justify-center bg-muted/30 p-6">
<div className="w-full max-w-sm rounded-lg border bg-background p-5 shadow-sm">
<p className="text-xs font-medium uppercase text-muted-foreground">{path}</p>
<h3 className="mt-2 text-xl font-semibold text-foreground">{copy.title}</h3>
<p className="mt-2 text-sm text-muted-foreground">{copy.description}</p>
<p className="mt-4 text-xs text-muted-foreground">現在の表示サイズ: {viewport}</p>
</div>
</div>
)}
</MarqueeFrame>
</div>
);
}