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

Tabs

rx.tabs.rootrx.tabs.listrx.tabs.triggerrx.tabs.content

Documentación oficial

Pedido del taller

En la página del producto, separa «Descripción», «Especificaciones» y «Reseñas» en pestañas para que solo se vea una cada vez.

Las pestañas apilan bloques de contenido relacionados y del mismo nivel, y muestran solo uno cada vez. Se construyen con cuatro piezas.

rx.tabs.root: lo agrupa todo y recuerda qué pestaña está abierta.
rx.tabs.list: la fila donde se colocan los botones de las pestañas.
rx.tabs.trigger: el botón que abre su pestaña al pulsarlo. Su value es la etiqueta que la identifica.
rx.tabs.content: el contenido de la pestaña. Se ve cuando se pulsa el trigger con el mismo value.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab1",
)

Prueba las propiedades

orientation y activation_mode van en root; size y loop, en list; color_scheme y disabled, en trigger. Pulsa una pestaña y luego muévete con las flechas del teclado.

Prueba las propiedades

Make changes to your account

orientation

activation_mode

size

loop

color

disable_settings

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Account", value="account", color_scheme="indigo"),
        rx.tabs.trigger("Documents", value="documents", color_scheme="indigo"),
        rx.tabs.trigger("Settings", value="settings", color_scheme="indigo", disabled=False),
        size="2",
        loop=True,
    ),
    rx.box(
        rx.tabs.content(rx.text("Make changes to your account"), value="account"),
        rx.tabs.content(rx.text("Update your documents"), value="documents"),
        rx.tabs.content(rx.text("Edit your personal profile"), value="settings"),
        padding="12px",
    ),
    default_value="account",
    orientation="horizontal",
    activation_mode="automatic",
)

Con activation_mode en manual, las flechas solo mueven el foco: la pestaña se abre al pulsar Enter o Space. Si desactivas loop, las flechas se detienen en los extremos.

Pieza	Propiedad	Valores	Uso
`root`	`default_value`	value de un trigger	Pestaña abierta al principio (no controlado)
`root`	`value` + `on_change`	Valor del State, evento	Gestiona la pestaña abierta con el State (controlado)
`root`	`orientation`	`"horizontal"` (por defecto) `"vertical"`	Dirección de la fila de pestañas y de las flechas
`root`	`activation_mode`	`"automatic"` (por defecto) `"manual"`	Abrir con solo mover el foco, o al pulsar
`list`	`size`	`"1"` `"2"` (por defecto)	Tamaño de los botones de pestaña
`list`	`loop`	`True` (por defecto) / `False`	Si las flechas vuelven al principio al llegar al final
`trigger`	`value`	Cadena (única)	Etiqueta de esta pestaña
`trigger`	`disabled`	`True` / `False`	Impide pulsarla
`trigger`	`color_scheme`	Nombre de color Radix	Color del subrayado cuando está abierta
`content`	`value`	La misma cadena que el trigger	A qué pestaña pertenece el contenido
`content`	`force_mount`	`True` / `False`	No lo quita de la página aunque esté cerrada

Pestaña abierta al principio

Si das a default_value el value de un trigger, esa pestaña está abierta desde el principio. Si no lo das, se empieza sin ninguna pestaña abierta, así que normalmente conviene darlo siempre.

item on tab 2

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    default_value="tab2",
)

Pestañas verticales

Con orientation="vertical", la fila de pestañas se pone en vertical a la izquierda. No solo cambia la dirección visual, también la del teclado: las pestañas se recorren con las flechas arriba y abajo (en horizontal, izquierda y derecha). En vertical, cada trigger debe tener su content sin excepción; si falta alguno, el ancho de la fila de pestañas se descoloca.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1", padding_left="16px"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2", padding_left="16px"),
    default_value="tab1",
    orientation="vertical",
)

Gestionar la pestaña abierta con el State (controlado)

Si das a value un valor del State y lo cambias en on_change, el servidor sabe qué pestaña está abierta. Así puedes abrir otra pestaña con un botón o hacer otra cosa cuando cambia la pestaña. on_change recibe el value de la pestaña recién abierta.

tab1 selected (changed 0 times)

items on tab 1

