路線チップLineChipExperimental

路線名や系統番号を、ブランド色と自動コントラスト文字で表示する識別チップです。

プレビュー

渋88JY丸ノ内線路線色なし
宿51
新宿駅西口 → 練馬車庫

所要 42分・途中 18停留所

7分後

状態とバリエーション

ブランド色

hex 色を渡すと背景色に応じて文字色を自動で白/黒にします。

渋88JY丸ノ内線路線色なし
宿51
新宿駅西口 → 練馬車庫

所要 42分・途中 18停留所

7分後

中立色

色がない場合でも label が意味を担ち、中立トーンで表示します。

路線色なし

小サイズ

混雑した一覧では size="sm" を使います。

渋88JY丸ノ内線路線色なし
宿51
新宿駅西口 → 練馬車庫

所要 42分・途中 18停留所

7分後

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
labelReactNode-路線名や系統番号です。色に依存せず意味を担います。
colorstring-hex のブランド色です。非 hex または省略時は中立チップになります。
iconReactNode-バスや鉄道などの先頭アイコンです。
size"sm" | "default""default"チップサイズです。

使い方

import { LineChip, ListCard } from "@gunjo/ui";
import { IconBus, IconTrain } from "@tabler/icons-react";

export function RouteCandidate() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4 rounded-lg border bg-card p-4">
      <div className="flex flex-wrap items-center gap-2">
        <LineChip label="渋88" color="#e60012" icon={<IconBus className="h-3.5 w-3.5" />} />
        <LineChip label="JY" color="#9acd32" icon={<IconTrain className="h-3.5 w-3.5" />} />
        <LineChip label="丸ノ内線" color="#f62e36" />
        <LineChip label="路線色なし" />
      </div>
      <ListCard
        leading={<LineChip label="宿51" color="#0079c2" />}
        title="新宿駅西口 → 練馬車庫"
        description="所要 42分・途中 18停留所"
        meta="7分後"
      />
    </div>
  );
}

使用コンポーネント

LineChipListCard

関連コンポーネント

BadgeOriginDestination