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

Tipografía

Blockquote

rx.blockquote

Documentación oficial

Pedido del taller

En la portada de la tienda, muestra en grande una reseña de cliente como cita, con un botón para pasar a la siguiente.

rx.blockquote es un párrafo de cita que muestra aparte las palabras o el texto de otra persona. Se convierte en <blockquote> y lleva una barra vertical a la izquierda que lo separa del cuerpo del texto. Se usa para citar un bloque entero: reseñas, frases célebres o extractos de documentos.

Perfect typography is certainly the most elusive of all arts.

rx.blockquote("Perfect typography is certainly the most elusive of all arts.")

Prueba las propiedades

Puedes cambiar el tamaño, el grosor y el color. El color se aplica a la vez al texto y a la barra de la izquierda.

Prueba las propiedades

Perfect typography is certainly the most elusive of all arts.

label

size

weight

color

high_contrast

rx.blockquote("Perfect typography is certainly the most elusive of all arts.", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

Al aumentar size, el interlineado y el espaciado se ajustan también. high_contrast oscurece el texto.

Propiedad	Valores	Por defecto	Uso
`size`	`"1"` ~ `"9"`	heredado	Tamaño de letra, interlineado y espaciado entre letras
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	heredado	Grosor
`color_scheme`	nombre de color Radix	color del tema	Color del texto y de la barra
`high_contrast`	`True` / `False`	`False`	Oscurece el texto
`cite`	cadena con la dirección	ninguno	Dirección de la fuente citada (no se ve en pantalla)

En cuanto a eventos, solo tiene los básicos.

Tamaño y grosor

size va de "1" a "9". Cuanto mayor es, más se reducen en proporción el interlineado y el espaciado, así que incluso una cita grande se ve compacta.

Perfect typography is an elusive art.

rx.flex(
    rx.blockquote("Perfect typography is an elusive art.", size="1"),
    rx.blockquote("Perfect typography is an elusive art.", size="3"),
    rx.blockquote("Perfect typography is an elusive art.", size="5"),
    rx.blockquote("Perfect typography is an elusive art.", size="7"),
    rx.separator(),
    rx.blockquote("Perfect typography is an elusive art.", weight="light"),
    rx.blockquote("Perfect typography is an elusive art.", weight="regular"),
    rx.blockquote("Perfect typography is an elusive art.", weight="medium"),
    rx.blockquote("Perfect typography is an elusive art.", weight="bold"),
    direction="column",
    spacing="3",
)

Color y contraste

Con color_scheme usas un color distinto al del tema, y con high_contrast=True, un texto más oscuro. A la izquierda, el normal; a la derecha, el de alto contraste.

Good design is honest.

rx.grid(
    rx.blockquote("Good design is honest.", color_scheme="indigo"),
    rx.blockquote("Good design is honest.", color_scheme="indigo", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="cyan"),
    rx.blockquote("Good design is honest.", color_scheme="cyan", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="crimson"),
    rx.blockquote("Good design is honest.", color_scheme="crimson", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="orange"),
    rx.blockquote("Good design is honest.", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="3",
)

Dejar constancia de la fuente: cite

En cite se escribe la dirección del texto citado. No aparece en la pantalla del navegador; queda solo como atributo HTML, para que los buscadores y las tecnologías de apoyo conozcan la fuente. Para mostrársela a las personas, añade aparte un rx.text, como abajo.

Less, but better.

Dieter Rams

rx.box(
    rx.blockquote(
        "Less, but better.",
        cite="https://en.wikipedia.org/wiki/Dieter_Rams",
        size="5",
    ),
    rx.text("Dieter Rams", size="2", color_scheme="gray", margin_top="6px", margin_left="16px"),
)

Blockquote y Quote

rx.blockquote es un párrafo independiente, y rx.text.quote es una cita corta dentro de una frase. Para cortar la frase y mostrar la cita aparte, usa Blockquote; para meterla dentro de la frase, Quote.

A blockquote is its own block, set apart from the paragraph.

A quote stays inside the sentence: short and inline, then the sentence goes on.

rx.flex(
    rx.blockquote("A blockquote is its own block, set apart from the paragraph."),
    rx.text(
        "A quote stays inside the sentence: ",
        rx.text.quote("short and inline"),
        ", then the sentence goes on.",
    ),
    direction="column",
    spacing="4",
)

Completar el pedido

Guardamos la lista de reseñas en el State y solo cambiamos el número que se muestra (index). Como la cita y el nombre son valores del State, cambian juntos cada vez que pulsas el botón.

Arrived in two days and fits perfectly.

Mina, Seoul

class BlockquoteReviewState(rx.State):
    reviews: list[dict[str, str]] = [
        {"text": "Arrived in two days and fits perfectly.", "name": "Mina, Seoul"},
        {"text": "The fabric feels even better than the photos.", "name": "Jun, Busan"},
        {"text": "Third order this year. Still happy.", "name": "Sora, Daegu"},
    ]
    index: int = 0

    @rx.event
    def next_review(self):
        self.index = (self.index + 1) % len(self.reviews)


rx.card(
    rx.blockquote(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["text"], size="4", color_scheme="indigo"),
    rx.flex(
        rx.text(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["name"], size="2", color_scheme="gray"),
        rx.spacer(),
        rx.button("Next review", rx.icon("arrow-right"), on_click=BlockquoteReviewState.next_review, size="1", variant="soft"),
        align="center",
        margin_top="12px",
        padding_left="16px",
    ),
    max_width="420px",
)

Notas del taller

rx.blockquote("…") es un párrafo de cita que se muestra aparte (<blockquote>).
El aspecto se fija con size "1"~"9", weight, color_scheme y high_contrast.
cite deja la dirección de la fuente solo en el HTML. La fuente visible, aparte con rx.text.
Para una cita corta dentro de una frase, rx.text.quote.

← Anterior

Tipografía · Markdown

Tipografía · Quote

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