class TabsPickState(rx.State):
    value: str = "tab1"
    changes: int = 0

    @rx.event
    def go_tab2(self):
        self.value = "tab2"

    @rx.event
    def change_tab(self, val: str):
        self.value = val
        self.changes += 1


rx.vstack(
    rx.text(TabsPickState.value, " selected (changed ", TabsPickState.changes, " times)"),
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger("Tab 1", value="tab1"),
            rx.tabs.trigger("Tab 2", value="tab2"),
        ),
        rx.tabs.content(rx.text("items on tab 1"), value="tab1"),
        rx.tabs.content(rx.text("items on tab 2"), value="tab2"),
        value=TabsPickState.value,
        on_change=TabsPickState.change_tab,
        width="100%",
    ),
    rx.button("Jump to Tab 2", on_click=TabsPickState.go_tab2, size="1", variant="soft"),
)

Botones de pestaña (trigger)

El value de cada trigger debe ser distinto y forma pareja con el content del mismo valor. disabled=True impide pulsarlo y color_scheme cambia el color del subrayado que aparece debajo cuando está abierta. Dentro de un trigger también caben componentes como iconos.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2", color_scheme="green"),
        rx.tabs.trigger("Tab 3", value="tab3", disabled=True),
    ),
    rx.tabs.content(rx.text("item on tab 1"), value="tab1"),
    rx.tabs.content(rx.text("item on tab 2"), value="tab2"),
    rx.tabs.content(rx.text("item on tab 3"), value="tab3"),
    default_value="tab1",
)

Contenido de la pestaña (content) y force_mount

El content de una pestaña cerrada se quita de la página. Por eso, lo que solo existía en el navegador, como el texto escrito en un campo, desaparece al cambiar de pestaña. Con force_mount=True no se quita al cerrarse, se conserva. En ese caso las pestañas cerradas también se ven, así que añade un estilo que las oculte cuando tengan data-state='inactive'. También se usa cuando controlas tú la apertura y el cierre con una biblioteca de animaciones.

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Write", value="write"),
        rx.tabs.trigger("Preview", value="preview"),
    ),
    rx.tabs.content(
        rx.el.input(placeholder="Type, then switch tabs", default_value="", padding="6px", margin_top="8px"),
        value="write",
        force_mount=True,
        style={"&[data-state='inactive']": {"display": "none"}},
    ),
    rx.tabs.content(rx.text("The input on the other tab keeps its text.", margin_top="8px"), value="preview"),
    default_value="write",
)

Completar el pedido

Pusimos iconos en los botones de las pestañas y, en cada contenido, texto, una lista de datos y badges.

A light, waterproof jacket for everyday rain.

rx.card(
    rx.tabs.root(
        rx.tabs.list(
            rx.tabs.trigger(rx.icon("file-text", size=14), "Description", value="desc"),
            rx.tabs.trigger(rx.icon("ruler", size=14), "Specs", value="specs"),
            rx.tabs.trigger(rx.icon("star", size=14), "Reviews", value="reviews"),
        ),
        rx.tabs.content(
            rx.text("A light, waterproof jacket for everyday rain.", size="2"),
            value="desc",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.data_list.root(
                rx.data_list.item(rx.data_list.label("Weight"), rx.data_list.value("320 g")),
                rx.data_list.item(rx.data_list.label("Material"), rx.data_list.value("Nylon")),
            ),
            value="specs",
            padding_top="12px",
        ),
        rx.tabs.content(
            rx.hstack(rx.badge("4.8", color_scheme="amber"), rx.text("from 214 reviews", size="2")),
            value="reviews",
            padding_top="12px",
        ),
        default_value="desc",
    ),
    max_width="420px",
)

Notas del taller

tabs.root > tabs.list > tabs.trigger(value=…) y tabs.content(value=…) se emparejan por value.
default_value fija la pestaña abierta al principio (no controlado); value + on_change la deja en manos del State (controlado).
orientation cambia a la vez la dirección visual y la de las flechas. En vertical, ningún content puede faltar.
list: size · loop; trigger: disabled · color_scheme; content: force_mount.

← Anterior

Visualización de datos · Moment

Mostrar y ocultar · Accordion

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