Focus
Focus behaviour for its object: autofocus, focus ring, trap.
Focus where it belongs
Focus controls keyboard focus for its object: auto: true focuses it when it appears, trap: true keeps Tab inside it (for a menu or a dialog you draw yourself), and ring: false hides the focus ring for a pointer while keyboard users still see it. Here the search field is focused as soon as the panel opens.
Page(
.name(Search)
.route('/')
var bool open = false
Scaffold(
.config(color: canvas)
.body(
Column(
.config(w: 320, gap: 12, padding: all(24))
Button(
.preset(default)
.config(label: open ? 'Close search' : 'Search')
.fnc { open = !open }
)
If(
.cnd(open)
.obj(
Focus(
.config(auto: true)
.obj(
Input(
.preset(default)
.config(label: 'Search rooms', placeholder: 'Room B')
)
)
)
)
)
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
auto | bool | Focus on mount. | |
ring | bool | true | Show the focus ring. |
trap | bool | Keep focus inside. | |
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). |
Slots
.obj: one object, the default slot