Skip to content

Components

A view is a tree of these node types. Each one has its own page below: purpose, properties - and what leaving one out means - supported children, events and interactions, and how it sizes on the main and cross axis.

Type Purpose Page
ui.stack Lays children out in one direction Stack and layer
ui.text One run of text Text
ui.image Draws a resource Image
ui.range-bar A gradient-filled span with an optional point marker Range bar
ui.slider A level the user drags Slider
ui.button A container the user presses Button
ui.layer Stacks children through the depth of the box instead of along an axis Stack and layer
ui.chart A series drawn as a filled line Chart
ui.text-field A line the user types Text field
ui.list A container that scrolls and asks for more List
ui.transform Rotates, scales and shifts its children together about a pivot Transform
ui.shape A filled and stroked rectangle, rounded rectangle, circle, capsule or path Shape
ui.icon One glyph of Macro Deck’s built-in icon set, drawn by name Icon
ui.grid Lays children out in equal columns and rows, with spans Grid
ui.gauge A read-only level drawn along an arc or ring Gauge
ui.toggle An on/off switch the user flips Toggle
ui.segmented A row of segments the user chooses one of Segmented
ui.dial A rotary level the user turns Dial
ui.modifier Pads, fades, clips, masks or frames its one child Modifier

Any node can also carry a modifiers object - background, border, radius, accessibility text and disabled - and the gesture events. See Modifier.

A component belongs here when a reader cannot draw it from the tree alone, because it must resolve a Macro Deck-defined reference - a time or a media position (ADR 0065)

  • against its own clock. Everything else is ui.*, however Macro Deck-flavoured its styling.
Type Purpose Page
macrodeck.dynamic-text A run of text derived from a time reference the reader resolves itself Time and clock
macrodeck.clock-dial An analogue clock face drawn from the same kind of reference Time and clock
macrodeck.progress-bar A track whose filled span follows a position that keeps moving Progress
macrodeck.progress-text A run of text derived from that same moving position Progress