デバイスフレームDeviceFrame
Experimental

デスクトップ、タブレット、モバイルの表示サイズを切り替えられる擬似ブラウザフレームです。

パターンの内容 / desktop

状態とバリエーション

ドキュメントやWebページの確認に使う、標準のブラウザ風フレームです。

ドキュメントのプレビュー / desktop

デスクトップアプリや業務画面の検証に合う、Windows 11 風の chrome です。

ダッシュボードのプレビュー / desktop

スマートフォン幅で、同じフレーム内のコンテンツが収まるか確認します。

モバイルのプレビュー / mobile

URL バーに許可されたパスを入力した時に、フレーム内の表示を切り替えます。

ダッシュボード

/dashboard、/reports、/settings を入力できます。

表は横にスクロールできます

プロパティ	型	初期値	説明
host	string	-	URL バーに表示する擬似ホストです。
path	string	-	ホストの後ろに表示する現在のパスです。
viewport	desktop \| tablet \| mobile	-	chrome 状態と親側のサイズ制御に使う現在の viewport です。
onViewportChange	(viewport) => void	-	viewport 切替時に呼び出されます。
variant	default \| windows11	default	擬似ブラウザ chrome の見た目です。
labels	DeviceFrameLabels	-	URL 欄と viewport 切替ツールチップに使うローカライズ済みラベルです。
navigablePaths	string[]	-	URL バー遷移を許可するパス一覧です。
onPathChange	(path) => void	-	有効な URL パスが送信された時に呼び出されます。