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


@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/slide_toggle",
)
def app():
  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