Menu
Documentation
v4.0.0-beta.4

List

<BaseList /> · A versatile list component.

View SourceOpen Issue
  • Finish project UX
  • Meet with Andy at 3:00pm
  • Get groceries for Anna
  • Pay water bill
vue
<template>
  <BaseList class="ps-4">
    <li>Finish project UX</li>
    <li>Meet with Andy at 3:00pm</li>
    <li>Get groceries for Anna</li>
    <li>Pay water bill</li>
  </BaseList>
</template>

Features

  • Native or child component
  • Supports ordered and numbered lists
  • Supports media elements

Anatomy

This component accepts a <li/> or a BaseListItem as a child. You can customize the list's visual style by using the available props.

vue
<template>
  <BaseList>
    <BaseListItem>
      <!-- Content goes here -->
    </BaseListItem>
  </BaseList>
</template>

API Reference

This component has props that you can use to modify its style and behavior.

List

Prop Type
ordered
default:false
boolean

If the list should be ordered.

media
default:-
boolean

Force the list to be media.

List Item

Prop Type
title
default:-
string

The title of the list item.

subtitle
default:-
string

The subtitle of the list item.

Slot Type
#default
{}
#title
{}
#subtitle
{}
#end
{}

Examples

Ordered

Use the ordered prop to set the list component to an ordered list.

  1. Finish project UX
  2. Meet with Andy at 3:00pm
  3. Get groceries for Anna
  4. Pay water bill
vue
<template>
  <BaseList ordered class="ps-4">
    <li>Finish project UX</li>
    <li>Meet with Andy at 3:00pm</li>
    <li>Get groceries for Anna</li>
    <li>Pay water bill</li>
  </BaseList>
</template>

Subtitle

Use the <ListItem /> component inside the list to add a subtitle.

  • Finish project UX

    Close resubing pending tasks

  • Meet with Andy at 3:00pm

    Meeting about next project steps

  • Get groceries for Anna

    In preparation of next Friday's party

  • Pay water bill

    Bill must be paid before next Tuesday

vue
<template>
  <BaseList>
    <BaseListItem
      title="Finish project UX"
      subtitle="Close resubing pending tasks"
    />
    <BaseListItem
      title="Meet with Andy at 3:00pm"
      subtitle="Meeting about next project steps"
    />
    <BaseListItem
      title="Get groceries for Anna"
      subtitle="In preparation of next Friday's party"
    />
    <BaseListItem
      title="Pay water bill"
      subtitle="Bill must be paid before next Tuesday"
    />
  </BaseList>
</template>

Icon

Use the <ListItem /> component default slot to display an icon.

  • Finish project UX

    Close resubing pending tasks

  • Meet with Andy at 3:00pm

    Meeting about next project steps

  • Get groceries for Anna

    In preparation of next Friday's party

  • Pay power bill

    Bill must be paid before next Tuesday

vue
<template>
  <BaseList>
    <BaseListItem
      title="Finish project UX"
      subtitle="Close resubing pending tasks"
    >
      <Icon
        name="solar:document-add-linear"
        class="text-2xl text-muted-400 dark:text-muted-500"
      />
    </BaseListItem>
    <BaseListItem
      title="Meet with Andy at 3:00pm"
      subtitle="Meeting about next project steps"
    >
      <Icon name="solar:map-point-linear" class="text-2xl text-muted-400 dark:text-muted-500" />
    </BaseListItem>
    <BaseListItem
      title="Get groceries for Anna"
      subtitle="In preparation of next Friday's party"
    >
      <Icon name="solar:cart-3-linear" class="text-2xl text-muted-400 dark:text-muted-500" />
    </BaseListItem>
    <BaseListItem
      title="Pay power bill"
      subtitle="Bill must be paid before next Tuesday"
    >
      <Icon name="solar:bolt-linear" class="text-2xl text-muted-400 dark:text-muted-500" />
    </BaseListItem>
  </BaseList>
</template>

Avatar

Use the <ListItem /> component default slot to display an avatar.

  • ?
    Finish project UX

    Close resubing pending tasks

  • ?
    Meet with Andy at 3:00pm

    Meeting about next project steps

  • ?
    Get groceries for Anna

    In preparation of next Friday's party

  • ?
    Pay water bill

    Bill must be paid before next Tuesday

vue
<template>
  <BaseList>
    <BaseListItem
      title="Finish project UX"
      subtitle="Close resubing pending tasks"
    >
      <BaseAvatar src="/img/people/44.jpg" />
    </BaseListItem>
    <BaseListItem
      title="Meet with Andy at 3:00pm"
      subtitle="Meeting about next project steps"
    >
      <BaseAvatar src="/img/people/19.jpg" />
    </BaseListItem>
    <BaseListItem
      title="Get groceries for Anna"
      subtitle="In preparation of next Friday's party"
    >
      <BaseAvatar src="/img/people/17.jpg" />
    </BaseListItem>
    <BaseListItem
      title="Pay water bill"
      subtitle="Bill must be paid before next Tuesday"
    >
      <BaseAvatar src="/img/people/51.jpg" />
    </BaseListItem>
  </BaseList>
</template>

Link

Message