地図の右上の状態表示MapStatusCornerExperimental
地図の上端に重ねる表示です。左上に見出しを置き、右上に、いま何を見ているか（視点・昼夜・雲画像の時刻など）を短い行で並べます。細い画面では、見出しの横に入るのは最初の1〜2行だけで、残りは見出しの下に続きます。
プレビュー
EARTH · 昼夜LIVE
- 現在地
- 日本は昼
- 雲 最新
- 地形 Sentinel-2 z10
- 雨 気象庁 11:00 実況
- ×123.4
320px
状態とバリエーション
左上の見出しが無い
lead を渡さなければ、行は右上に右寄せで並ぶだけです。
- 現在地
- 日本は昼
- 雲 最新
行が出たり消えたりする
地図に雨雲を表示していないときは雨の行を出さない、のように、行は null で消せます。配列を作り直さなくて済みます。
EARTH · 昼夜LIVE
- 現在地
- 日本は昼
- ×123.4
陰を敷かない
地図の上端がもともと暗いときは scrim={false} で陰を外せます。文字の縁取りは残るので、明るい所でも読めます。
- 現在地
- 日本は昼
- 雲 最新
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | ReactNode[] | - | 上から順の短い行。null / false は飛ばします。 |
| lead | ReactNode | - | 左上の見出し。左へ寄せて浮かせます（float）。 |
| startInset | number | 0 | すべての行の左に空けておく幅（px）。行が見出しの下へ回ったとき、見出しの下の方位磁針に重ならないように。 |
| scrim | boolean | true | 上から下へ薄くなる陰を敷きます。 |
| label | string | "Map status" | 行のまとまり全体に付ける、スクリーンリーダー用の名前。 |
使い方
import { LiveBadge, MapStatusCorner } from "@gunjo/ui";
const LINES = ["現在地", "日本は昼", "雲 最新", "地形 Sentinel-2 z10", "雨 気象庁 11:00 実況", "×123.4"];
export function MapWithStatus() {
return (
<div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
{/* 左上の文字の下に方位磁針を置くので、左を 78px 空けます */}
<MapStatusCorner
className="absolute inset-x-0 top-0"
lead={
<span className="inline-flex items-center gap-2">
EARTH · 昼夜 <LiveBadge live size="sm" />
</span>
}
items={LINES}
startInset={78}
label="地図の状態"
/>
</div>
);
}設計の判断
- 左上の見出しは float で浮かせ、各行は途中で改行しない1つのまとまり（white-space: nowrap）にしました。左右2列の flex だと、細い画面で行のまとまりがまるごと見出しの下へ押し出されたり、語の最後の1字だけが次の行に落ちたりします。float なら、入りきらない行が見出しの下へ回ります。
- 行の入れ物に flex・grid・overflow を付けていません。どれか1つでも付けると、行が float の周りを回り込まなくなります。
- 文字サイズは、地図の上に重ねる文字専用のサイズ（
text-canvas-2xs、9.5px）です。ふだんの最小の 12px では、地図を覆う面が広すぎるためです（特例のページ /docs/exceptions）。 - ポインタを受けません。右上に文字があっても、その下の地図はそのまま動かせます。
関連コンポーネント
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。