Outline
Anchor rows under a caption, one active; press fires select {id}.
Group: Navigation · Kind: macro · in the lite catalog
Preview
Section titled “Preview”example
Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.
| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
items |
[outlineItem] |
yes | – | The rows in order. |
value |
string |
– | yes | The active row id. |
caption |
string |
– | – | The heading. |
Events
Section titled “Events”on.select: 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”Accessibility
Section titled “Accessibility”Role: navigation
navigation labelled by caption; each row a link (aria-current=location on the active row) named title then the count; press fires select {id}.
| Keys | Action |
|---|---|
Tab through the rows; Enter Space |
select |
Theming
Section titled “Theming”Recipe parts: Outline/root Outline/caption Outline/row Outline/bar Outline/title Outline/count
Keyed by: active :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Text · Tabs · Segmented · Accordion · Collapsible · Pagination · Breadcrumb · Stepper