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

Mostrar y ocultar

Segmented Control

rx.segmented_control.rootrx.segmented_control.item

Documentación oficial

Pedido del taller

Encima de la lista de productos, añade un selector de vista «Cuadrícula / Lista» y muestra los productos con la forma elegida.

El control segmentado es un grupo de botones para elegir uno entre unos pocos valores o vistas predefinidos. Deja claro qué opción está activa cuando solo puede haber una, como "Inbox / Drafts / Sent". Un desplegable solo muestra el valor elegido, y con varios botones sueltos no se nota bien cuál está activo; el control segmentado muestra a la vez todas las opciones y la elegida.

rx.segmented_control.root agrupa los rx.segmented_control.item, y cada item tiene un texto visible y un value único.

rx.segmented_control.root(
    rx.segmented_control.item("Inbox", value="inbox"),
    rx.segmented_control.item("Drafts", value="drafts"),
    rx.segmented_control.item("Sent", value="sent"),
    default_value="inbox",
)

Prueba las propiedades

size

variant

color

radius

rx.segmented_control.root(
    rx.segmented_control.item("Inbox", value="inbox"),
    rx.segmented_control.item("Drafts", value="drafts"),
    rx.segmented_control.item("Sent", value="sent"),
    default_value="inbox",
    size="2",
    variant="surface",
    color_scheme="indigo",
    radius="medium",
)

size fija el tamaño, variant el aspecto del fondo, color_scheme el color de la opción elegida y radius las esquinas.

Pieza	Propiedad	Valores	Uso
`root`	`default_value`	value de un item	Valor elegido al principio (no controlado)
`root`	`value` + `on_change`	Valor del State, evento	Gestiona el valor elegido con el State (controlado)
`root`	`type`	`"single"` (por defecto) `"multiple"`	Elegir solo uno, o varios
`root`	`size`	`"1"` `"2"` (por defecto) `"3"`	Tamaño
`root`	`variant`	`"surface"` (por defecto) `"classic"`	Aspecto del fondo
`root`	`color_scheme` · `radius`	Nombre de color Radix, valor de esquinas	Color y esquinas
`item`	`value`	Cadena (única)	Valor de esta opción

Conectarlo con el State

Como en el ejemplo básico de la documentación oficial, conecta un valor del State a value y, a on_change, el evento que lo cambia. Al elegir una opción, on_change envía el value del item elegido y, cuando cambia el State, cambian también otras partes de la pantalla. Aquí el valor elegido cambia la alineación del texto.

Según type, on_change envía una cadena o una lista de cadenas, así que el tipo del argumento del handler debe ser str | list[str]. Si pones solo str, Reflex da un error de tipos incompatibles.

Aligned left

class SegmentedAlignState(rx.State):
    control: str = "left"

    @rx.event
    def set_segmented_align(self, value: str | list[str]):
        if isinstance(value, str):
            self.control = value


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item("Left", value="left"),
        rx.segmented_control.item("Center", value="center"),
        rx.segmented_control.item("Right", value="right"),
        value=SegmentedAlignState.control,
        on_change=SegmentedAlignState.set_segmented_align,
    ),
    rx.card(
        rx.text("Aligned " + SegmentedAlignState.control, align=SegmentedAlignState.control),
        width="100%",
    ),
    width="100%",
)

Elegir varios

Con type="multiple" puedes activar varias opciones a la vez, y el valor pasa a ser una lista. Dentro de un item también puedes poner un icono en lugar de texto. Abajo hay botones de negrita, cursiva y subrayado. Reflex 0.10 comprueba al crear el componente si type es "multiple", así que type se da como valor fijo, no como valor del State. Por eso tampoco está en el banco de pruebas.

Sample text

value = bold

class SegmentedStyleState(rx.State):
    styles: list[str] = ["bold"]

    @rx.event
    def set_segmented_styles(self, value: str | list[str]):
        self.styles = [value] if isinstance(value, str) else list(value)


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item(rx.icon("bold", size=16), value="bold"),
        rx.segmented_control.item(rx.icon("italic", size=16), value="italic"),
        rx.segmented_control.item(rx.icon("underline", size=16), value="underline"),
        type="multiple",
        value=SegmentedStyleState.styles,
        on_change=SegmentedStyleState.set_segmented_styles,
    ),
    rx.text(
        "Sample text",
        weight=rx.cond(SegmentedStyleState.styles.contains("bold"), "bold", "regular"),
        font_style=rx.cond(SegmentedStyleState.styles.contains("italic"), "italic", "normal"),
        text_decoration=rx.cond(SegmentedStyleState.styles.contains("underline"), "underline", "none"),
    ),
    rx.text("value = ", SegmentedStyleState.styles.join(", "), size="1", color_scheme="gray"),
)

Completar el pedido

Según el valor elegido, rx.cond alterna entre cuadrícula y lista. Cada item lleva icono y texto.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

class SegmentedViewState(rx.State):
    view: str = "grid"

    @rx.event
    def set_segmented_view(self, value: str | list[str]):
        if isinstance(value, str):
            self.view = value


rx.vstack(
    rx.segmented_control.root(
        rx.segmented_control.item(rx.icon("layout-grid", size=14), "Grid", value="grid"),
        rx.segmented_control.item(rx.icon("list", size=14), "List", value="list"),
        value=SegmentedViewState.view,
        on_change=SegmentedViewState.set_segmented_view,
        size="1",
    ),
    rx.cond(
        SegmentedViewState.view == "grid",
        rx.grid(*[rx.card(rx.text("Item ", i), height="60px") for i in range(1, 7)], columns="3", spacing="2", width="100%"),
        rx.vstack(*[rx.card(rx.text("Item ", i), width="100%") for i in range(1, 7)], spacing="2", width="100%"),
    ),
    width="100%",
    max_width="420px",
)

Notas del taller

Dentro de segmented_control.root van los segmented_control.item("texto", value=…).
default_value para no controlado; value + on_change para que lo gestione el State (controlado).
El tipo del argumento del handler de on_change es str | list[str].
Con type="multiple" se activan varias opciones y el valor es una lista.
El aspecto se define con size · variant (surface · classic) · color_scheme · radius.

← Anterior

Mostrar y ocultar · Accordion

Superposiciones · Tooltip

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