Slide toggle

Overview¶

Slide Toggle allows the user to toggle on and off and is based on the Angular Material slide toggle component.

Examples¶

import mesop as me


@me.stateclass
class State:
  toggled: bool = False


def on_change(event: me.SlideToggleChangeEvent):
  s = me.state(State)
  s.toggled = not s.toggled


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/slide_toggle",
)
def app():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.slide_toggle(label="Slide toggle", on_change=on_change)
    s = me.state(State)
    me.text(text=f"Toggled: {s.toggled}")

API¶

`slide_toggle` ¶

Creates a simple Slide toggle component with a text label.

PARAMETER	DESCRIPTION
`label`	Text label for slide toggle TYPE: `str \| None` DEFAULT: `None`
`on_change`	An event will be dispatched each time the slide-toggle changes its value. TYPE: `Callable[[SlideToggleChangeEvent], Any] \| None` DEFAULT: `None`
`label_position`	Whether the label should appear after or before the slide-toggle. Defaults to 'after'. TYPE: `Literal['before', 'after']` DEFAULT: `'after'`
`required`	Whether the slide-toggle is required. TYPE: `bool` DEFAULT: `False`
`color`	Palette color of slide toggle. TYPE: `Literal['primary', 'accent', 'warn'] \| None` DEFAULT: `None`
`disabled`	Whether the slide toggle is disabled. TYPE: `bool` DEFAULT: `False`
`disable_ripple`	Whether the slide toggle has a ripple. TYPE: `bool` DEFAULT: `False`
`tab_index`	Tabindex of slide toggle. TYPE: `int` DEFAULT: `0`
`checked`	Whether the slide-toggle element is checked or not. TYPE: `bool` DEFAULT: `False`
`hide_icon`	Whether to hide the icon inside of the slide toggle. TYPE: `bool` DEFAULT: `False`
`key`	The component key. TYPE: `str \| None` DEFAULT: `None`

`content_slide_toggle` ¶

Creates a Slide toggle component which is a composite component. Typically, you would use a text or icon component as a child.

Intended for advanced use cases.

PARAMETER	DESCRIPTION
`on_change`	An event will be dispatched each time the slide-toggle changes its value. TYPE: `Callable[[SlideToggleChangeEvent], Any] \| None` DEFAULT: `None`
`label_position`	Whether the label should appear after or before the slide-toggle. Defaults to 'after'. TYPE: `Literal['before', 'after']` DEFAULT: `'after'`
`required`	Whether the slide-toggle is required. TYPE: `bool` DEFAULT: `False`
`color`	Palette color of slide toggle. TYPE: `Literal['primary', 'accent', 'warn'] \| None` DEFAULT: `None`
`disabled`	Whether the slide toggle is disabled. TYPE: `bool` DEFAULT: `False`
`disable_ripple`	Whether the slide toggle has a ripple. TYPE: `bool` DEFAULT: `False`
`tab_index`	Tabindex of slide toggle. TYPE: `int` DEFAULT: `0`
`checked`	Whether the slide-toggle element is checked or not. TYPE: `bool` DEFAULT: `False`
`hide_icon`	Whether to hide the icon inside of the slide toggle. TYPE: `bool` DEFAULT: `False`
`key`	The component key. TYPE: `str \| None` DEFAULT: `None`

`SlideToggleChangeEvent` `dataclass` ¶

Bases: MesopEvent

Event triggered when the slide toggle state changes.

ATTRIBUTE	DESCRIPTION
`key`	Key of the component that emitted this event. TYPE: `str`