141 lines
4.2 KiB
Markdown
141 lines
4.2 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.link
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Link
|
|
|
|
Links are accessible elements used primarily for navigation. Use the `href` prop to specify the location for the link to navigate to.
|
|
|
|
```python demo
|
|
rx.link("Reflex Home Page.", href="https://reflex.dev")
|
|
```
|
|
|
|
You can also provide local links to other pages in your project without writing the full url.
|
|
|
|
```python demo
|
|
rx.link("Example", href="/docs/library",)
|
|
```
|
|
|
|
The `link` component can be used to wrap other components to make them link to other pages.
|
|
|
|
```python demo
|
|
rx.link(rx.button("Example"), href="https://reflex.dev")
|
|
```
|
|
|
|
You can also create anchors to link to specific parts of a page using the `id` prop.
|
|
|
|
```python demo
|
|
rx.box("Example", id="example")
|
|
```
|
|
|
|
To reference an anchor, you can use the `href` prop of the `link` component. The `href` should be in the format of the page you want to link to followed by a # and the id of the anchor.
|
|
|
|
```python demo
|
|
rx.link("Example", href="/docs/library/typography/link#example")
|
|
```
|
|
|
|
# Style
|
|
|
|
## Size
|
|
|
|
Use the `size` prop to control the size of the link. 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.link("The quick brown fox jumps over the lazy dog.", size="1"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", size="2"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", size="3"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", size="4"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", size="5"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", size="6"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", size="7"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", size="8"),
|
|
rx.link("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.link("The quick brown fox jumps over the lazy dog.", weight="light"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", weight="regular"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", weight="medium"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", weight="bold"),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|
|
|
|
## Trim
|
|
|
|
Use the `trim` prop to trim the leading space at the start, end, or both sides of the rendered text.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.link("Without Trim",
|
|
trim="normal",
|
|
style={"background": "var(--gray-a2)",
|
|
"border_top": "1px dashed var(--gray-a7)",
|
|
"border_bottom": "1px dashed var(--gray-a7)",}
|
|
),
|
|
rx.link("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",
|
|
)
|
|
```
|
|
|
|
## Underline
|
|
|
|
Use the `underline` prop to manage the visibility of the underline affordance. It defaults to `auto`.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.link("The quick brown fox jumps over the lazy dog.", underline="auto"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", underline="hover"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", underline="always"),
|
|
direction="column",
|
|
spacing="3",
|
|
)
|
|
```
|
|
|
|
## Color
|
|
|
|
Use the `color_scheme` prop to assign a specific color, ignoring the global theme.
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.link("The quick brown fox jumps over the lazy dog.", color_scheme="indigo"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", color_scheme="cyan"),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", color_scheme="crimson"),
|
|
rx.link("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.link("The quick brown fox jumps over the lazy dog."),
|
|
rx.link("The quick brown fox jumps over the lazy dog.", high_contrast=True),
|
|
direction="column",
|
|
)
|
|
```
|