List

The v-list component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.

Basic

v-list component can contain an avatar, content, actions and much more.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac

Rounded

You can make v-list-item rounded using rounded prop.

Cupcake sesame snaps dessert marzipan.
Jelly beans jelly-o gummi bears chupa chups marshmallow.
Bonbon macaroon gummies pie jelly
halvah icing marshmallow

Density

Use density prop to adjusts the spacing within the component. Available options are: default, comfortable, and compact.

halvah icing marshmallow
Cake caramels donut danish muffin biscuit
Chocolate cake pie lollipop
Apple pie toffee pudding gummi bears
Jujubes chupa chups cheesecake tart
Candy fruitcake bonbon sesame snaps dessert
Candy wafer tiramisu sugar plum sweet.
Toffee gingerbread muffin macaroon cotton candy bonbon lollipop.

Action and item group

A three-line list with actions. Utilizing v-list-group, easily connect actions to your tiles.

General
Notifications
Notify me about updates to apps or games that I downloaded
Sound
Auto-update apps at any time. Data charges may apply
Auto-add widgets
Automatically add home screen widgets when downloads complete

Sub Group

Using the v-list-group component you can create up to 2 levels in depth using the sub-group prop.

Home
Users
Admin
Management
Settings
Actions

Two lines and subheader

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses line-clamp and is not supported in all browsers.

Folders
Photos
Jan 9, 2014
Recipes
Jan 17, 2014
Work
Jan 28, 2014
Files
Vacation itinerary
Jan 20, 2014
Kitchen remodel
Jan 10, 2014

Three Line

For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. This feature uses line-clamp and is not supported in all browsers.

Today
Brunch this weekend?
Ali Connors — I be in your neighborhood doing errands this weekend. Do you want to hang out?
Summer BBQ
to Alex, Scott, Jennifer — Wish I could come, but I am out of town this weekend.
Oui oui
Sandra Adams — Do you have Paris recommendations? Have you ever been?
Birthday gift
Trevor Hansen — Have any ideas about what we should get Heidi for her birthday?

User List

Caroline Black
Online
13 minutes ago
Alfred Copeland
Away
11 minutes ago
Celia Schneider
Offline
9 minutes ago
Max Rogan
In Meeting
28 minutes ago

Progress List

React is a JavaScript library for building user interfaces
Bootstrap is an open source toolkit
Vue.js is the Progressive JavaScript Framework
Angular implements Functional Programming concepts
JavaScript is the programming language of the Web

Shaped

Shaped lists have rounded borders on one side of the v-list-item.

Cupcake sesame snaps dessert marzipan.
Jelly beans jelly-o gummi bears chupa chups marshmallow.
Bonbon macaroon gummies pie jelly
CONTENTS

  • Introduction

  • Basic

  • Rounded

  • Density

  • Nav

  • Action and item group

  • Sub Group

  • Two lines and subheader

  • Three Line

  • User List

  • Progress List

  • Shaped