Lists present multiple line items vertically as a single continuous element and are best suited for similar data types.
They can have one, two or three lines of content, with a lot of different contents. Even that the examples on this page may look like that lists can only be used in mobile viewport, you can and should use them in desktop too.
List items can have interaction events, like click and mousedown events. They also integrate nicely with Vue Router.
List
Single line lists are really great for navigational elements, such as drawers. You can pass a icons, text and actions to them. They have also a dense layout, to accommodate more items on the screen:
- Abbey Christansen
- Alex Nelson
- Mary Johnson
- Abbey Christansen
- Alex Nelson
- Mary Johnson
The double line lists are good to show additional information about single items:
- Phone
- Phone
The three line lists are great for showing a preview of the full content of the item. It's good for email lists and other information like that:
- Ali Connors Brunch this weekend?
I'll be in your neighborhood doing errands this week. Do you want to meet?
- me, Scott, Jennifer Summer BBQ
Wish I could come, but I'm out of town this week. :(
- Sandra Adams Oui oui
Do you have Paris recommendations? Have you visited good places?
- Trevor Hansen Order confirmation
Thank you for your recent order from Amazon
- Ali Connors Brunch this weekend?
I'll be in your neighborhood doing errands this week. Do you want to meet?
- me, Scott, Jennifer Summer BBQ
Wish I could come, but I'm out of town this week. :(
- Sandra Adams Oui oui
Do you have Paris recommendations? Have you visited good places?
- Trevor Hansen Order confirmation
Thank you for your recent order from Amazon
List Actions
List items will render different tags based on the interaction types given.
If you pass one of those event, the item will automatically render a button:
- click
- dblclick
- mousedown
- mouseup
If you pass a href attribute, the item will automatically render an a tag.
All options of router-link can be simply used here. This will render an a tag:
Lists accept controls as main toggle actions. Really useful to improve form layouts:
- Notifications
- Settings
- Ringtone
Lists can have expansion panels to reveal more options:
API - md-list
The following options can be applied to any list:
| Name | Description | Default |
|---|---|---|
| md-expand-single Boolean | If set true, one expandable list item could be expanded at most at a time. The expanded list item will be collapsed when another is expanded | false |
API - md-list-item
The following options can be applied to any list item. All options of router-link can be simply used here:
| Name | Description | Default |
|---|---|---|
| md-expand Boolean | Enables the expansion panel | false |
| md-expanded Boolean | The prop to show/hide the expansion panel. Should be used with the .sync modifier | false |