63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.themes.list_item
|
|
- rx.radix.themes.ordered_list
|
|
- rx.radix.themes.unordered_list
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# List
|
|
|
|
A `list` is a component that is used to display a list of items, stacked vertically by default. A `list` which can be either `ordered` or `unordered`. It is based on the `flex` component and therefore inherits all of its props.
|
|
|
|
An `unordered_list` has bullet points to display the list items. The `list_item` component
|
|
|
|
```python demo
|
|
rx.unordered_list(
|
|
rx.list_item("Example 1"),
|
|
rx.list_item("Example 2"),
|
|
rx.list_item("Example 3"),
|
|
)
|
|
```
|
|
|
|
An `ordered_list` has numbers to display the list items.
|
|
|
|
```python demo
|
|
rx.ordered_list(
|
|
rx.list_item("Example 1"),
|
|
rx.list_item("Example 2"),
|
|
rx.list_item("Example 3"),
|
|
)
|
|
```
|
|
|
|
An `unordered_list` or an `ordered_list` can have no bullet points or numbers by setting the `list_style_type` prop to `none`.
|
|
|
|
```python demo
|
|
rx.unordered_list(
|
|
rx.list_item("Example 1"),
|
|
rx.list_item("Example 2"),
|
|
rx.list_item("Example 3"),
|
|
list_style_type="none",
|
|
)
|
|
```
|
|
|
|
Lists can also be used with icons.
|
|
|
|
```python demo
|
|
rx.unordered_list(
|
|
rx.list_item(
|
|
rx.icon("check_circle", color="green", style={"display": "inline"}), "Allowed",
|
|
),
|
|
rx.list_item(
|
|
rx.icon("x-octagon", color="red", style={"display": "inline"}), "Not",
|
|
),
|
|
rx.list_item(
|
|
rx.icon("settings", color="grey", style={"display": "inline"}), "Settings"
|
|
),
|
|
list_style_type="none",
|
|
)
|
|
```
|