Need help with Vue or Nuxt? We build fast apps, custom UI libraries, and help you move to Vue 3 and Nuxt 3 — start with a free 2-week trial.
Talk to an Engineer

List
#

The va-list component is used to display structured information.

Examples
#

Basic usage
#

Has no attributes by default. Build a structure by using components va-list-label, va-list-separator, va-list-item and etc.

Contacts
Audrey Clay
Audrey Clay
644 Vermont Court, Freelandville, Kentucky, 2619
Aguirre Klein
Aguirre Klein
626 Carroll Street, Roulette, Ohio, 1477
Tucker Kaufman
Tucker Kaufman
887 Winthrop Street, Tryon, Florida, 3912
Herbert Keller
Herbert Keller
286 NW. Shore St.Longwood, FL 32779
Open in GitHub

Disabled
#

You can disable any user interaction by using 'disabled' prop.

Blocked
Audrey Clay
Audrey Clay
644 Vermont Court, Freelandville, Kentucky, 2619
Aguirre Klein
Aguirre Klein
626 Carroll Street, Roulette, Ohio, 1477
Tucker Kaufman
Tucker Kaufman
887 Winthrop Street, Tryon, Florida, 3912
Herbert Keller
Herbert Keller
286 NW. Shore St.Longwood, FL 32779
Open in GitHub

Clickable
#

Support a ability to use a list item as a link.

Clickable
Audrey Clay
Audrey Clay
644 Vermont Court, Freelandville, Kentucky, 2619
Aguirre Klein
Aguirre Klein
626 Carroll Street, Roulette, Ohio, 1477
Tucker Kaufman
Tucker Kaufman
887 Winthrop Street, Tryon, Florida, 3912
Herbert Keller
Herbert Keller
286 NW. Shore St.Longwood, FL 32779
Open in GitHub

Fit
#

Support a fitting of the list item by its content length.

Contacts
Audrey Clay
Audrey Clay
644 Vermont Court, Freelandville, Kentucky, 2619
Aguirre Klein
Aguirre Klein
626 Carroll Street, Roulette, Ohio, 1477
Tucker Kaufman
Tucker Kaufman
887 Winthrop Street, Tryon, Florida, 3912
Herbert Keller
Herbert Keller
286 NW. Shore St.Longwood, FL 32779
Open in GitHub

Lines
#

You can divide item label content on a custom count of lines.

