Lists
API
app-ui::list
Slots
| Name | Notes |
|---|---|
| Main | Contains the app-ui::list.item components to display in the list. |
actions |
Contains the app-ui::button components to display below the list items. |
heading |
Contains the text content for the list heading. |
subheading |
Contains the text content for the list subheading. |
app-ui::list.item
Attributes
| Name | Default | Options | Notes |
|---|---|---|---|
tag |
div |
a, button, div |
Defines the underlying HTML tag used, and thus the list item's capabilities. For example, only a list item may use the href attribute. |
Slots
| Name | Notes |
|---|---|
| Main | Contains the elements to display in the main part of the list item. |
end |
Contains the component to display at the end of the list item, often app-ui::avatar or app-ui::icon-button. |
start |
Contains the component to display at the start of the list item, often app-ui::avatar or app-ui::icon-button. |
app-ui::list.item.action
Attributes
| Name | Default | Options | Notes |
|---|---|---|---|
icon |
Any Blade icon component name | ||
label |
Used for accessibility. | ||
tag |
button |
a, button |
Defines the underlying HTML tag used, and thus the button's capabilities. For example, only a buttons may use the href attribute. |
app-ui::list.item.columns
Slots
| Name | Notes |
|---|---|
| Main | Contains the app-ui::list.item.columns.column components, which is displays horizontally on desktop and vertically on mobile. |
app-ui::list.item.columns.column
Attributes
| Name | Default | Options | Notes |
|---|---|---|---|
align |
left |
left, center, right |
Slots
| Name | Notes |
|---|---|
| Main | Contains the contents of this column. |
app-ui::list.item.detail
Attributes
| Name | Default | Options | Notes |
|---|---|---|---|
icon |
Any Blade icon component name | ||
variant |
primary, secondary |
Primary details are darker and larger than default. Secondary details are just darker. |
Slots
| Name | Notes |
|---|---|
| Main | Contains the text content for this detail. |