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

Formularios

Text Area

rx.text_area

Documentación oficial

Pedido del taller

Añade a la pantalla de detalle del pedido una casilla para escribir una reseña. Hasta 200 caracteres, con el número de caracteres restantes a la vista y la posibilidad de publicarla directamente con Enter.

rx.text_area es una casilla para escribir varias líneas. Se usa para textos que pueden llevar saltos de línea, como comentarios, consultas o notas. Se usa casi igual que rx.input y añade el número de líneas (rows), el ajuste de tamaño (resize) y la altura automática (auto_height).

rx.text_area(placeholder="Type here...")

Prueba las propiedades

Activa auto_height y escribe varias líneas: la casilla crece con el texto. resize indica en qué dirección puede el usuario cambiar el tamaño con el tirador de la esquina inferior derecha.

Prueba las propiedades

placeholder

rows

resize

variant

size

color

radius

auto_height

disabled

rx.text_area(placeholder="Write a comment...", rows="3", resize="vertical", variant="surface", size="2", color_scheme="indigo", radius="medium", auto_height=False, disabled=False)

rows es el número de líneas visibles al principio; resize, la dirección en la que el usuario puede agrandarla. variant · size · radius funcionan igual que en Input.

Propiedad	Valores	Por defecto	Uso
`placeholder`	Cadena	Ninguno	Texto de ayuda que se ve cuando está vacía
`value` / `default_value`	Cadena	Ninguno	Valor controlado / valor que se pone solo al principio
`rows`, `cols`	Número como cadena	Valor del navegador	Líneas visibles al principio, ancho en caracteres
`resize`	`"none"` `"vertical"` `"horizontal"` `"both"`	Valor del tema	Dirección en la que el usuario puede cambiar el tamaño
`auto_height`	`True` / `False`	`False`	Aumenta la altura según la longitud del texto (junto con `min_height`)
`enter_key_submit`	`True` / `False` / Var	`False`	Enter envía el formulario; Shift+Enter hace un salto de línea
`variant`, `size`, `color_scheme`, `radius`	Igual que Input		Aspecto
`name`, `required`, `max_length`, `min_length`		Ninguno	Nombre para el envío y comprobaciones del navegador
`disabled`, `read_only`, `auto_focus`	`True` / `False`	`False`	Bloquear, solo lectura, foco automático
`on_change`, `on_blur`	Evento		Al cambiar el valor / al perder el foco. Pasa el valor
`on_key_down`, `on_key_up`	Evento		Al pulsar / soltar una tecla

Lo básico: recibir el valor con on_blur

Igual que en Input, on_blur pasa una vez lo escrito hasta ese momento cuando sales de la casilla. Si das value y on_change a la vez, es una entrada controlada, y también aquí se añade el debounce automáticamente.

Hello World!

class TextAreaBlurState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, text: str):
        self.text = text


rx.vstack(
    rx.heading(TextAreaBlurState.text, size="4"),
    rx.text_area(placeholder="Type, then click outside", on_blur=TextAreaBlurState.set_text),
    width="100%",
)

Dentro de un formulario

En los datos del formulario, name es la clave. Abajo está el formulario de opiniones de la documentación oficial. El State guarda el contenido de la casilla con value + on_change y, al enviarlo, rx.cond lo sustituye por una tarjeta de agradecimiento. Como lleva required=True, no se puede enviar vacío.

class TextAreaFeedbackState(rx.State):
    feedback: str = ""
    submitted: bool = False

    @rx.event
    def set_feedback(self, value: str):
        self.feedback = value

    @rx.event
    def submit_feedback(self, form_data: dict):
        self.submitted = True

    @rx.event
    def reset_form(self):
        self.feedback = ""
        self.submitted = False


rx.cond(
    TextAreaFeedbackState.submitted,
    rx.card(
        rx.vstack(
            rx.text("Thank you! You wrote:"),
            rx.blockquote(TextAreaFeedbackState.feedback),
            rx.button("Submit another response", on_click=TextAreaFeedbackState.reset_form),
        ),
    ),
    rx.card(
        rx.form(
            rx.flex(
                rx.text("Are you enjoying Reflex?"),
                rx.text_area(
                    name="feedback",
                    placeholder="Write your feedback...",
                    value=TextAreaFeedbackState.feedback,
                    on_change=TextAreaFeedbackState.set_feedback,
                    resize="vertical",
                    required=True,
                ),
                rx.button("Send", type="submit"),
                direction="column",
                spacing="3",
            ),
            on_submit=TextAreaFeedbackState.submit_feedback,
        ),
    ),
)