Lines
Audrey Clay
Audrey Clay
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque maiores esse eum, aliquam architecto facilis, facere omnis nulla optio, odio magnam sit officia aspernatur ea quis nesciunt distinctio sequi voluptate illo. Ducimus necessitatibus natus magni. Vel incidunt id provident, consequatur sit asperiores magnam aut! Cumque, id harum ad labore qui ratione quibusdam culpa saepe, quos blanditiis accusantium ipsum distinctio laboriosam fugiat, asperiores tempora nobis incidunt expedita! Assumenda omnis officiis hic! Ipsa nemo et quidem amet similique. Sed veniam eveniet optio fuga reprehenderit, illo ipsum a voluptatem quod saepe harum quo voluptatibus fugiat tempore quos soluta sapiente temporibus quam rem quidem aspernatur, magni veritatis. Facere recusandae sunt culpa magni? Distinctio minima maxime sint deleniti labore nesciunt laboriosam a id impedit nemo. Maxime sapiente exercitationem omnis mollitia, ducimus ad sequi voluptates consequatur accusamus illum iusto et ea quidem eveniet? Rerum qui cumque aliquam iusto quia, aspernatur totam fugit omnis magnam, eligendi nulla eveniet minus labore tenetur accusantium tempora sed obcaecati! Delectus, animi! Placeat iusto recusandae hic eos neque corrupti harum sunt nemo repellat, laborum nesciunt ab numquam quod minima quia error deleniti qui, possimus deserunt. Adipisci, totam doloremque. Nostrum, corporis cum at, provident quod inventore amet nesciunt consectetur vitae explicabo animi fuga.
Aguirre Klein
Aguirre Klein
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque maiores esse eum, aliquam architecto facilis, facere omnis nulla optio, odio magnam sit officia aspernatur ea quis nesciunt distinctio sequi voluptate illo. Ducimus necessitatibus natus magni. Vel incidunt id provident, consequatur sit asperiores magnam aut! Cumque, id harum ad labore qui ratione quibusdam culpa saepe, quos blanditiis accusantium ipsum distinctio laboriosam fugiat, asperiores tempora nobis incidunt expedita! Assumenda omnis officiis hic! Ipsa nemo et quidem amet similique. Sed veniam eveniet optio fuga reprehenderit, illo ipsum a voluptatem quod saepe harum quo voluptatibus fugiat tempore quos soluta sapiente temporibus quam rem quidem aspernatur, magni veritatis. Facere recusandae sunt culpa magni? Distinctio minima maxime sint deleniti labore nesciunt laboriosam a id impedit nemo. Maxime sapiente exercitationem omnis mollitia, ducimus ad sequi voluptates consequatur accusamus illum iusto et ea quidem eveniet? Rerum qui cumque aliquam iusto quia, aspernatur totam fugit omnis magnam, eligendi nulla eveniet minus labore tenetur accusantium tempora sed obcaecati! Delectus, animi! Placeat iusto recusandae hic eos neque corrupti harum sunt nemo repellat, laborum nesciunt ab numquam quod minima quia error deleniti qui, possimus deserunt. Adipisci, totam doloremque. Nostrum, corporis cum at, provident quod inventore amet nesciunt consectetur vitae explicabo animi fuga.
Tucker Kaufman
Tucker Kaufman
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque maiores esse eum, aliquam architecto facilis, facere omnis nulla optio, odio magnam sit officia aspernatur ea quis nesciunt distinctio sequi voluptate illo. Ducimus necessitatibus natus magni. Vel incidunt id provident, consequatur sit asperiores magnam aut! Cumque, id harum ad labore qui ratione quibusdam culpa saepe, quos blanditiis accusantium ipsum distinctio laboriosam fugiat, asperiores tempora nobis incidunt expedita! Assumenda omnis officiis hic! Ipsa nemo et quidem amet similique. Sed veniam eveniet optio fuga reprehenderit, illo ipsum a voluptatem quod saepe harum quo voluptatibus fugiat tempore quos soluta sapiente temporibus quam rem quidem aspernatur, magni veritatis. Facere recusandae sunt culpa magni? Distinctio minima maxime sint deleniti labore nesciunt laboriosam a id impedit nemo. Maxime sapiente exercitationem omnis mollitia, ducimus ad sequi voluptates consequatur accusamus illum iusto et ea quidem eveniet? Rerum qui cumque aliquam iusto quia, aspernatur totam fugit omnis magnam, eligendi nulla eveniet minus labore tenetur accusantium tempora sed obcaecati! Delectus, animi! Placeat iusto recusandae hic eos neque corrupti harum sunt nemo repellat, laborum nesciunt ab numquam quod minima quia error deleniti qui, possimus deserunt. Adipisci, totam doloremque. Nostrum, corporis cum at, provident quod inventore amet nesciunt consectetur vitae explicabo animi fuga.
Herbert Keller
Herbert Keller
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque maiores esse eum, aliquam architecto facilis, facere omnis nulla optio, odio magnam sit officia aspernatur ea quis nesciunt distinctio sequi voluptate illo. Ducimus necessitatibus natus magni. Vel incidunt id provident, consequatur sit asperiores magnam aut! Cumque, id harum ad labore qui ratione quibusdam culpa saepe, quos blanditiis accusantium ipsum distinctio laboriosam fugiat, asperiores tempora nobis incidunt expedita! Assumenda omnis officiis hic! Ipsa nemo et quidem amet similique. Sed veniam eveniet optio fuga reprehenderit, illo ipsum a voluptatem quod saepe harum quo voluptatibus fugiat tempore quos soluta sapiente temporibus quam rem quidem aspernatur, magni veritatis. Facere recusandae sunt culpa magni? Distinctio minima maxime sint deleniti labore nesciunt laboriosam a id impedit nemo. Maxime sapiente exercitationem omnis mollitia, ducimus ad sequi voluptates consequatur accusamus illum iusto et ea quidem eveniet? Rerum qui cumque aliquam iusto quia, aspernatur totam fugit omnis magnam, eligendi nulla eveniet minus labore tenetur accusantium tempora sed obcaecati! Delectus, animi! Placeat iusto recusandae hic eos neque corrupti harum sunt nemo repellat, laborum nesciunt ab numquam quod minima quia error deleniti qui, possimus deserunt. Adipisci, totam doloremque. Nostrum, corporis cum at, provident quod inventore amet nesciunt consectetur vitae explicabo animi fuga.
Open in GitHub

