get_app Download

List

Lists are continuous, vertical indexes of text or images

Basic

A basic list of items with title and subtitle.

One text
Another text
A little text
Some more text
Even more text
Another little text

A vs-list-header separator with custom color.

Group 1
Snickerdoodle
An excellent companion
Sapporo Haru
An excellent polish restaurant, quick delivery and hearty, filling meals
Group 2
Enid's
At night a bar, during the day a delicious brunch spot.
Veronika Ossi
Has not watched anything recently

Icon

The list items and the headers can have a icon as well.

TIP

Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

supervisor_account
Group 1
check
Snickerdoodle
An excellent companion
check
Sapporo Haru
An excellent polish restaurant, quick delivery and hearty, filling meals
how_to_reg
Group 2
verified_user
Enid's
At night a bar, during the day a delicious brunch spot.
verified_user
Veronika Ossi
Has not watched anything recently

Content

You can add custom content to the item. It will be pushed to the right side.

Group 1
Rachel
Last seen watching Arrested Development just now.
Lindsay
Last seen watching Bob's Burgers 10 hours ago.
check
Group 2
Enid's
At night a bar, during the day a delicious brunch spot.
Another component
Veronika Ossi
Has not watched anything recently

Avatar

You can implement an avatar in the list with the slot="avatar" by putting a [vs-avatar] component (/components/avatar.html)

Users
SJ
Steve Jobes
Top Contributor
Matt
Matt
11 Points
Profile photo
XFF
Xian Famous Foods
A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.
Edit this page

API #

Name Type Parameters Description default
color String RGB, HEX, primary, success, danger, warning, dark Component color primary
icon String Material icons An icon to show
icon-pack String Icon Pack Class Name Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons
title String List primary text
subtitle String List secondary text
slot="avatar" Slot Slot to add the avatar in the list

Loading keyboard_arrow_right