Demo chrome
The frame for an interactive figure or a small research tool: header, controls, a black stage, and a status line.
Experimental May change in any minor version before 1.0.
In this chapter 14 pages
App shell
Probability machine
One more bin than rows.
A complete version with this exact shell is the demo page pattern.
<AppShell title="Probability machine">
<Fragment slot="head"><Button size="sm" variant="secondary">Run again</Button></Fragment>
<Fragment slot="controls">
<Slider label="Rows of pegs" name="rows" min={2} max={14} value={8} />
</Fragment>
<Machine rows={8} /> <!-- the stage -->
<Fragment slot="status"><Status state="idle">Ready</Status></Fragment>
</AppShell>The shell's title is an h2. Under a section heading of its own, pass level=3, as this page does.
Readout
- Balls
- 40
- Mean bin
- 4.03
- Expected
- 4.00
<Readout items={[{ label: "Mean bin", value: "4.03" }]} />Empty state
No runs yet
Pick a dataset and press Train. Results appear here, newest first.
An empty state says what is missing and gives the one action that fills it.