ボトムアクションバーBottomActionBarBeta
モバイル画面下部にサマリと主要CTAを固定するアクションバーです。
プレビュー
配車内容の確認
乗車地：渋谷駅前 / 行き先：六本木ヒルズ
車種：JPNタクシー・到着まで約4分
状態: 未確定
見積もり料金¥1,200〜 到着 4分
バーはプレビュー枠の下部に固定されています。
状態とバリエーション
横並び
サマリとCTAを左右に並べる標準形です。
配車内容の確認
乗車地：渋谷駅前 / 行き先：六本木ヒルズ
車種：JPNタクシー・到着まで約4分
状態: 未確定
見積もり料金¥1,200〜 到着 4分
バーはプレビュー枠の下部に固定されています。
CTAを下に積む
主要操作をより強く見せたい時は、料金サマリの下に全幅 CTA を置きます。
配車内容の確認
乗車地：渋谷駅前 / 行き先：六本木ヒルズ
車種：JPNタクシー・到着まで約4分
状態: 未確定
見積もり料金¥1,200〜 到着 4分
バーはプレビュー枠の下部に固定されています。
広い画面で幅を止める
maxWidth を渡すと、バーの背景は画面いっぱいのまま、中身だけが中央で止まります。タブレットや横向きで料金とCTAが左右に離れすぎるのを防ぎます。
見積もり料金¥1,200〜 到着 4分
見積もり料金¥1,200〜 到着 4分
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| children | ReactNode | - | 左側のサマリです。料金、件数、到着予定など残り幅を取る情報を置きます。 |
| actions | ReactNode | - | 右側または下側に置く主要CTAです。ボタン側に実際の onClick を渡します。 |
| stack | boolean | false | CTA をサマリの下に全幅で積みます。 |
| sticky | boolean | true | スクロールコンテナの下部に固定します。 |
| maxWidth | "sm" | "md" | "lg" | "xl" | - | 広い画面で内側コンテンツを中央寄せし、幅上限を付けます。 |
使い方
import * as React from "react";
import { Badge, BottomActionBar, Button, Label, Switch } from "@gunjo/ui";
export function RideBottomActionBar() {
const [stack, setStack] = React.useState(false);
const [called, setCalled] = React.useState(false);
return (
<div className="flex w-full max-w-sm flex-col gap-3">
<div className="flex items-center gap-2">
<Switch id="ride-stack" checked={stack} onCheckedChange={setStack} />
<Label htmlFor="ride-stack" className="text-xs">stack（料金の下にCTAを全幅で配置）</Label>
</div>
<div className="relative h-72 overflow-hidden rounded-xl border bg-muted/30">
<div className={stack ? "h-full overflow-y-auto px-4 pb-36 pt-4 text-sm text-muted-foreground" : "h-full overflow-y-auto px-4 pb-28 pt-4 text-sm text-muted-foreground"}>
<p className="font-medium text-foreground">配車内容の確認</p>
<p className="mt-1">乗車地：渋谷駅前 / 行き先：六本木ヒルズ</p>
<p className="mt-3">車種：JPNタクシー・到着まで約4分</p>
<div className="mt-20 rounded-md border bg-background p-3 text-xs">
状態: {called ? "配車依頼中" : "未確定"}
</div>
</div>
<BottomActionBar
className="absolute inset-x-0"
stack={stack}
actions={
<Button size="lg" onClick={() => setCalled((current) => !current)}>
{called ? "配車をキャンセル" : "この内容で呼ぶ"}
</Button>
}
>
<div className="flex flex-col">
<span className="text-xs text-muted-foreground">見積もり料金</span>
<span className="text-base font-semibold tabular-nums text-foreground">
¥1,200〜 <Badge variant="info" className="ml-1 align-middle">到着 4分</Badge>
</span>
</div>
</BottomActionBar>
</div>
<p className="text-xs text-muted-foreground">バーはプレビュー枠の下部に固定されています。</p>
</div>
);
}