デバイスフレームDeviceFrameExperimental

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

パターンの内容 / desktop

状態とバリエーション

macOS 風 chrome

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

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

Windows 11 風 chrome

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

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

モバイル幅

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

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

URL 入力

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 パスが送信された時に呼び出されます。

使い方

import { Button, DeviceFrame, type MarqueeViewport } from "@gunjo/ui";
import * as React from "react";

const previewSizes: Record<MarqueeViewport, { width: number; height: number }> = {
  desktop: { width: 760, height: 300 },
  tablet: { width: 560, height: 360 },
  mobile: { width: 340, height: 420 },
};

export function Example() {
  const [viewport, setViewport] = React.useState<MarqueeViewport>("desktop");
  const [variant, setVariant] = React.useState<"default" | "windows11">("default");
  const size = previewSizes[viewport];

  return (
    <div className="w-full max-w-3xl space-y-4">
      <div className="flex flex-wrap items-center gap-2">
        {[
          { key: "default", label: "macOS" },
          { key: "windows11", label: "Windows 11" },
        ].map((item) => (
          <Button
            key={item.key}
            type="button"
            size="sm"
            variant={variant === item.key ? "default" : "outline"}
            onClick={() => setVariant(item.key as "default" | "windows11")}
          >
            {item.label}
          </Button>
        ))}
      </div>
      <div className="overflow-x-auto rounded-lg bg-muted/30 p-4">
        <div style={{ width: size.width, maxWidth: "100%" }}>
          <DeviceFrame
            host="gunjo.example"
            path="/dashboard"
            defaultPath="/dashboard"
            variant={variant}
            viewport={viewport}
            onViewportChange={setViewport}
            labels={{
              url: "URL",
              desktop: "デスクトップ幅",
              tablet: "タブレット幅",
              mobile: "モバイル幅",
            }}
          >
            <div
              className="flex items-center justify-center bg-muted/30 text-sm text-muted-foreground"
              style={{ height: size.height }}
            >
              パターンの内容 / {viewport}
            </div>
          </DeviceFrame>
        </div>
      </div>
    </div>
  );
}

使用コンポーネント

DeviceFrame TooltipButton Button

MediaLightbox Modal Container