Components
the application chrome. The ui-gallery page Components, painted with no terminal and no window at each of the documented profiles:
bash
ui-gallery --render --page components --profile full|enhanced|baseline sparkles:ui the application chrome tokyo-night
Welcome ▕ Components · application chrome █
Primitives ▕ █
Layout ▕ █
Tracks ▕ Every one of these is a pure view: it appends a subtree and returns its █
Text ▕ root. Behaviour lives in the state machines beside them, so the same █
Themes ▕ component serves a terminal and a window with no second copy. █
Slots ▕ █
Decoration ▕ ┌─────────────────────────────────────────────────────────────────────┐ █
Effects ▕ │ headerBar — leading · centre · trailing │ █
Grid ▕ │ hue file.d q quit │ █
▸ Components ▕ │ │ █
Tree ▕ │ focused pane │ ░
Property tree ▕ └─────────────────────────────────────────────────────────────────────┘ ░
Table ▕ ░
Scrolling ▕ The groups are separated by grow spacers — the spelling the layout ░
State ▕ engine prescribes for distribution, since there is no margin and no ░
Split ▕ space-between. ░
Dock ▕ ░
Terminal ▕ ┌─────────────────────────────────────────────────────────────────────┐ ░
▕ │ tabStrip — one active, the rest idle │ ░
▕ │ config.js config.ts π.md │ ░
▕ │ │ ░
▕ │ fitLabels: false — each tab takes an equal share instead │ ░
▕ │ config.js config.ts π.md │ ░
▕ └─────────────────────────────────────────────────────────────────────┘ ░
▕ ░
▕ Active and armed are different states, because they mean different ░
▕ things: this one is showing, this one is being pressed. Conflating them ░
▕ is why a hand-rolled strip flickers the wrong tab mid-drag. ░
▕
pages ← prev tab → next tab 1-4 action row n scroll down p scroll up ? keys q quit sparkles:ui the application chrome tokyo-night
Welcome ▕ Components · application chrome █
Primitives ▕ █
Layout ▕ █
Tracks ▕ Every one of these is a pure view: it appends a subtree and returns its █
Text ▕ root. Behaviour lives in the state machines beside them, so the same █
Themes ▕ component serves a terminal and a window with no second copy. █
Slots ▕ █
Decoration ▕ ┌─────────────────────────────────────────────────────────────────────┐ █
Effects ▕ │ headerBar — leading · centre · trailing │ █
Grid ▕ │ hue file.d q quit │ █
▸ Components ▕ │ │ █
Tree ▕ │ focused pane │ ░
Property tree ▕ └─────────────────────────────────────────────────────────────────────┘ ░
Table ▕ ░
Scrolling ▕ The groups are separated by grow spacers — the spelling the layout ░
State ▕ engine prescribes for distribution, since there is no margin and no ░
Split ▕ space-between. ░
Dock ▕ ░
Terminal ▕ ┌─────────────────────────────────────────────────────────────────────┐ ░
▕ │ tabStrip — one active, the rest idle │ ░
▕ │ config.js config.ts π.md │ ░
▕ │ │ ░
▕ │ fitLabels: false — each tab takes an equal share instead │ ░
▕ │ config.js config.ts π.md │ ░
▕ └─────────────────────────────────────────────────────────────────────┘ ░
▕ ░
▕ Active and armed are different states, because they mean different ░
▕ things: this one is showing, this one is being pressed. Conflating them ░
▕ is why a hand-rolled strip flickers the wrong tab mid-drag. ░
▕
pages ← prev tab → next tab 1-4 action row n scroll down p scroll up ? keys q quit sparkles:ui the application chrome tokyo-night
Welcome | Components * application chrome #
Primitives | #
Layout | #
Tracks | Every one of these is a pure view: it appends a subtree and returns its #
Text | root. Behaviour lives in the state machines beside them, so the same #
Themes | component serves a terminal and a window with no second copy. #
Slots | #
Decoration | +---------------------------------------------------------------------+ #
Effects | | headerBar - leading * centre * trailing | #
Grid | | hue file.d q quit | #
> Components | | | #
Tree | | focused pane | |
Property tree | +---------------------------------------------------------------------+ |
Table | |
Scrolling | The groups are separated by grow spacers - the spelling the layout |
State | engine prescribes for distribution, since there is no margin and no |
Split | space-between. |
Dock | |
Terminal | +---------------------------------------------------------------------+ |
| | tabStrip - one active, the rest idle | |
| | config.js config.ts ?.md | |
| | | |
| | fitLabels: false - each tab takes an equal share instead | |
| | config.js config.ts ?.md | |
| +---------------------------------------------------------------------+ |
| |
| Active and armed are different states, because they mean different |
| things: this one is showing, this one is being pressed. Conflating them |
| is why a hand-rolled strip flickers the wrong tab mid-drag. |
|
pages < prev tab > next tab 1-4 action row n scroll down p scroll up ? keys q quit What each profile gives up
The frame's degradation report: one line per substitution, and the capability the target lacked. full is empty when the page asks for nothing a terminal cannot do.
text
alpha-flattened ×15 (alpha)text
color-folded ×91 (colorDepth)
alpha-flattened ×15 (alpha)text
color-dropped ×91 (colorDepth)
ascii-border ×3 (unicode)
ascii-scrollbar ×1 (unicode)
ascii-glyph ×10 (unicode)
alpha-flattened ×15 (alpha)These are the files dub test :ui-gallery compares every render against, so a change to this page that is not re-blessed fails CI.