マーキーフレーム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 パスが送信された時に呼び出されます。 |
使い方
Loading...