Window Frame
任意のコンテンツを macOS またはブラウザーのウィンドウ枠で包み、信号機ボタンと任意のタイトルまたはアドレスバーを表示します。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
variant | macos, browser | macos |
padding (Body) | none, sm, md, lg | md |
| parts | Root, TitleBar, Controls, Control, Title, AddressBar, Body | compound API |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/window-frame.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRWindowFrame } from '@tinyrack/ui/components/window-frame';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
ターミナルウィンドウ パーマリンク
シグネチャーの見た目。macOS のクロームでダークなターミナルを包みます。Controls は 3 つの信号機ボタンを自動表示し、本文は --tr-window-frame-body-* カスタムプロパティでダークになるので、枠と中身のトーンが揃います。
例
macOS とブラウザーのクローム パーマリンク
タイトル付きのアプリウィンドウには variant macos を、タイトルバーを埋めるアドレスバー付きの Web モックアップには browser を使います。どちらもターミナルに限らず実際の UI を包めます。
カスタムテーマ パーマリンク
すべてカスタムプロパティでテーマ化できます。--tr-window-frame-control-* で信号機ボタンを、--tr-window-frame-body-* で任意のパレットを塗れます。追加の variant は不要です。
API
| パート | 基本要素 | 主要 prop |
|---|---|---|
TRWindowFrame.Root | div | variant, render |
TRWindowFrame.TitleBar | div | ネイティブ div prop |
TRWindowFrame.Controls | div | 3 つのドットを自動表示し、既定で aria-hidden |
TRWindowFrame.Control | div | tone（close, minimize, maximize） |
TRWindowFrame.Title | span | heading にするための render |
TRWindowFrame.AddressBar | div | ネイティブ div prop |
TRWindowFrame.Body | div | padding（none, sm, md, lg） |
TRWindowFrame.Root と TRWindowFrame.Title は Base UI の追加的な render 契約に対応し、
枠を <article> や <figure> に、タイトルを heading に変えられます。信号機ボタンは装飾用で、
Controls は aria-hidden を設定し操作不可の要素を描画します。本文はテーマを継承するので、
--tr-window-frame-body-background、--tr-window-frame-body-color、
--tr-window-frame-body-font でダークなターミナルに、
--tr-window-frame-control-close、--tr-window-frame-control-minimize、
--tr-window-frame-control-maximize でドットの色を変えられます。