69 lines
1.6 KiB
Markdown
69 lines
1.6 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.List
|
|
- rx.chakra.ListItem
|
|
- rx.chakra.UnorderedList
|
|
- rx.chakra.OrderedList
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# List
|
|
|
|
There are three types of lists: regular lists, ordered, unordered.
|
|
|
|
The shorthand syntax used to create a list is by passing in a list of items.
|
|
These items can be components or Python primitives.
|
|
|
|
```python demo
|
|
rx.chakra.list(
|
|
items=["Example 1", "Example 2", "Example 3"],
|
|
spacing=".25em"
|
|
)
|
|
```
|
|
|
|
The examples below have the explicit syntax of list and list_items.
|
|
Regular lists are used to display a list of items.
|
|
They have no bullet points or numbers and stack the list items vertically.
|
|
|
|
```python demo
|
|
rx.chakra.list(
|
|
rx.chakra.list_item("Example 1"),
|
|
rx.chakra.list_item("Example 2"),
|
|
rx.chakra.list_item("Example 3"),
|
|
)
|
|
```
|
|
|
|
Unordered have bullet points to display the list items.
|
|
|
|
```python demo
|
|
rx.chakra.unordered_list(
|
|
rx.chakra.list_item("Example 1"),
|
|
rx.chakra.list_item("Example 2"),
|
|
rx.chakra.list_item("Example 3"),
|
|
)
|
|
```
|
|
|
|
Ordered lists have numbers to display the list items.
|
|
|
|
```python demo
|
|
rx.chakra.ordered_list(
|
|
rx.chakra.list_item("Example 1"),
|
|
rx.chakra.list_item("Example 2"),
|
|
rx.chakra.list_item("Example 3"),
|
|
)
|
|
```
|
|
|
|
Lists can also be used with icons.
|
|
|
|
```python demo
|
|
rx.chakra.list(
|
|
rx.chakra.list_item(rx.chakra.icon(tag="check_circle", color = "green"), "Allowed"),
|
|
rx.chakra.list_item(rx.chakra.icon(tag="not_allowed", color = "red"), "Not"),
|
|
rx.chakra.list_item(rx.chakra.icon(tag="settings", color = "grey"), "Settings"),
|
|
spacing = ".25em"
|
|
)
|
|
```
|