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
rx.sectionDocumentación oficial
Pedido del taller
Divide la página de presentación en bloques como «Funciones» y «Precios», y da a cada bloque un margen generoso arriba y abajo.
rx.section representa una sección del contenido de la página. Se dibuja como el elemento HTML <section> y lleva por defecto relleno interior arriba y abajo. Ante todo es un componente semántico: sirve para agrupar contenido relacionado, como un título y el texto que lo acompaña.
This is the first content section
This is the second content section
rx.box(
rx.section(
rx.heading("First", as_="h2", size="4"),
rx.text("This is the first content section"),
padding_x="12px",
background_color="var(--gray-2)",
),
rx.section(
rx.heading("Second", as_="h2", size="4"),
rx.text("This is the second content section"),
padding_x="12px",
background_color="var(--gray-3)",
),
width="100%",
)Section tiene una sola propiedad, size, que fija el tamaño del margen superior e inferior. Fíjate en cómo cambia el espacio entre las líneas discontinuas.
Prueba las propiedades
Vertical padding comes from the size prop.
size
rx.box(
rx.section(
rx.heading("Features", as_="h2", size="4"),
rx.text("Vertical padding comes from the size prop."),
size="2",
padding_x="12px",
background_color="var(--accent-2)",
border_top="1px dashed var(--accent-8)",
border_bottom="1px dashed var(--accent-8)",
),
width="100%",
)| Propiedad | Valores | Por defecto | Uso |
|---|---|---|---|
size | "1"(24px) "2"(40px) "3"(64px) | "2" | Relleno interior superior e inferior |
padding_x y otras CSS | Longitud CSS | Ninguno | Por defecto no hay margen lateral |
size admite valores distintos según el ancho de pantalla con rx.breakpoints(...). Radix Themes también tiene size="4" (80px), pero el rx.section de la versión 0.10 instalada solo acepta de "1" a "3".
Tres Section que solo se diferencian en el tamaño, una al lado de otra. El texto es el mismo; solo cambia el margen superior e inferior.
size 1
size 2
size 3
rx.flex(
rx.section(rx.text("size 1"), size="1", padding_x="12px", background_color="var(--gray-3)"),
rx.section(rx.text("size 2"), size="2", padding_x="12px", background_color="var(--gray-4)"),
rx.section(rx.text("size 3"), size="3", padding_x="12px", background_color="var(--gray-5)"),
spacing="3",
align="start",
width="100%",
)Para reducir el margen en el móvil y ampliarlo en pantallas anchas, pasa rx.breakpoints a size.
Small padding on phones, more on wide screens
rx.section(
rx.text("Small padding on phones, more on wide screens"),
size=rx.breakpoints(initial="1", md="3"),
padding_x="12px",
background_color="var(--gray-3)",
width="100%",
)rx.box es un <div> sin significado; rx.section es un <section> que significa «aquí empieza una sección». Los lectores de pantalla y los buscadores leen esa diferencia como la estructura del documento. Si pones a cada sección un título con rx.heading, la estructura queda aún más clara. Una organización habitual es limitar el ancho de la página con rx.container y dividir su interior en Section.
Un Container limita el ancho del cuerpo, y «Funciones» y «Precios» van cada uno en su Section. El rx.separator() intermedio marca el límite entre secciones.
Pure Python, from the front end to the back end.
Free to start. Pay when your app grows.
rx.container(
rx.section(
rx.heading("Features", as_="h2", size="5"),
rx.text("Pure Python, from the front end to the back end."),
size="2",
),
rx.separator(),
rx.section(
rx.heading("Pricing", as_="h2", size="5"),
rx.text("Free to start. Pay when your app grows."),
size="2",
),
size="2",
width="100%",
)Notas del taller
rx.section es el elemento <section>: un componente semántico que agrupa contenido relacionado en una sección.
size "1"~"3" da 24 · 40 · 64px de margen arriba y abajo. Por defecto, "2".
No hay margen lateral: dalo aparte con padding_x.
Pon a cada sección un título con rx.heading.
Limita el ancho con rx.container y divide su interior con rx.section.
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.