153 lines
4.9 KiB
Markdown
153 lines
4.9 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.heading
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Heading
|
|
|
|
```python demo
|
|
rx.heading("The quick brown fox jumps over the lazy dog.")
|
|
```
|
|
|
|
## As another element
|
|
|
|
Use the `as_` prop to change the heading level. This prop is purely semantic and does not change the visual appearance.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.heading("Level 1", as_="h1"),
|
|
rx.heading("Level 2", as_="h2"),
|
|
rx.heading("Level 3", as_="h3"),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|
|
|
|
## Size
|
|
|
|
Use the `size` prop to control the size of the heading. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="1"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="2"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="3"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="4"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="5"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="6"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="7"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="8"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", size="9"),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|
|
|
|
## Weight
|
|
|
|
Use the `weight` prop to set the text weight.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", weight="light"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", weight="regular"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", weight="medium"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", weight="bold"),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|
|
|
|
## Align
|
|
|
|
Use the `align` prop to set text alignment.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.heading("Left-aligned", align="left"),
|
|
rx.heading("Center-aligned", align="center"),
|
|
rx.heading("Right-aligned", align="right"),
|
|
direction="column",
|
|
spacing="3",
|
|
width="100%",
|
|
)
|
|
```
|
|
|
|
## Trim
|
|
|
|
Use the `trim` prop to trim the leading space at the start, end, or both sides of the text.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.heading("Without Trim",
|
|
trim="normal",
|
|
style={"background": "var(--gray-a2)",
|
|
"border_top": "1px dashed var(--gray-a7)",
|
|
"border_bottom": "1px dashed var(--gray-a7)",}
|
|
),
|
|
rx.heading("With Trim",
|
|
trim="both",
|
|
style={"background": "var(--gray-a2)",
|
|
"border_top": "1px dashed var(--gray-a7)",
|
|
"border_bottom": "1px dashed var(--gray-a7)",}
|
|
),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|
|
|
|
Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.box(
|
|
rx.heading("Without trim", margin_bottom="4px", size="3",),
|
|
rx.text("The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant."),
|
|
style={"background": "var(--gray-a2)",
|
|
"border": "1px dashed var(--gray-a7)",},
|
|
padding="16px",
|
|
),
|
|
rx.box(
|
|
rx.heading("With trim", margin_bottom="4px", size="3", trim="start"),
|
|
rx.text("The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant."),
|
|
style={"background": "var(--gray-a2)",
|
|
"border": "1px dashed var(--gray-a7)",},
|
|
padding="16px",
|
|
),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|
|
|
|
## Color
|
|
|
|
Use the `color_scheme` prop to assign a specific color, ignoring the global theme.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="indigo"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="cyan"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="crimson"),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="orange"),
|
|
direction="column",
|
|
)
|
|
```
|
|
|
|
## High Contrast
|
|
|
|
Use the `high_contrast` prop to increase color contrast with the background.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="indigo", high_contrast=True),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="cyan", high_contrast=True),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="crimson", high_contrast=True),
|
|
rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="orange", high_contrast=True),
|
|
direction="column",
|
|
)
|
|
```
|