List is a vertical layout component for displaying information in rows. It provides a flexible structure for content, with modifiers for wrapping and growing columns inside rows.
A simple list with avatars, song names, and action buttons, using the List and ListRow components.
The List components include the following:
The List component is a vertical flex layout container for displaying content in rows. Use ListRow as direct children for each row of data.
| List Slots | Description |
|---|---|
default | The default slot. Place |
The ListRow component is a horizontal grid layout for displaying data in a row. Use it inside List.
| ListRow Slots | Description |
|---|---|
default | The default slot. Place columns, images, buttons, or modifiers as children. |
The ListColGrow component is a modifier for use inside ListRow to make a column grow and fill remaining horizontal space.
| ListColGrow Slots | Description |
|---|---|
default | The default slot. Place content to grow here. |
The ListColWrap component is a modifier for use inside ListRow to make a column wrap to the next line.
| ListColWrap Slots | Description |
|---|---|
default | The default slot. Place content to wrap here. |
A list where the middle column grows to fill available space using ListColGrow.
A list where a column wraps to the next line using ListColWrap.