API
#

API for va-list component.

Props #

NameDescriptionTypesDefault
fit

Stretches list by its content width

Boolean

false

preset

Named preset combination of component props.

String | Array

-

Slots #

NameDescription

default

Contains list items

Css Variables #

NameDefault Value
--va-list-width 100%
--va-list-label-text-align center
--va-list-label-padding 0.3rem 0
--va-list-item-display flex
--va-list-item-align-items center
--va-list-item-width 100%
--va-list-item-height 100%
--va-list-item-label-color #34495e
--va-list-item-label-display -webkit-box
--va-list-item-label-box-orient vertical
--va-list-item-label-overflow hidden
--va-list-item-label-line-height normal
--va-list-item-label-caption-font-size 85%
--va-list-item-label-caption-color #babfc2
--va-list-item-section-display flex
--va-list-item-section-icon-min-width 1.5rem
--va-list-item-section-icon-align-items center
--va-list-item-section-icon-justify-content center
--va-list-item-section-icon-margin 0.6rem 0.75rem
--va-list-item-section-icon-font-size 1.25rem
--va-list-item-section-avatar-min-width 3rem

List Label API
#

API for va-list-label component.

Props #

NameDescriptionTypesDefault
color

Color of the component (theme string or HEX string).

String

"primary"

preset

Named preset combination of component props.

String | Array

-

Slots #

NameDescription

default

Contains the label text

List Separator API
#

API for va-list-separator component.

Props #

NameDescriptionTypesDefault
fit

Adds space on the left side

Boolean

false

preset

Named preset combination of component props.

String | Array

-

spaced

Adds spaces over and under the separator

Boolean

false

List Item API
#

API for va-list-item component.

Props #

NameDescriptionTypesDefault
activeClass

Applied when the link is active. More info here.

String

-

append

When set, always appends the relative path to the current path. More info here.

Boolean

-

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

exact

Exactly match the link. Without this, '/' will match every route. More info here.

Boolean

-

exactActiveClass

Applied when the link is active with exact match. More info here.

String

-

href

Designates the component as anchor and applies the href attribute. More info here.

String

-

preset

Named preset combination of component props.

String | Array

-

replace

When set, calls router.replace() instead of router.push() when navigated, so it will not leave a history record. More info here.

Boolean

-

tag

Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (ul > li and tr > td etc.).

String

"div"

target

Navigation target, More info here.

String

-

to

The target route of the link. More info here.

String | Object

-

Events #

NameDescription

click

Emitted when user clicked on item

focus

Emitted when item is focused

Slots #

NameDescription

default

For a list item content

List Item Label API
#

API for va-list-item-label component.

Props #

NameDescriptionTypesDefault
caption

Applies another style to text

Boolean

false

lines

Divides item label content on a custom count of lines

String | Number

1

preset

Named preset combination of component props.

String | Array

-

Slots #

NameDescription

default

Contains the label text

List Item Section API
#

API for va-list-item-section component.

Props #

NameDescriptionTypesDefault
avatar

Makes section for avatar

Boolean

false

icon

Makes section for icon

Boolean

false

preset

Named preset combination of component props.

String | Array

-

Slots #

NameDescription

default

For a section content