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
Pedido del taller
En una tarjeta de perfil, pon una línea fina de separación entre la parte del nombre y la de los datos de contacto.
rx.separator traza una línea fina entre contenidos para dividirlos en bloques. Es una separación visual y, si hace falta, también comunica a los lectores de pantalla que «aquí se divide». rx.divider es otro nombre del mismo componente, así que puedes usar cualquiera de los dos.
rx.flex(
rx.card("Section 1"),
rx.separator(),
rx.card("Section 2"),
spacing="4",
direction="column",
align="center",
)Para ver una línea vertical, pon orientation en vertical y el direction exterior en row. La longitud de la línea vertical se calcula a partir de la altura del padre (aquí, 10rem).
Prueba las propiedades
size
orientation
direction
color
rx.flex(
rx.card("Section 1"),
rx.separator(size="4", orientation="horizontal", color_scheme="gray"),
rx.card("Section 2"),
direction="column",
spacing="4",
align="center",
width="100%",
height="10rem",
)| Propiedad | Valores | Por defecto | Uso |
|---|---|---|---|
size | "1"(16px) "2"(32px) "3"(64px) "4"(100%) | "4" | Longitud de la línea |
orientation | "horizontal" "vertical" | "horizontal" | Línea horizontal o vertical |
color_scheme | Nombre de color Radix | "gray" | Color de la línea |
decorative | True / False | True | Con True es solo decorativa y queda fuera del árbol de accesibilidad. Si la separación tiene significado, False |
size y orientation admiten valores distintos según el ancho de pantalla con rx.breakpoints(...). En Radix Themes el tamaño por defecto es "1", pero el rx.separator de la versión 0.10 instalada fija "4" por defecto, de modo que, si no indicas nada, ocupa todo el padre.
size="4" ocupa todo el ancho del padre (o toda la altura, si es vertical). Dar "100%" al width o height de CSS tiene el mismo efecto, pero size funciona igual en cualquier dirección. De "1" a "3" son longitudes fijas.
rx.flex(
rx.separator(size="1"),
rx.separator(size="2"),
rx.separator(size="3"),
rx.separator(size="4"),
direction="column",
spacing="4",
width="100%",
)Con orientation="vertical" la línea es vertical. Para que una línea vertical se estire con size="4", el padre necesita una altura. Como en la documentación oficial, aquí se usa el nombre rx.divider.
rx.flex(
rx.card("Section 1"),
rx.divider(orientation="vertical", size="4"),
rx.card("Section 2"),
spacing="4",
width="100%",
height="10vh",
)Dentro de una misma línea, como entre los enlaces de un menú, lo adecuado es una línea vertical corta con size="1". Si das align="center" al Flex exterior, la línea queda a media altura del texto.
rx.flex(
rx.link("Home", href="#"),
rx.separator(orientation="vertical", size="1"),
rx.link("Blog", href="#"),
rx.separator(orientation="vertical", size="1"),
rx.link("About", href="#"),
spacing="3",
align="center",
)Una línea horizontal entre el nombre y los datos de contacto, con margin_y para dejar algo de aire arriba y abajo.
Jamie Kim
Potter
jamie@example.com
555-0100
rx.card(
rx.flex(
rx.avatar(fallback="JK"),
rx.box(rx.text("Jamie Kim", weight="bold"), rx.text("Potter", size="2", color="var(--gray-11)")),
spacing="3",
align="center",
),
rx.separator(margin_y="12px"),
rx.vstack(
rx.hstack(rx.icon("mail", size=16), rx.text("jamie@example.com", size="2"), align="center"),
rx.hstack(rx.icon("phone", size=16), rx.text("555-0100", size="2"), align="center"),
spacing="2",
),
width="260px",
)Notas del taller
rx.separator (= rx.divider) traza una línea entre contenidos.
size "1"~"4" = 16 · 32 · 64px · 100%. En 0.10, por defecto "4" (ocupa todo).
Con orientation="vertical" es vertical. Para estirarse, el padre necesita altura.
color_scheme para el color; decorative=False indica que la separación tiene significado.
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.