CompareGrid

Modelle nebeneinander: eine bis vier gleich breite Spalten, jede mit Kopf, einem eigenständig scrollenden Verlauf und Fuß. Auf dem Telefon eine Spalte pro Bildschirm.

Quelltext

1 von 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";

Props

active
number
Die Spalte, die auf dem Telefon sichtbar ist oder angesprungen wird, wenn nicht alle passen.
addLabel
string
Der Name des Hinzufügen-Kreises. Standardmäßig „Modell hinzufügen“ in der Sprache des LocaleProvider.
aria-label
string
Der zugängliche Name des Rasters („Modelle“).
children
ReactNode
CompareGrid.Column-Elemente, eine bis vier.
divider
"none" | "hairline" = hairline
Eine Haarlinie zwischen den Spalten oder keine.
max
number = 4
Höchstzahl der Spalten (standardmäßig 4): Dort ist der Hinzufügen-Kreis deaktiviert, mit dem Grund im Tooltip.
onActiveChange
((index: number) => void)
Wird mit dem Index der Spalte im Fokus aufgerufen.
onAdd
(() => void)
Fügt eine Spalte hinzu: ein Kreis am Ende des Kopfes der letzten Spalte (und im Umschalter auf dem Telefon).