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

Radio Group

rx.radio_grouprx.radio_group.rootrx.radio_group.item

Documentación oficial

Pedido del taller

Añade a la pantalla de pago una opción para elegir uno de los tres métodos de envío y muestra al instante el coste de envío del método elegido.

rx.radio_group es un grupo que permite elegir solo una de varias opciones. Se usa cuando hay cinco o seis opciones como mucho y deben verse todas de un vistazo. Si hay muchas y hay que ahorrar espacio, usa Select. Al pasarle una lista, crea un círculo y una etiqueta para cada opción.

rx.radio_group(["1", "2", "3"], default_value="1")

Prueba las propiedades

Small

Medium

Large

direction

spacing

size

variant

color

high_contrast

disabled

rx.radio_group(["Small", "Medium", "Large"], default_value="Medium", direction="row", spacing="2", size="2", variant="classic", color_scheme="indigo", high_contrast=False, disabled=False)

direction es la dirección en la que se colocan las opciones; spacing, la separación entre ellas. Estas dos solo existen en el rx.radio_group de alto nivel.

Propiedad	Valores	Por defecto	Uso
Primer argumento (`items`)	Lista de cadenas / Var	Obligatorio	Lista de opciones. Valor y etiqueta coinciden
`value`	Cadena / Var	Ninguno	Selección controlada (junto con `on_change`)
`default_value`	Cadena	`""`	Valor elegido solo al principio
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`"row"`	Dirección de colocación (solo alto nivel)
`spacing`	`"0"` ~ `"9"`	`"2"`	Separación entre opciones (solo alto nivel)
`size`	`"1"` ~ `"3"`	`"2"`	Tamaño
`variant`	`"classic"` `"surface"` `"soft"`	`"classic"`	Aspecto
`color_scheme`, `high_contrast`	Nombre de color Radix / `True`	Valor del tema	Color y contraste
`disabled`, `required`, `name`			Bloquear, hay que elegir para enviar, nombre para el envío
`on_change`	Evento		Al cambiar la opción elegida. Pasa su valor (cadena)

Recibir el valor elegido con on_change

Cada vez que eliges una opción, on_change pasa su valor. rx.radio es otro nombre de rx.radio_group, así que escribir rx.radio([...]), como en la documentación oficial, es lo mismo.

No Selection

class RadioGroupBasicState(rx.State):
    item: str = "No Selection"

    @rx.event
    def set_item(self, item: str):
        self.item = item


rx.vstack(
    rx.badge(RadioGroupBasicState.item, color_scheme="green"),
    rx.radio(["1", "2", "3"], on_change=RadioGroupBasicState.set_item, direction="row"),
)

Radio group controlado: value + on_change

Si pasas a value un valor del State, la selección sigue siempre ese valor. Si un botón cambia el State, la selección también se mueve. Si solo das default_value, sin value, es no controlado: fija la selección inicial y a partir de ahí la guarda el navegador.

Selected: M

class RadioGroupControlState(rx.State):
    size: str = "M"

    @rx.event
    def set_size(self, value: str):
        self.size = value


rx.vstack(
    rx.radio_group(
        ["S", "M", "L", "XL"],
        value=RadioGroupControlState.size,
        on_change=RadioGroupControlState.set_size,
    ),
    rx.hstack(
        rx.button("Pick XL", on_click=RadioGroupControlState.set_size("XL"), size="1", variant="soft"),
        rx.text("Selected: ", rx.code(RadioGroupControlState.size), size="2"),
        align="center",
    ),
)

Subcomponentes: root e item

Si quieres que la etiqueta sea distinta del valor, bloquear una sola opción o diseñar tú la colocación, usa la API de bajo nivel. rx.radio_group.root se encarga del grupo y de la selección (value, default_value, on_change, name), y rx.radio_group.item es un círculo. item solo acepta value, disabled y required. La etiqueta se añade envolviendo con rx.text(..., as_="label").

Credit card

Bank transfer

Cash (unavailable)

rx.radio_group.root(
    rx.flex(
        rx.text(rx.flex(rx.radio_group.item(value="card"), "Credit card", spacing="2"), as_="label", size="2"),
        rx.text(rx.flex(rx.radio_group.item(value="bank"), "Bank transfer", spacing="2"), as_="label", size="2"),
        rx.text(
            rx.flex(rx.radio_group.item(value="cash", disabled=True), "Cash (unavailable)", spacing="2"),
            as_="label",
            size="2",
            color_scheme="gray",
        ),
        direction="column",
        spacing="2",
    ),
    default_value="card",
    color_scheme="teal",
)

Enviar con un formulario

name es el nombre del grupo y entra en los datos del formulario como nombre: valor elegido. Si no se ha elegido nada, la clave no aparece. Con required=True hay que elegir una opción para poder enviar.

Results:

{}

class RadioGroupFormState(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.radio_group(
                    ["Option 1", "Option 2", "Option 3"],
                    name="radio_choice",
                    required=True,
                    direction="row",
                ),
                rx.button("Submit", type="submit"),
                spacing="4",
            ),
            on_submit=RadioGroupFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(RadioGroupFormState.form_data.to_string())),
        spacing="4",
    ),
)

Completar el pedido

La tabla de costes de envío es un dict constante, y la variable calculada fee busca el coste del método elegido. La lista de opciones también sale de las claves de ese dict, así que al añadir una fila a la tabla aparece también una opción nueva.

Shipping

Standard

Express

Same day

Fee: 0 KRW

RADIO_SHIPPING_FEES = {"Standard": 0, "Express": 3000, "Same day": 7000}


class RadioGroupShippingState(rx.State):
    speed: str = "Standard"

    @rx.event
    def set_speed(self, value: str):
        self.speed = value

    @rx.var
    def fee(self) -> int:
        return RADIO_SHIPPING_FEES.get(self.speed, 0)


rx.card(
    rx.vstack(
        rx.text("Shipping", weight="bold"),
        rx.radio_group(
            list(RADIO_SHIPPING_FEES),
            value=RadioGroupShippingState.speed,
            on_change=RadioGroupShippingState.set_speed,
            direction="column",
        ),
        rx.divider(),
        rx.text("Fee: ", RadioGroupShippingState.fee, " KRW", size="2"),
    ),
    width="240px",
)

Notas del taller

rx.radio_group([opciones...]) permite elegir solo una. Con pocas opciones, en lugar de Select.
on_change pasa el valor elegido. Para controlarlo, value + on_change; solo el valor inicial, default_value.
direction · spacing solo existen en el alto nivel. Para colocación y etiquetas a medida, root + item.
En un formulario, name: valor elegido. Con required hay que elegir para poder enviar.

← Anterior

Formularios · Switch

Formularios · Select

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