Components - Lists
The "v-list" component is used to display information.
Lists can take an array of list items. When given an array, the list component will figure out the classes that are needed depending on what it was given. You can also define headers or dividers within the items array.
Lists also contain slots for a more explicit approach. If you choose this approach, remember you must provide additional props for correct spacing. In this example, we have a tile with an avatar, so we must provide an "avatar" property.
Lists can contain subheaders, dividers, and can contain 1 or more lines. The subtitle will overflow with ellipsis if it extends past one line.
For three line lists, the subtitle will clamp vertically at 2 lines and then ellipsis. If you need more than 3 lines, it is adviced to use a card.
- Today
- Brunch this weekend?Ali Connors — I'll be in your neighborhood doing errands this weekend. Do you want to hang out?
- Summer BBQ 4to Alex, Scott, Jennifer — Wish I could come, but I'm out of town this weekend.
- Oui ouiSandra Adams — Do you have Paris recommendations? Have you ever been?
- Birthday giftTrevor Hansen — Have any ideas about what we should get Heidi for her birthday?
- Recipe to tryBritta Holt — We should eat this: Grate, Squash, Corn, and tomatillo Tacos.
When a lists slot is used, you must manually define whether it contains headers, or if the items contain an avatar. This is required to maintain proper spacing.
- Recent chat
- Jason Onerchat_bubble
- Ranee Carlsonchat_bubble
- Cindy Bakerchat_bubble
- Ali Connorschat_bubble
- Previous chats
- Travis Howard
Lists can contain multple subheaders and dividers.
- General
- Profile photoChange your Google+ profile photo
- Show your statusYour status is visible to everyone
A list can be combined with a card.
A list can contain a stack within an action. Ripple and router props can be passed through the main "v-list", to the "v-list-tile" or as a property in the items array.
- Ali ConnorsBrunch this weekend?I'll be in your neighborhood doing errands this weekend. Do you want to hang out?15 minstar_border
- me, Scrott, JenniferSummer BBQWish I could come, but I'm out of town this weekend.2 hrstar_border
- Sandra AdamsOui ouiDo you have Paris recommendations? Have you ever been?6 hrstar_border
- Trevor HansenBirthday giftHave any ideas about what we should get Heidi for her birthday?12 hrstar_border
- Britta HoltRecipe to tryWe should eat this: Grate, Squash, Corn, and tomatillo Tacos.18hrstar_border
A list can contain up to 3 lines.
- User Controls
- Content filteringSet the content filtering level to restrict appts that can be downloaded
- PasswordRequire password for purchase or use password to restrict purchase
A list can contain a group of items which will display on click. Expansion lists are also used within the "sidebar" component.
A list can assume the alternate scheme color of dark.