Client actions
For a purely visual interaction, one stays in the browser — no round trip (cf.How Bretzel works). `on_<event>=` then accepts a client expression.
Three ways, a single mechanism
All produce the same thing: an expression evaluated client side, with no request. The first two write it for you; the third one is you.| Way | When |
|---|---|
| 1. Imperative methods (.open / .close / .toggle) | driving a component, with no state to declare |
| 2. Binding methods (.set / .toggle / .clear …) | a client state that is readable / shareable / persistable |
| 3. Raw string (on_click="…") | the escape hatch: an expression by hand |
1. Imperative methods
Write-only: they return the client string, to be given to `on_click=`. Overlays: `.open()` `.close()` `.toggle()`. Value-carrying fields: `.set(v)` `.clear()`. Some components add semantic aliases — for example `.expand()/.collapse()` on the accordion.# container: with … as
with ui.dialog() as confirm:
ui.text("Delete this item?")
ui.button("OK", on_click=delete)
ui.button("Delete", on_click=confirm.open())
# simple: direct assignment
accept = ui.checkbox()
ui.button("Accept all", on_click=accept.set(True))
2. Binding methods
When client state has to be readable, shared or persistent, one declares it (a ClientState) and drives it through its binding. The methods are the same return shapes. Detail inClient state.
class PanelUI(ClientState):
open: bool = False
panel = PanelUI()
ui.button("Show", on_click=panel.open.toggle())
with ui.card(visible=panel.open):
ui.text("Zero round trips.")
3. Escape hatch — a raw string
Passing a string to `on_<event>=` emits it as a client expression evaluated in the browser (`bz-on:click`). It is the escape hatch for the rare case where no shorthand fits — to be kept, precisely, for the rare cases.ui.button("Back to top", on_click="window.scrollTo(0, 0)")