CompareGrid

并排比较模型：一到四个等宽列，每列有标题栏、可独立滚动的对话和底栏。手机上每屏一列。

1/3

Order #4471 shipped three days late because of a carrier delay. Draft a short apology to the customer, and suggest a subject line.

Subject: Your order #4471 is on its way — and we’re sorry it’s late

Hi Maya,

Your order #4471 left our warehouse on time, but a delay with our carrier held it up for three days. That’s not the experience we want for you, and I’m sorry.

It’s moving again and should arrive by Thursday. As a thank-you for your patience, your next order ships free — the code is applied to your account automatically.

Warmly,
The Northwind team

Order #4471 shipped three days late because of a carrier delay. Draft a short apology to the customer, and suggest a subject line.

Here’s a reply you can send as is:

Hi Maya,
I’m sorry your order #4471 is running late. Our carrier had a delay that held it for three days — it’s back on the road and should reach you Thursday.
We’ve added free shipping to your next order. Thank you for bearing with us.
— Northwind support

Subject lines

Order #4471: a short delay, and our apology
Your Northwind order is on its way

Order #4471 shipped three days late because of a carrier delay. Draft a short apology to the customer, and suggest a subject line.

Subject: Sorry — order #4471 is running a little late

Hi Maya,

We’re sorry: a carrier delay held your order #4471 for three days. It’s on its way again and should arrive by Thursday.

Your next order ships free on us.

Best,
Northwind

import { CompareGrid } from "@logicplanes/kaeso-ui/playground";

属性

active
number
手机上显示的列，或列放不下时滚动到的列。
addLabel
string
添加圆形按钮的名称。默认为 LocaleProvider 语言中的“添加模型”。
aria-label
string
网格的无障碍名称（“模型”）。
children
ReactNode
CompareGrid.Column 元素，一到四个。
divider
"none" | "hairline" = hairline
列之间的细线，或不显示。
max
number = 4
最多列数（默认 4）：达到时添加按钮被禁用，并在提示框中说明原因。
onActiveChange
((index: number) => void)
调用时传入获得焦点的列的索引。
onAdd
(() => void)
添加一列：最后一列标题栏末尾的圆形按钮（也在手机的切换器中）。