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.text.kbdDocumentación oficial
Pedido del taller
En la ventana de ayuda de la app de notas, haz una tabla de atajos con el nombre de cada función junto a su atajo de teclado.
rx.text.kbd muestra teclas o atajos de teclado con forma de tecla. Se convierte en la etiqueta HTML <kbd>. Se usa en ayudas, guías de atajos o tutoriales, en sitios como «pulsa esta tecla».
rx.text.kbd("Shift + Tab")La única propiedad de aspecto de Kbd es size. Cambia el texto para escribir otras teclas.
Prueba las propiedades
label
size
rx.text.kbd("Ctrl + K", size="3")| Propiedad | Valores | Por defecto | Uso |
|---|---|---|---|
| hijo | cadena, valor del State | obligatorio | Nombre de la tecla |
size | "1" ~ "9" | heredado | Tamaño de la tecla y del texto |
A diferencia de Text o Heading, el tipo de Kbd en 0.10 no admite en size valores por ancho de pantalla (dict). En cuanto a eventos, solo tiene los básicos.
size va de "1" a "9". Cuanto mayor es, más se reducen en proporción el interlineado y el espaciado. Si no se indica, toma el tamaño del texto que lo rodea.
rx.flex(
rx.text.kbd("Shift + Tab", size="1"),
rx.text.kbd("Shift + Tab", size="3"),
rx.text.kbd("Shift + Tab", size="5"),
rx.text.kbd("Shift + Tab", size="7"),
rx.text.kbd("Shift + Tab", size="9"),
direction="column",
align="start",
spacing="3",
)Si lo pones como hijo dentro de un rx.text, la tecla aparece en mitad de la frase. Puedes envolver cada tecla por separado o la combinación entera de una vez.
Press Ctrl + S to save.
Undo with Ctrl + Z, redo with Ctrl + Y.
rx.flex(
rx.text("Press ", rx.text.kbd("Ctrl"), " + ", rx.text.kbd("S"), " to save.", size="3"),
rx.text("Undo with ", rx.text.kbd("Ctrl + Z"), ", redo with ", rx.text.kbd("Ctrl + Y"), ".", size="2", color_scheme="gray"),
direction="column",
spacing="3",
)El on_key_down de un campo de texto pasa el nombre de la tecla pulsada y si se pulsaron a la vez Ctrl, Alt, Shift o Meta. Guardamos esos valores en el State y los mostramos con rx.text.kbd. Haz clic en el campo y prueba, por ejemplo, Shift+K o Alt+1.
class KbdKeyState(rx.State):
key: str = "?"
mods: list[str] = []
@rx.event
def press(self, key: str, info: rx.event.KeyInputInfo):
names = {"ctrl_key": "Control", "alt_key": "Alt", "shift_key": "Shift", "meta_key": "Meta"}
self.mods = [name for flag, name in names.items() if info.get(flag) and name != key]
self.key = "Space" if key == " " else key
rx.flex(
rx.input(placeholder="Click here and press any keys", on_key_down=KbdKeyState.press, width="260px"),
rx.flex(
rx.foreach(KbdKeyState.mods, lambda m: rx.fragment(rx.text.kbd(m, size="4"), rx.text("+", size="4"))),
rx.text.kbd(KbdKeyState.key, size="4"),
spacing="2",
align="center",
),
direction="column",
align="start",
spacing="3",
)Repartimos el nombre de la función y el atajo en dos celdas de un rx.table y envolvemos solo la celda del atajo en rx.text.kbd.
rx.table.root(
rx.table.body(
rx.table.row(rx.table.cell("Save"), rx.table.cell(rx.text.kbd("Ctrl + S"))),
rx.table.row(rx.table.cell("Search"), rx.table.cell(rx.text.kbd("Ctrl + K"))),
rx.table.row(rx.table.cell("New note"), rx.table.cell(rx.text.kbd("Ctrl + N"))),
rx.table.row(rx.table.cell("Close"), rx.table.cell(rx.text.kbd("Esc"))),
),
size="1",
max_width="320px",
)Notas del taller
rx.text.kbd("…") es el nombre de una tecla con forma de tecla (<kbd>).
Su única propiedad de aspecto es size "1"~"9". Si no se indica, sigue el tamaño del texto exterior.
Va como hijo dentro de una frase: cada tecla aparte o la combinación entera de una vez.
Con on_key_down(key, info) puedes recibir la tecla pulsada y mostrarla a través del 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.