List

Lists are continuous, vertical indexes of text or images

Basic

A basic list of items with vs-title and vs-subtitle.

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

A vs-list-header separator with custom vs-color.

Group 1
Item 1.1
Item 1.1
Item 1.2
Item 1.2
Group 2
Item 2.1
Item 2.1
Item 2.2
Item 2.2

Icon

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

TIP

Vuesax use the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

check
Group 1
check
Item 1.1
Item 1.1
check
Item 1.2
Item 1.2
check
Group 2
check
Item 2.1
Item 2.1
check
Item 2.2
Item 2.2

Content

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

check
Group 1
check
Item 1.1
Item 1.1
check
Item 1.2
Item 1.2
check
Group 2
check
Item 2.1
Item 2.1
home
Another component
check
Item 2.2
Item 2.2

Avatar

You can implement an avatar in the list with the slot="avatar" and there is put the component vs-avatar

Group 1
person
Item 1.1
Item 1.1
V
Item 1.2
Item 1.2
Group 2
Vue
Item 2.1
Item 2.1
Item 2.2
Item 2.2

API #

NameTypeParametersDescriptiondefault
vs-colorStringRGB, HEX, primary, success, danger, warning, darkComponent colorprimary
vs-iconStringMaterial iconsAn icon to show
vs-titleStringList primary text
vs-subtitleStringList secondary text
slot="avatar"SlotSlot to add the avatar in the list