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
·
Em
·
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
Los 100 componentes de la biblioteca oficial de Reflex, uno por página. Una guía práctica: cambia las propiedades y verás cambiar a la vez la pantalla y el código Python.
Badge
Avatar
Icon
Callout
List
Data List
Code Block
Progress
Spinner
Scroll Area
Moment
La biblioteca oficial de Reflex reúne 100 componentes, desde botones hasta gráficos, tablas de datos y cuadros de diálogo. Este curso es una guía de esos 100 componentes, uno por página.
Desde hoy eres aprendiz en el taller de componentes. Al taller llegan encargos de piezas de interfaz, y cada página lleva un pedido. Cuando hayas aprendido el componente, podrás fabricar tú mismo la pieza que pide.
100 parts, one page each
rx.card(
rx.flex(
rx.avatar(fallback="RX", color_scheme="indigo"),
rx.box(
rx.heading("Component Workshop", size="3"),
rx.text("100 parts, one page each", size="2", color_scheme="gray"),
),
rx.spacer(),
rx.button(rx.icon("hammer"), "Start", size="2"),
spacing="3",
align="center",
),
width="100%",
)rx. que trata la página y el enlace a la documentación oficial.Pedido del taller
Por ejemplo: «Un botón de compra bien visible en la pantalla de pago y otro de cancelar, más discreto». Cada página lleva un encargo así.
| Estante | N.º | Qué contiene |
|---|---|---|
| Diseño | 13 | Box, Flex, Stack, Grid, Container, Card … el esqueleto de la pantalla |
| Tipografía | 10 | Text, Heading, Link, Code, Markdown … el texto |
| Formularios | 10 | Button, Input, Checkbox, Select, Slider, Form, Upload … recoger datos |
| Visualización de datos | 11 | Badge, Avatar, Icon, Callout, Progress … mostrar información |
| Mostrar y ocultar | 3 | Tabs, Accordion, Segmented Control |
| Superposiciones | 9 | Tooltip, Popover, Dialog, Drawer, Dropdown Menu, Toast … lo que aparece por encima |
| Renderizado dinámico | 4 | Cond, Match, Foreach, Auto Scroll: pantallas distintas según el State |
| Multimedia | 3 | Image, Audio, Video |
| Tablas y cuadrículas de datos | 3 | Table, Data Table, Data Editor |
| Gráficos | 12 | Area, Bar, Line, Pie, Radar, Scatter, Sankey … (Recharts) |
| Piezas de gráficos | 7 | Axis, Grid, Tooltip, Legend, Label, Reference, Brush |
| Otras bibliotecas de gráficos | 2 | Plotly, Pyplot |
| Elementos HTML | 7 | Etiquetas HTML sin más, con rx.el |
| Otras herramientas | 6 | Theme, Skeleton, Clipboard, Html Embed, Script, Memo |
No hace falta leer en orden. Busca el componente que necesites en la lista de la izquierda y entra directamente. Si empiezas de cero, te recomendamos comenzar por Diseño y Formularios.
Notas del taller
Una página = un componente. Arriba, la pantalla real; abajo, su código.
Si cambias un valor en «Prueba las propiedades», el código cambia también. Copia tal cual la combinación que te guste.
Los ejemplos que necesitan State muestran también la clase State.
Recibe avisos de nuevas lecciones
Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.
R
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© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
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.