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

Visualización de datos

List

rx.listrx.list.unorderedrx.list.orderedrx.list.item

Documentación oficial

Pedido del taller

En la página de la receta, muestra los ingredientes como lista con viñetas y los pasos de preparación como lista numerada.

rx.list apila elementos de arriba abajo. Si el orden no importa, usa rx.list.unordered (HTML ul), con viñetas; si el orden importa, rx.list.ordered (HTML ol), con números. Cada elemento se crea con rx.list.item (HTML li).

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.flex(
    rx.list.unordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.ordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    spacing="6",
)

Prueba las propiedades

En una lista numerada puedes cambiar el tipo de marcador y contar al revés. El número inicial, start, lo vemos en una sección más abajo.

Prueba las propiedades

Preheat the oven
Mix the batter
Bake for 30 minutes

list_style_type

reversed

rx.list.ordered(
    rx.list.item("Preheat the oven"),
    rx.list.item("Mix the batter"),
    rx.list.item("Bake for 30 minutes"),
    list_style_type="decimal",
    reversed=False,
)

list_style_type define la forma del marcador y reversed cuenta al revés.

Propiedad	Dónde va	Valores	Por defecto	Uso
`list_style_type`	Las tres listas	Viñetas: `"disc"` `"circle"` `"square"` `"none"`, números: `"decimal"` `"lower-roman"` `"upper-alpha"` …	`list`: `"none"`, `unordered`: `"disc"`, `ordered`: `"decimal"`	Marcador que va delante
`items`	Las tres listas	Lista (también un valor del State)	Ninguno	Pasa los textos de los elementos de una vez, en lugar de hijos
`start`	`ordered`	Entero	`1`	Primer número
`reversed`	`ordered`	`True` / `False`	`False`	Cuenta los números al revés
`type`	`ordered`	`"1"` `"a"` `"A"` `"i"` `"I"`	Ninguno	Tipo de numeración HTML; normalmente se usa `list_style_type`

Forma del marcador

Las listas con viñetas aceptan valores CSS como "disc" (por defecto), "circle" y "square"; las numeradas, "decimal" (por defecto), "upper-roman" o "lower-alpha". unordered y ordered dejan un margen izquierdo de 1.5rem para que quepa el marcador.

disc
disc

circle
circle

square
square

upper-roman
upper-roman

lower-alpha
lower-alpha

rx.flex(
    rx.list.unordered(rx.list.item("disc"), rx.list.item("disc"), list_style_type="disc"),
    rx.list.unordered(rx.list.item("circle"), rx.list.item("circle"), list_style_type="circle"),
    rx.list.unordered(rx.list.item("square"), rx.list.item("square"), list_style_type="square"),
    rx.list.ordered(rx.list.item("upper-roman"), rx.list.item("upper-roman"), list_style_type="upper-roman"),
    rx.list.ordered(rx.list.item("lower-alpha"), rx.list.item("lower-alpha"), list_style_type="lower-alpha"),
    spacing="5",
    wrap="wrap",
)

Número inicial y cuenta atrás

start fija el primer número; sirve para continuar la numeración de una lista anterior. reversed=True cuenta hacia atrás desde el número más alto. Aunque el marcador sea una letra (upper-alpha), con start=3 empieza por la C.

Seven
Eight
Nine

Three
Two
One

Alpha
Bravo

rx.flex(
    rx.list.ordered(rx.list.item("Seven"), rx.list.item("Eight"), rx.list.item("Nine"), start=7),
    rx.list.ordered(rx.list.item("Three"), rx.list.item("Two"), rx.list.item("One"), reversed=True),
    rx.list.ordered(rx.list.item("Alpha"), rx.list.item("Bravo"), list_style_type="upper-alpha", start=3),
    spacing="6",
    wrap="wrap",
)

Lista sin marcadores

Con list_style_type="none" desaparecen viñetas y números. En la práctica equivale a rx.list(), que no lleva marcador, pero unordered y ordered conservan el margen izquierdo. La documentación oficial dice que las listas se basan en flex y heredan todas sus propiedades, pero en Reflex 0.10 son elementos HTML normales y solo tratan aparte algo como gap.

Example 1
Example 2
Example 3

Example 1
Example 2
Example 3

rx.hstack(
    rx.list(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
    ),
    rx.list.unordered(
        rx.list.item("Example 1"),
        rx.list.item("Example 2"),
        rx.list.item("Example 3"),
        list_style_type="none",
    ),
    spacing="6",
)

Lista con iconos

Si quitas el marcador y pones un icono delante de cada elemento, obtienes una lista de verificación. Los iconos dentro de rx.list.item reciben automáticamente display: inline para quedar en la misma línea que el texto.

Allowed
Not
Settings

rx.list(
    rx.list.item(rx.icon("circle_check_big", color="green"), " Allowed"),
    rx.list.item(rx.icon("octagon_x", color="red"), " Not"),
    rx.list.item(rx.icon("settings", color="grey"), " Settings"),
    list_style_type="none",
)

Dibujar una lista del State con items

En lugar de escribir los hijos uno a uno, puedes pasar una lista en items y se crea un rx.list.item por elemento. Si pasas un valor del State, por dentro se usa rx.foreach, así que la lista cambia cuando cambia el valor.

Buy milk
Walk the dog

class ListTodoState(rx.State):
    todos: list[str] = ["Buy milk", "Walk the dog"]
    new_todo: str = ""

    @rx.event
    def set_list_new_todo(self, value: str):
        self.new_todo = value

    @rx.event
    def add_list_todo(self):
        if self.new_todo.strip():
            self.todos = self.todos + [self.new_todo.strip()[:40]]
            self.new_todo = ""

    @rx.event
    def clear_list_todos(self):
        self.todos = []


rx.vstack(
    rx.hstack(
        rx.input(value=ListTodoState.new_todo, on_change=ListTodoState.set_list_new_todo, placeholder="New item"),
        rx.button("Add", on_click=ListTodoState.add_list_todo),
        rx.button("Clear", on_click=ListTodoState.clear_list_todos, variant="soft", color_scheme="gray"),
    ),
    rx.list.ordered(items=ListTodoState.todos),
)

Completar el pedido

Los ingredientes no tienen orden, así que van en lista con viñetas; la preparación sí lo tiene, así que va numerada.

Ingredients

2 eggs
200 g flour
1 cup milk

Steps

Whisk the eggs and milk.
Fold in the flour.
Cook on a hot pan.

rx.flex(
    rx.box(
        rx.text("Ingredients", weight="bold"),
        rx.list.unordered(
            rx.list.item("2 eggs"),
            rx.list.item("200 g flour"),
            rx.list.item("1 cup milk"),
        ),
    ),
    rx.box(
        rx.text("Steps", weight="bold"),
        rx.list.ordered(
            rx.list.item("Whisk the eggs and milk."),
            rx.list.item("Fold in the flour."),
            rx.list.item("Cook on a hot pan."),
        ),
    ),
    spacing="6",
    wrap="wrap",
)

Notas del taller

Lista sin orden: rx.list.unordered; lista ordenada: rx.list.ordered; elementos: rx.list.item.
list_style_type cambia el marcador; con "none" desaparece (es el valor por defecto de rx.list).
ordered tiene start (primer número) y reversed (al revés).
Con items=[…] o items=State.lista puedes pasar todos los elementos de una vez.

← Anterior

Visualización de datos · Callout

Visualización de datos · Data List

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