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
644 Vermont Court, Freelandville, Kentucky, 2619
Aguirre Klein
626 Carroll Street, Roulette, Ohio, 1477
Tucker Kaufman
887 Winthrop Street, Tryon, Florida, 3912
Herbert Keller
286 NW. Shore St.Longwood, FL 32779
Disabled #
You can disable any user interaction by using 'disabled' prop.
Blocked
Audrey Clay
644 Vermont Court, Freelandville, Kentucky, 2619
Aguirre Klein
626 Carroll Street, Roulette, Ohio, 1477
Tucker Kaufman
887 Winthrop Street, Tryon, Florida, 3912
Herbert Keller
286 NW. Shore St.Longwood, FL 32779
Clickable #
Support a ability to use a list item as a link.
Fit #
Support a fitting of the list item by its content length.
Contacts
Audrey Clay
644 Vermont Court, Freelandville, Kentucky, 2619
Aguirre Klein
626 Carroll Street, Roulette, Ohio, 1477
Tucker Kaufman
887 Winthrop Street, Tryon, Florida, 3912
Herbert Keller
286 NW. Shore St.Longwood, FL 32779
Lines #
You can divide item label content on a custom count of lines.
Lines
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
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
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
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.
API #
API for va-list component.
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| fit |
|
| |
| preset |
| - |
Slots #
| Name | Description |
|---|---|
default | Contains list items |
Css Variables #
| Name | Default 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 #
| Name | Description | Types | Default |
|---|---|---|---|
| color |
|
| |
| preset |
| - |
Slots #
| Name | Description |
|---|---|
default | Contains the label text |
List Separator API #
API for va-list-separator component.
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| fit |
|
| |
| preset |
| - | |
| spaced |
|
|
List Item API #
API for va-list-item component.
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| activeClass |
| - | |
| append |
| - | |
| disabled |
|
| |
| exact |
| - | |
| exactActiveClass |
| - | |
| href |
| - | |
| preset |
| - | |
| replace |
| - | |
| tag |
|
| |
| target |
| - | |
| to |
| - |
Events #
| Name | Description |
|---|---|
click | Emitted when user clicked on item |
focus | Emitted when item is focused |
Slots #
| Name | Description |
|---|---|
default | For a list item content |
List Item Label API #
API for va-list-item-label component.
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| caption |
|
| |
| lines |
|
| |
| preset |
| - |
Slots #
| Name | Description |
|---|---|
default | Contains the label text |
List Item Section API #
API for va-list-item-section component.