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.
- Example 1
- Example 2
- Example 3
rc.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.
- Example 1
- Example 2
- Example 3
rc.list(
rc.list_item("Example 1"),
rc.list_item("Example 2"),
rc.list_item("Example 3"),
)
Unordered have bullet points to display the list items.
- Example 1
- Example 2
- Example 3
rc.unordered_list(
rc.list_item("Example 1"),
rc.list_item("Example 2"),
rc.list_item("Example 3"),
)
Ordered lists have numbers to display the list items.
- Example 1
- Example 2
- Example 3
rc.ordered_list(
rc.list_item("Example 1"),
rc.list_item("Example 2"),
rc.list_item("Example 3"),
)
Lists can also be used with icons.
- Allowed
- Not
- Settings
rc.list(
rc.list_item(
rc.icon(tag="check_circle", color="green"),
"Allowed",
),
rc.list_item(
rc.icon(tag="not_allowed", color="red"), "Not"
),
rc.list_item(
rc.icon(tag="settings", color="grey"), "Settings"
),
spacing=".25em",
)
rc.ListItem
A single list item.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.UnorderedList
An unordered list component with bullets.
Event Triggers
See the full list of default event triggersrc.OrderedList
An ordered list component with numbers.