Enviar con Enter

En una casilla de varias líneas, Enter normalmente hace un salto de línea. Con enter_key_submit=True, Enter envía el formulario que la contiene y Shift+Enter pasa a hacer el salto de línea. Esta propiedad también acepta un Var, así que se puede activar y desactivar con un interruptor como abajo. Para desactivarla mientras se procesa algo, escribe enter_key_submit=~State.is_loading.

enter_key_submit usa su propio gestor de teclas, así que no se puede combinar con on_key_down (si los pasas juntos, da ValueError). Además, un handler de on_key_down en Python solo recibe el nombre de la tecla y no puede impedir el salto de línea. Si necesitas ambas cosas, hace falta lógica del lado del navegador, como rx.call_script.

Enter submits

Nothing submitted yet.

class TextAreaEnterState(rx.State):
    submitted_text: str = ""
    enter_submits: bool = True

    @rx.event
    def handle_submit(self, form_data: dict):
        self.submitted_text = form_data.get("message", "")

    @rx.event
    def set_enter_submits(self, value: bool):
        self.enter_submits = value


rx.vstack(
    rx.hstack(
        rx.switch(checked=TextAreaEnterState.enter_submits, on_change=TextAreaEnterState.set_enter_submits),
        rx.text("Enter submits", size="2"),
        align="center",
    ),
    rx.form(
        rx.text_area(
            name="message",
            placeholder="Type and press Enter (Shift+Enter for a new line)",
            enter_key_submit=TextAreaEnterState.enter_submits,
        ),
        on_submit=TextAreaEnterState.handle_submit,
        reset_on_submit=True,
        width="100%",
    ),
    rx.cond(
        TextAreaEnterState.submitted_text != "",
        rx.text("Submitted: ", rx.code(TextAreaEnterState.submitted_text)),
        rx.text("Nothing submitted yet.", color_scheme="gray"),
    ),
    width="100%",
)

Altura automática

Con auto_height=True, en lugar de desplazarse dentro de la casilla, la casilla crece con el texto. Si añades rows="1" y min_height="0", empieza con una línea y va creciendo. Para que no crezca demasiado, pon max_height. La de abajo se detiene en 160px.

rx.text_area(
    placeholder="Type a few lines - the box grows to fit",
    auto_height=True,
    rows="1",
    min_height="0",
    max_height="160px",
    width="100%",
)

Completar el pedido

El State guarda el texto con value + on_change y la variable calculada left muestra los caracteres restantes. La longitud la limita el navegador con max_length y, una vez más, el servidor con [:200]. Al guardar se usa el valor de form_data, para no perder caracteres que por el debounce aún no hayan llegado al State. Crece con auto_height y se publica al pulsar Enter gracias a enter_key_submit.

class TextAreaReviewState(rx.State):
    review: str = ""
    saved: str = ""

    @rx.event
    def set_review(self, value: str):
        self.review = value[:200]

    @rx.event
    def save(self, form_data: dict):
        self.saved = form_data.get("review", "")[:200]
        self.review = ""

    @rx.var
    def left(self) -> int:
        return 200 - len(self.review)


rx.form(
    rx.vstack(
        rx.text_area(
            name="review",
            placeholder="How was your order?",
            value=TextAreaReviewState.review,
            on_change=TextAreaReviewState.set_review,
            max_length=200,
            auto_height=True,
            rows="2",
            min_height="0",
            enter_key_submit=True,
            width="100%",
        ),
        rx.hstack(
            rx.text(TextAreaReviewState.left, " characters left", size="1", color_scheme="gray"),
            rx.spacer(),
            rx.button("Post review", type="submit", disabled=TextAreaReviewState.review == ""),
            width="100%",
            align="center",
        ),
        rx.cond(TextAreaReviewState.saved != "", rx.callout(TextAreaReviewState.saved, icon="message-square")),
        width="100%",
    ),
    on_submit=TextAreaReviewState.save,
    width="100%",
    max_width="460px",
)

Notas del taller

rx.text_area es una entrada de varias líneas. Se usa igual que rx.input (on_blur, value + on_change).
rows fija las líneas iniciales; resize, la dirección en la que el usuario puede agrandarla.
Con auto_height=True + rows="1" + min_height="0", crece con el texto. El límite lo pone max_height.
Con enter_key_submit=True, Enter envía el formulario y Shift+Enter hace un salto de línea. No se combina con on_key_down.
En un formulario, name es la clave, y el navegador comprueba required · max_length.

← Anterior

Formularios · Input

Formularios · Checkbox

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