チケット券面TicketStubExperimental

クーポン、搭乗券、会員証などの情報とバーコードまたはQRコードを、チケット形状で表示します。

プレビュー

Gunjo Kiosk ポイント3倍期間限定

対象：駅ナカ Gunjo Kiosk 全店・2026/06/30まで

887412

状態とバリエーション

クーポンバーコード

既定ではcode128風の視覚バーコードを表示します。

Gunjo Kiosk ポイント3倍期間限定

対象：駅ナカ Gunjo Kiosk 全店・2026/06/30まで

887412

QR搭乗券

format="qr" でQR形状に切り替えます。

搭乗券

HND -> LAX

18K
便名 NH106搭乗口 112搭乗 21:40
X7K2QM

ミシン目なし

カードや会員証では perforation=false にします。

会員証

Gunjo Pass

Silver

受付で券面と会員番号を確認します。

4488

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
valuestring-コードに埋め込む値です。
format"code128" | "qr""code128"1次元バーコードまたはQRを選びます。
codeLabelReactNode-コード下の可読ラベルです。既定は value です。
codeAltstring-コード画像のアクセシブル名です。
codeKindLabels{ barcode?: string; qr?: string }-codeAlt未指定時のコード種別名をローカライズします。
formatCodeAlt(parts: { kindLabel: string; value: string; format }) => string-codeAlt未指定時にコード画像のアクセシブル名を組み立てます。既定は `${kindLabel}：${value}` です。codeAlt（全体上書き）が優先されます。
perforationbooleantrueミシン目のノッチと破線を表示します。
codeReactNode-実スキャン可能なコードレンダリングで差し替えます。

使い方

import { Badge, TicketStub } from "@gunjo/ui";

export function CouponTicket() {
  return (
    <div className="w-full max-w-sm">
      <TicketStub value="CPN-GUNJO-KIOSK-3X-887412" codeLabel="887412">
        <div className="flex items-center justify-between gap-3">
          <span className="font-semibold">Gunjo Kiosk ポイント3倍</span>
          <Badge variant="warning">期間限定</Badge>
        </div>
        <p className="mt-1 text-xs text-muted-foreground">
          対象：駅ナカ Gunjo Kiosk 全店・2026/06/30まで
        </p>
      </TicketStub>
    </div>
  );
}

使用コンポーネント

TicketStubBadge

関連コンポーネント

ScanGateImg