List

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.

Basic Usage

A simple list with avatars, song names, and action buttons, using the List and ListRow components.

  • Most played songs this week
  • Dio Lupa
    Remaining Reason
    Code Example
    Basic.vue

    Components

    The List components include the following:

    • List - Vertical layout for displaying rows of information.
    • ListRow - Horizontal row for list items.
    • ListColGrow - Makes a column fill remaining space in the row.
    • ListColWrap - Makes a column wrap to the next line in the row.

    List

    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 ListRow or other elements as children.

    ListRow

    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.

    ListColGrow

    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.

    ListColWrap

    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.

    Examples

    Grow Column

    A list where the middle column grows to fill available space using ListColGrow.

  • Most played songs this week
  • 01
    Dio Lupa
    Remaining Reason
    Code Example
    ColGrow.vue

    Wrapped Column

    A list where a column wraps to the next line using ListColWrap.

  • Most played songs this week
  • Dio Lupa
    Remaining Reason
    "Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
    Code Example
    ColWrap.vue