ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Formularios

Switch

rx.switch

Documentación oficial

Pedido del taller

Pon tres interruptores para activar y desactivar notificaciones en la pantalla de ajustes de la app. Debajo debe aparecer un resumen de lo que está activado.

rx.switch recoge el mismo valor de sí/no que un checkbox, pero con forma de interruptor. Encaja donde algo cambia en el momento de activarlo, como los "ajustes que se aplican al instante". Para valores que se reúnen y se envían juntos, como aceptar términos o elegir de una lista, Checkbox resulta más natural.

rx.switch(default_checked=True)

Prueba las propiedades

size

variant

color

radius

high_contrast

disabled

rx.switch(default_checked=True, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False, disabled=False)

radius solo acepta tres valores: none · small · full. Aunque esté disabled, se puede cambiar mediante checked (ver «Controlar el valor» más abajo).

Propiedad	Valores	Por defecto	Uso
`checked`	`True` / `False` / Var	Ninguno	Valor controlado (junto con `on_change`)
`default_checked`	`True` / `False`	`False`	Valor que se fija solo al principio
`size`	`"1"` ~ `"3"`	`"2"`	Tamaño
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Aspecto
`color_scheme`, `high_contrast`	Nombre de color Radix / `True`	Valor del tema	Color al activarse y contraste
`radius`	`"none"` `"small"` `"full"`	Valor del tema	Esquinas
`disabled`	`True` / `False`	`False`	Impide que el usuario lo pulse
`name`, `value`, `required`	Cadena / `True`	Ninguno / `"on"`	Nombre y valor al enviar; hay que activarlo para enviar
`on_change`	Evento		Al activar o desactivar. Pasa `True`/`False`

Recibir el valor con on_change

Cada vez que mueves el interruptor, on_change pasa el valor nuevo. Si lo guardas en el State, puedes usar ese valor en otras partes de la pantalla.

false

class SwitchBasicState(rx.State):
    value: bool = False

    @rx.event
    def set_value(self, value: bool):
        self.value = value


rx.hstack(
    rx.switch(on_change=SwitchBasicState.set_value),
    rx.badge(SwitchBasicState.value.to_string()),
    align="center",
)

Controlar el valor: checked

Si pasas a checked un valor del State, el interruptor sigue ese valor. Los dos interruptores miran el mismo valor, así que al mover uno cambian los dos. El segundo lleva disabled=True y no se puede pulsar directamente, pero se mueve en cuanto cambia checked. Lo mismo ocurre si el servidor cambia el valor, por ejemplo desde un botón.

class SwitchControlState(rx.State):
    checked: bool = True

    @rx.event
    def change_checked(self, checked: bool):
        self.checked = checked

    @rx.event
    def flip(self):
        self.checked = not self.checked


rx.hstack(
    rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked),
    rx.switch(checked=SwitchControlState.checked, on_change=SwitchControlState.change_checked, disabled=True),
    rx.button("Flip from server", on_click=SwitchControlState.flip, size="1", variant="soft"),
    align="center",
    spacing="4",
)

Añadir una etiqueta

A diferencia de Checkbox, rx.switch no tiene argumento de etiqueta. Si envuelves el interruptor y el texto juntos con rx.text(..., as_="label"), al hacer clic en el texto también se mueve el interruptor.

Wi-Fi

rx.text(
    rx.flex(rx.switch(default_checked=True), "Wi-Fi", spacing="2", align="center"),
    as_="label",
    size="2",
)

En un formulario

Si tiene name, entra en los datos del formulario. Solo los interruptores activados entran como "on" (o el valor que des en value); los desactivados no aparecen. value es solo el valor que se envía; si está activado o no lo decide checked. Un interruptor con required=True debe estar activado para poder enviar.

Results:

{}

class SwitchFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.vstack(
                rx.text(rx.flex(rx.switch(name="email_alerts", value="yes"), "Email alerts", spacing="2"), as_="label", size="2"),
                rx.text(rx.flex(rx.switch(name="age_check", required=True), "I am over 14 (required)", spacing="2"), as_="label", size="2"),
                rx.button("Submit", type="submit"),
            ),
            on_submit=SwitchFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(SwitchFormState.form_data.to_string())),
    ),
)

Completar el pedido

La lista de nombres de ajustes es constante, así que las filas se generan con una lista por comprensión de Python en lugar de rx.foreach. Cada interruptor mira settings[name], y on_change pasa el nombre junto con el valor nuevo. El n=name de la lambda es un argumento por defecto que fija el nombre en cada vuelta del bucle.

Order updates

Delivery alerts

Coupons

On: Order updates, Delivery alerts

SWITCH_SETTING_NAMES = ["Order updates", "Delivery alerts", "Coupons"]


class SwitchSettingsState(rx.State):
    settings: dict[str, bool] = {"Order updates": True, "Delivery alerts": True, "Coupons": False}

    @rx.event
    def toggle(self, name: str, value: bool):
        self.settings = {**self.settings, name: value}

    @rx.var
    def summary(self) -> str:
        on = [k for k in SWITCH_SETTING_NAMES if self.settings.get(k)]
        return ", ".join(on) if on else "Nothing"


rx.card(
    rx.vstack(
        *[
            rx.hstack(
                rx.text(name, size="2"),
                rx.spacer(),
                rx.switch(
                    checked=SwitchSettingsState.settings[name],
                    on_change=lambda v, n=name: SwitchSettingsState.toggle(n, v),
                ),
                width="100%",
                align="center",
            )
            for name in SWITCH_SETTING_NAMES
        ],
        rx.divider(),
        rx.text("On: ", SwitchSettingsState.summary, size="1", color_scheme="gray"),
        width="260px",
    ),
)

Notas del taller

rx.switch, para ajustes que se aplican al instante; para valores que se reúnen al enviar, Checkbox.
on_change pasa True/False. Para controlarlo, checked + on_change.
disabled solo bloquea al usuario. Si cambia checked, el interruptor también cambia.
La etiqueta se añade envolviéndolo con rx.text(..., as_="label").
En un formulario solo entran los activados, como name: "on" (o value).

← Anterior

Formularios · Checkbox

Formularios · Radio Group

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex