ステータスバーStatusBarExperimental
ステータスや情報を表示するバーです。
プレビュー
記事エディタ
保存済み
バックグラウンド処理なし
UTF-8
状態とバリエーション
ワークスペース状態
同期状態や選択数など、画面全体に関わる軽い状態をまとめます。
同期済み
アップロード待ちはありません
3 件選択中
エディタ情報
保存状態、文字コード、入力モードなどを短く表示します。
記事エディタ
保存済み
バックグラウンド処理なし
UTF-8
注意が必要な状態
切断や未保存など、ユーザーが気づくべき状態は色と文言を変えます。
未保存
接続が不安定です
再接続中
シェル下部の配置
docs のような枠内では fixed を false にし、シェルの下部に配置します。実アプリ全体に固定する場合は fixed の既定値を使います。
アプリケーションの作業領域
準備完了
バックグラウンド処理はありません
v1.4.0
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| fixed | boolean | true | true の場合は画面下部に固定します。docs やカード内では false にして領域内に置きます。 |
| leftNode | React.ReactNode | - | 左側に表示する状態や補助情報です。 |
| rightNode | React.ReactNode | - | 右側に表示するバージョン、選択数、入力モードなどです。 |
| children | React.ReactNode | - | 中央に表示する主要な状態文です。 |
| className | string | - | ラッパーに追加するクラスです。プレビュー内では幅や色の調整に使います。 |
使い方
import { StatusBar } from "@gunjo/ui"
export function EditorStatusBar() {
return (
<div className="w-full max-w-[720px] overflow-hidden rounded-lg border bg-background">
<div className="border-b bg-muted/40 px-4 py-2 text-sm font-medium">
記事エディタ
</div>
<div className="grid min-h-40 grid-cols-1 text-sm sm:grid-cols-[160px_1fr]">
<aside className="border-r bg-muted/20 p-3 text-muted-foreground">
下書き / 公開設定 / 履歴
</aside>
<main className="space-y-3 p-4">
<div className="h-4 w-2/3 rounded bg-muted" />
<div className="h-3 w-full rounded bg-muted/70" />
<div className="h-3 w-5/6 rounded bg-muted/70" />
</main>
</div>
<StatusBar
fixed={false}
className="w-full"
leftNode={<span>保存済み</span>}
rightNode={<span>UTF-8</span>}
>
<span>バックグラウンド処理なし</span>
</StatusBar>
</div>
)
}設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。