Plan
A plan card: steps to approve, then progress and Stop.
Group: Lists · Kind: macro · in the lite catalog
Preview
Section titled “Preview”state · proposed
Here's my planI'll use your mouse and keyboard for about two minutes.
Open augustiner-keller.de in Safari
Reserve Fri 20:00 for 4
Mail the confirmation to Lisa
state · running
Working on it · step 2 of 4Hands off the mouse for a moment. Esc stops me.
Open augustiner-keller.de in Safari
Reserve Fri 20:00 for 4
Mail the confirmation to Lisa
Add it to your calendar
Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.
Variants
Section titled “Variants”state · done
Here's my planI'll use your mouse and keyboard for about two minutes.
Open augustiner-keller.de in Safari
Reserve Fri 20:00 for 4
Mail the confirmation to Lisa
state · declined
Here's my planI'll use your mouse and keyboard for about two minutes.
Open augustiner-keller.de in Safari
Reserve Fri 20:00 for 4
Mail the confirmation to Lisa
| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
title |
string |
yes | yes | The plan’s heading. |
description |
string |
– | yes | A muted line under it. |
steps |
[planStep] |
– | – | The steps. |
state |
proposed | running | done | declined |
– | yes | proposed asks, running shows progress. Default "proposed". |
progress |
number |
– | yes | 0 to 1. |
approveLabel |
string |
– | – | Button text. Default "$string.yes". |
declineLabel |
string |
– | – | Button text. Default "$string.no". |
stopLabel |
string |
– | – | Button text. Default "$string.stop". |
Events
Section titled “Events”on.approve: runs an actionon.decline: runs an actionon.stop: runs an action
None.
Children
Section titled “Children”none
A2UI basic mapping
Section titled “A2UI basic mapping”No basic catalog component maps here.
Built from
Section titled “Built from”Box · Button · Card · Heading · Progress · Text · Trace · TraceItem
Accessibility
Section titled “Accessibility”Role: group
group labelled by title; the steps are TraceItem lines; the progress bar is a progressbar
| Keys | Action |
|---|---|
| – | Tab reaches Decline, Approve (proposed) or Stop (running) |
Theming
Section titled “Theming”Recipe parts: Plan/root Plan/card Plan/header Plan/title Plan/description Plan/steps Plan/step Plan/footer Plan/decline Plan/approve Plan/running Plan/progress Plan/stop
Keyed by: state :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Button · Card · Heading · Progress · Text · Trace · TraceItem · Section