区間（発着）OriginDestinationExperimental
出発地と到着地を横並びで示し、経由地、所要時間、入れ替え操作を扱う経路ヘッダーです。
プレビュー
東京新幹線のぞみ最速 2:27新大阪新幹線
状態とバリエーション
入れ替え可能
via がない経路検索ヘッダーでは、入れ替えボタンを tooltip 付きで表示します。
東京新幹線のぞみ最速 2:27新大阪新幹線
経由あり
経由地を含む場合は、入れ替えではなく A→経由→B の読み取り表示にします。
羽田HND福岡那覇OKA
検索結果行
inline は時刻や短い地点名を一覧行の中で表示します。
列車一覧
のぞみ 501号
06:00発08:27着
2時間27分ひかり 633号
06:33発09:30着
2時間57分プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| from / to | { label: ReactNode; sub?: ReactNode } | - | 出発地と到着地です。label が主表示、sub がコードや時刻です。 |
| via | OriginDestinationEndpoint[] | - | 経由地です。指定時は入れ替えボタンを出さず、横並びの経由表示になります。 |
| connector | ReactNode | - | 矢印の下に置く所要時間や便種別です。 |
| onSwap | () => void | - | 出発地と到着地を入れ替える操作です。via がない時だけ表示します。 |
| swapLabel | string | "出発駅と到着駅を入れ替える" | 入れ替えボタンの aria-label と tooltip 文言です。 |
| inline | boolean | false | 検索結果行向けの小さな1行表示にします。 |
| label | ReactNode | - | group のアクセシブル名です。省略時は from/to の文字列から作ります。 |
使い方
import * as React from "react";
import { Card, CardContent, OriginDestination } from "@gunjo/ui";
export function RouteHeader() {
const [from, setFrom] = React.useState({ label: "東京", sub: "新幹線" });
const [to, setTo] = React.useState({ label: "新大阪", sub: "新幹線" });
return (
<div className="flex w-full max-w-md flex-col gap-4">
<Card>
<CardContent className="py-4">
<OriginDestination
from={from}
to={to}
connector="のぞみ最速 2:27"
swapLabel="出発駅と到着駅を入れ替える"
onSwap={() => {
setFrom(to);
setTo(from);
}}
/>
</CardContent>
</Card>
</div>
);
}