Toggle
A checkbox or switch.
Also written Checkbox, Switch; layr format rewrites these to Toggle.
A checkbox or a switch
Toggle is a labelled on/off control: kind: checkbox (the default) or kind: switch. .fnc { … } runs with the new value.
Page(
.name(Settings)
.route('/')
var bool notify = true
Scaffold(
.config(color: canvas)
.body(
Column(
.config(gap: 14, padding: all(24))
Toggle(
.config(
kind: switch
label: 'Email me when a room frees up'
value: notify
)
.fnc { notify = value }
)
Text(
.config(color: muted)
.obj(notify ? 'You will get an email.' : 'No emails.')
)
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
value | bool | On or off. | |
label | txt | Label. | |
kind | checkbox | switch | checkbox | Presentation. |
disabled | bool | Disabled. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Events
.fnc runs on change. .on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible.