Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
vue-material/releases/v0.7.0/list.21d93484.js
Marcos Moura 39692285a0 [build] 0.7.1
2017-02-08 22:05:12 -02:00

1 line
No EOL
30 KiB
JavaScript
Raw Blame History

webpackJsonp([18,34],{476:function(t,n,i){i(594);var s=i(0)(null,i(558),"data-v-3afd7c90",null);t.exports=s.exports},526:function(t,n,i){n=t.exports=i(4)(),n.push([t.i,".phone-viewport[data-v-3afd7c90]{height:400px}.custom-list .md-icon[data-v-3afd7c90]:not(.md-primary){color:rgba(0,0,0,.26)}",""])},558:function(t,n){t.exports={render:function(){var t=this,n=t.$createElement,i=t._self._c||n;return i("page-content",{attrs:{"page-title":"Components - List"}},[i("docs-component",[i("div",{slot:"description"},[i("p",[t._v("Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text. They are optimized for reading comprehension while differentiating either between similar data types, or qualities within a single data type.")]),t._v(" "),i("p",[t._v("The "),i("code",[t._v("md-list")]),t._v(" component have some auxiliary classes to align content and display actions. All of them can be any HTML tag:")]),t._v(" "),i("ul",[i("li",[i("code",[t._v(".md-list-action")]),t._v(": Used to display a action on the right side of a list item. Commonly used to display a button with a single action.")]),t._v(" "),i("li",[i("code",[t._v(".md-list-text-container")]),t._v(": Used to align text horizontally with icons and actions. Used in double and triple lines.")]),t._v(" "),i("li",[i("code",[t._v(".md-divider")]),t._v(": Add a horizontal line between list items.")])])]),t._v(" "),i("div",{slot:"api"},[i("api-table",{attrs:{name:"md-list"}},[i("md-table",{slot:"classes"},[i("md-table-header",[i("md-table-row",[i("md-table-head",[t._v("Name")]),t._v(" "),i("md-table-head",[t._v("Description")])],1)],1),t._v(" "),i("md-table-body",[i("md-table-row",[i("md-table-cell",[t._v("md-dense")]),t._v(" "),i("md-table-cell",[t._v("Make the list dense and compact")])],1),t._v(" "),i("md-table-row",[i("md-table-cell",[t._v("md-double-line")]),t._v(" "),i("md-table-cell",[t._v("Make list items to support double line")])],1),t._v(" "),i("md-table-row",[i("md-table-cell",[t._v("md-triple-line")]),t._v(" "),i("md-table-cell",[t._v("Make list items to support triple line")])],1)],1)],1)],1),t._v(" "),i("api-table",{attrs:{name:"md-list-item"}},[i("p",[t._v("Display a single item inside lists")]),t._v(" "),i("md-table",{slot:"properties"},[i("md-table-header",[i("md-table-row",[i("md-table-head",[t._v("Name")]),t._v(" "),i("md-table-head",[t._v("Type")]),t._v(" "),i("md-table-head",[t._v("Description")])],1)],1),t._v(" "),i("md-table-body",[i("md-table-row",[i("md-table-cell",[t._v("href")]),t._v(" "),i("md-table-cell",[i("code",[t._v("String")])]),t._v(" "),i("md-table-cell",[t._v("The link that the item should redirect to.")])],1),t._v(" "),i("md-table-row",[i("md-table-cell",[t._v("target")]),t._v(" "),i("md-table-cell",[i("code",[t._v("String")])]),t._v(" "),i("md-table-cell",[t._v("The target for opening the href link. Normally used for "),i("code",[t._v("_blank")]),t._v(" cases.")])],1),t._v(" "),i("md-table-row",[i("md-table-cell",[t._v("disabled")]),t._v(" "),i("md-table-cell",[i("code",[t._v("Boolean")])]),t._v(" "),i("md-table-cell",[t._v("Disable the item and prevent his actions. Default "),i("code",[t._v("false")])])],1),t._v(" "),i("md-table-row",[i("md-table-cell",[t._v("md-expand-multiple")]),t._v(" "),i("md-table-cell",[i("code",[t._v("Boolean")])]),t._v(" "),i("md-table-cell",[t._v("Allow multiple items be expanded in same time in md-list. Default "),i("code",[t._v("false")])])],1)],1)],1),t._v(" "),i("md-table",{slot:"classes"},[i("md-table-header",[i("md-table-row",[i("md-table-head",[t._v("Name")]),t._v(" "),i("md-table-head",[t._v("Description")])],1)],1),t._v(" "),i("md-table-body",[i("md-table-row",[i("md-table-cell",[t._v("md-inset")]),t._v(" "),i("md-table-cell",[t._v("Add an empty space on the left of the table. "),i("br"),t._v("Useful to show list items without icons aligned with another that have an icon.")])],1)],1)],1)],1),t._v(" "),i("api-table",{attrs:{name:"md-list-expand"}},[i("p",[t._v("Create a expansion accordion automatically inside lists")]),t._v(" "),i("p",[t._v("No options available")])])],1),t._v(" "),i("div",{slot:"example"},[i("example-box",{attrs:{"card-title":"Single Line"}},[i("div",{slot:"demo"},[i("div",{staticClass:"phone-viewport"},[i("md-list",[i("md-list-item",[i("md-icon",[t._v("move_to_inbox")]),t._v(" "),i("span",[t._v("Inbox")])],1),t._v(" "),i("md-list-item",[i("md-icon",[t._v("send")]),t._v(" "),i("span",[t._v("Sent Mail")])],1),t._v(" "),i("md-list-item",[i("md-icon",[t._v("delete")]),t._v(" "),i("span",[t._v("Trash")])],1),t._v(" "),i("md-list-item",[i("md-icon",[t._v("error")]),t._v(" "),i("span",[t._v("Spam")]),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),i("span",[t._v("Abbey Christansen")]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),i("span",[t._v("Alex Nelson")]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),i("span",[t._v("Mary Johnson")]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("chat_bubble")])],1)],1)],1)],1),t._v(" "),i("div",{staticClass:"phone-viewport"},[i("md-list",{staticClass:"md-dense"},[i("md-list-item",[i("md-icon",[t._v("move_to_inbox")]),t._v(" "),i("span",[t._v("Inbox")])],1),t._v(" "),i("md-list-item",[i("md-icon",[t._v("send")]),t._v(" "),i("span",[t._v("Sent Mail")])],1),t._v(" "),i("md-list-item",[i("md-icon",[t._v("delete")]),t._v(" "),i("span",[t._v("Trash")])],1),t._v(" "),i("md-list-item",[i("md-icon",[t._v("error")]),t._v(" "),i("span",[t._v("Spam")]),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),i("span",[t._v("Abbey Christansen")]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),i("span",[t._v("Alex Nelson")]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),i("span",[t._v("Mary Johnson")]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("chat_bubble")])],1)],1)],1)],1)]),t._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[t._v('\n <div class="phone-viewport">\n <md-list>\n <md-list-item>\n <md-icon>move_to_inbox</md-icon> <span>Inbox</span>\n </md-list-item>\n\n <md-list-item>\n <md-icon>send</md-icon> <span>Sent Mail</span>\n </md-list-item>\n\n <md-list-item>\n <md-icon>delete</md-icon> <span>Trash</span>\n </md-list-item>\n\n <md-list-item>\n <md-icon>error</md-icon> <span>Spam</span>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/5" alt="People">\n </md-avatar>\n\n <span>Abbey Christansen</span>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">chat_bubble</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/1" alt="People">\n </md-avatar>\n\n <span>Alex Nelson</span>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">chat_bubble</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/6" alt="People">\n </md-avatar>\n\n <span>Mary Johnson</span>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>chat_bubble</md-icon>\n </md-button>\n </md-list-item>\n </md-list>\n </div>\n\n <div class="phone-viewport">\n <md-list class="md-dense">\n <md-list-item>\n <md-icon>move_to_inbox</md-icon> <span>Inbox</span>\n </md-list-item>\n\n <md-list-item>\n <md-icon>send</md-icon> <span>Sent Mail</span>\n </md-list-item>\n\n <md-list-item>\n <md-icon>delete</md-icon> <span>Trash</span>\n </md-list-item>\n\n <md-list-item>\n <md-icon>error</md-icon> <span>Spam</span>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/5" alt="People">\n </md-avatar>\n\n <span>Abbey Christansen</span>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">chat_bubble</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/1" alt="People">\n </md-avatar>\n\n <span>Alex Nelson</span>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">chat_bubble</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/6" alt="People">\n </md-avatar>\n\n <span>Mary Johnson</span>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>chat_bubble</md-icon>\n </md-button>\n </md-list-item>\n </md-list>\n </div>\n ')])],1)]),t._v(" "),i("example-box",{attrs:{"card-title":"Double Line"}},[i("div",{slot:"demo"},[i("div",{staticClass:"phone-viewport"},[i("md-list",{staticClass:"md-double-line"},[i("md-list-item",[i("md-icon",{staticClass:"md-primary"},[t._v("phone")]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("(650) 555-1234")]),t._v(" "),i("span",[t._v("Mobile")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("sms")])],1)],1),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("(650) 555-1234")]),t._v(" "),i("span",[t._v("Mobile")])]),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-icon",{staticClass:"md-primary"},[t._v("email")]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("aliconnors@example.com")]),t._v(" "),i("span",[t._v("Personal")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("sms")])],1)],1),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("ali_connors@example.com")]),t._v(" "),i("span",[t._v("Work")])])])],1)],1),t._v(" "),i("div",{staticClass:"phone-viewport"},[i("md-list",{staticClass:"md-double-line md-dense"},[i("md-list-item",[i("md-icon",{staticClass:"md-primary"},[t._v("phone")]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("(650) 555-1234")]),t._v(" "),i("span",[t._v("Mobile")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("sms")])],1)],1),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("(650) 555-1234")]),t._v(" "),i("span",[t._v("Mobile")])]),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-icon",{staticClass:"md-primary"},[t._v("email")]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("aliconnors@example.com")]),t._v(" "),i("span",[t._v("Personal")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("sms")])],1)],1),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("ali_connors@example.com")]),t._v(" "),i("span",[t._v("Work")])])])],1)],1)]),t._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[t._v('\n <div class="phone-viewport">\n <md-list class="md-double-line">\n <md-list-item>\n <md-icon class="md-primary">phone</md-icon>\n\n <div class="md-list-text-container">\n <span>(650) 555-1234</span>\n <span>Mobile</span>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>sms</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item class="md-inset">\n <div class="md-list-text-container">\n <span>(650) 555-1234</span>\n <span>Mobile</span>\n </div>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-icon class="md-primary">email</md-icon>\n\n <div class="md-list-text-container">\n <span>aliconnors@example.com</span>\n <span>Personal</span>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>sms</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item class="md-inset">\n <div class="md-list-text-container">\n <span>ali_connors@example.com</span>\n <span>Work</span>\n </div>\n </md-list-item>\n </md-list>\n </div>\n\n <div class="phone-viewport">\n <md-list class="md-double-line md-dense">\n <md-list-item>\n <md-icon class="md-primary">phone</md-icon>\n\n <div class="md-list-text-container">\n <span>(650) 555-1234</span>\n <span>Mobile</span>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>sms</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item class="md-inset">\n <div class="md-list-text-container">\n <span>(650) 555-1234</span>\n <span>Mobile</span>\n </div>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-icon class="md-primary">email</md-icon>\n\n <div class="md-list-text-container">\n <span>aliconnors@example.com</span>\n <span>Personal</span>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>sms</md-icon>\n </md-button>\n </md-list-item>\n\n <md-list-item class="md-inset">\n <div class="md-list-text-container">\n <span>ali_connors@example.com</span>\n <span>Work</span>\n </div>\n </md-list-item>\n </md-list>\n </div>\n ')])],1)]),t._v(" "),i("example-box",{attrs:{"card-title":"Triple Line"}},[i("div",{slot:"demo"},[i("div",{staticClass:"phone-viewport"},[i("md-list",{staticClass:"custom-list md-triple-line"},[i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("Ali Connors")]),t._v(" "),i("span",[t._v("Brunch this weekend?")]),t._v(" "),i("p",[t._v("I'll be in your neighborhood doing errands...")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",{staticClass:"md-primary"},[t._v("star")])],1),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("me, Scott, Jennifer")]),t._v(" "),i("span",[t._v("Summer BBQ")]),t._v(" "),i("p",[t._v("Wish I could come, but I'm out of town ...")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("star_border")])],1),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("Sandra Adams")]),t._v(" "),i("span",[t._v("Oui oui")]),t._v(" "),i("p",[t._v("Do you have Paris recommendations ...")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("star_border")])],1),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/8",alt:"People"}})]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("Trevor Hansen")]),t._v(" "),i("span",[t._v("Order confirmation")]),t._v(" "),i("p",[t._v("Thank you for your recent order from ...")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("star_border")])],1),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1)],1)],1),t._v(" "),i("div",{staticClass:"phone-viewport"},[i("md-list",{staticClass:"custom-list md-triple-line md-dense"},[i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("Ali Connors")]),t._v(" "),i("span",[t._v("Brunch this weekend?")]),t._v(" "),i("p",[t._v("I'll be in your neighborhood doing errands...")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",{staticClass:"md-primary"},[t._v("star")])],1),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("me, Scott, Jennifer")]),t._v(" "),i("span",[t._v("Summer BBQ")]),t._v(" "),i("p",[t._v("Wish I could come, but I'm out of town ...")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("star_border")])],1),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("Sandra Adams")]),t._v(" "),i("span",[t._v("Oui oui")]),t._v(" "),i("p",[t._v("Do you have Paris recommendations ...")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("star_border")])],1),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1),t._v(" "),i("md-list-item",[i("md-avatar",[i("img",{attrs:{src:"https://placeimg.com/40/40/people/8",alt:"People"}})]),t._v(" "),i("div",{staticClass:"md-list-text-container"},[i("span",[t._v("Trevor Hansen")]),t._v(" "),i("span",[t._v("Order confirmation")]),t._v(" "),i("p",[t._v("Thank you for your recent order from ...")])]),t._v(" "),i("md-button",{staticClass:"md-icon-button md-list-action"},[i("md-icon",[t._v("star_border")])],1),t._v(" "),i("md-divider",{staticClass:"md-inset"})],1)],1)],1)]),t._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[t._v('\n <div class="phone-viewport">\n <md-list class="custom-list md-triple-line">\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/1" alt="People">\n </md-avatar>\n\n <div class="md-list-text-container">\n <span>Ali Connors</span>\n <span>Brunch this weekend?</span>\n <p>I\'ll be in your neighborhood doing errands...</p>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">star</md-icon>\n </md-button>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/6" alt="People">\n </md-avatar>\n\n <div class="md-list-text-container">\n <span>me, Scott, Jennifer</span>\n <span>Summer BBQ</span>\n <p>Wish I could come, but I\'m out of town ...</p>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>star_border</md-icon>\n </md-button>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/5" alt="People">\n </md-avatar>\n\n <div class="md-list-text-container">\n <span>Sandra Adams</span>\n <span>Oui oui</span>\n <p>Do you have Paris recommendations ...</p>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>star_border</md-icon>\n </md-button>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/8" alt="People">\n </md-avatar>\n\n <div class="md-list-text-container">\n <span>Trevor Hansen</span>\n <span>Order confirmation</span>\n <p>Thank you for your recent order from ...</p>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>star_border</md-icon>\n </md-button>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n </md-list>\n </div>\n\n <div class="phone-viewport">\n <md-list class="custom-list md-triple-line md-dense">\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/1" alt="People">\n </md-avatar>\n\n <div class="md-list-text-container">\n <span>Ali Connors</span>\n <span>Brunch this weekend?</span>\n <p>I\'ll be in your neighborhood doing errands...</p>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon class="md-primary">star</md-icon>\n </md-button>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/6" alt="People">\n </md-avatar>\n\n <div class="md-list-text-container">\n <span>me, Scott, Jennifer</span>\n <span>Summer BBQ</span>\n <p>Wish I could come, but I\'m out of town ...</p>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>star_border</md-icon>\n </md-button>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/5" alt="People">\n </md-avatar>\n\n <div class="md-list-text-container">\n <span>Sandra Adams</span>\n <span>Oui oui</span>\n <p>Do you have Paris recommendations ...</p>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>star_border</md-icon>\n </md-button>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n\n <md-list-item>\n <md-avatar>\n <img src="https://placeimg.com/40/40/people/8" alt="People">\n </md-avatar>\n\n <div class="md-list-text-container">\n <span>Trevor Hansen</span>\n <span>Order confirmation</span>\n <p>Thank you for your recent order from ...</p>\n </div>\n\n <md-button class="md-icon-button md-list-action">\n <md-icon>star_border</md-icon>\n </md-button>\n\n <md-divider class="md-inset"></md-divider>\n </md-list-item>\n </md-list>\n </div>\n ')])],1)]),t._v(" "),i("example-box",{attrs:{"card-title":"Expansion Lists"}},[i("div",{slot:"demo"},[i("div",{staticClass:"phone-viewport"},[i("md-list",[i("md-list-item",{attrs:{"md-expand-multiple":""}},[i("md-icon",[t._v("whatshot")]),t._v(" "),i("span",[t._v("News")]),t._v(" "),i("md-list-expand",[i("md-list",[i("md-list-item",{staticClass:"md-inset"},[t._v("World")]),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[t._v("Americas")]),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[t._v("Europe")])],1)],1)],1),t._v(" "),i("md-list-item",{attrs:{"md-expand-multiple":""}},[i("md-icon",[t._v("videogame_asset")]),t._v(" "),i("span",[t._v("Games")]),t._v(" "),i("md-list-expand",[i("md-list",[i("md-list-item",{staticClass:"md-inset"},[t._v("Console")]),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[t._v("PC")]),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[t._v("Phone")])],1)],1)],1),t._v(" "),i("md-list-item",{attrs:{"md-expand-multiple":""}},[i("md-icon",[t._v("video_library")]),t._v(" "),i("span",[t._v("Video")]),t._v(" "),i("md-list-expand",[i("md-list",[i("md-list-item",{staticClass:"md-inset"},[t._v("Humor")]),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[t._v("Music")]),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[t._v("Movies")]),t._v(" "),i("md-list-item",{staticClass:"md-inset"},[t._v("TV Shows")])],1)],1)],1),t._v(" "),i("md-list-item",[i("md-icon",[t._v("shopping_basket")]),t._v(" "),i("span",[t._v("Shop")])],1)],1)],1)]),t._v(" "),i("div",{slot:"code"},[i("code-block",{attrs:{lang:"xml"}},[t._v('\n <div class="phone-viewport">\n <md-list>\n <md-list-item>\n <md-icon>whatshot</md-icon>\n <span>News</span>\n\n <md-list-expand>\n <md-list>\n <md-list-item class="md-inset">World</md-list-item>\n <md-list-item class="md-inset">Americas</md-list-item>\n <md-list-item class="md-inset">Europe</md-list-item>\n </md-list>\n </md-list-expand>\n </md-list-item>\n\n <md-list-item>\n <md-icon>videogame_asset</md-icon>\n <span>Games</span>\n\n <md-list-expand>\n <md-list>\n <md-list-item class="md-inset">Console</md-list-item>\n <md-list-item class="md-inset">PC</md-list-item>\n <md-list-item class="md-inset">Phone</md-list-item>\n </md-list>\n </md-list-expand>\n </md-list-item>\n\n <md-list-item>\n <md-icon>video_library</md-icon>\n <span>Video</span>\n\n <md-list-expand>\n <md-list>\n <md-list-item class="md-inset">Humor</md-list-item>\n <md-list-item class="md-inset">Music</md-list-item>\n <md-list-item class="md-inset">Movies</md-list-item>\n <md-list-item class="md-inset">TV Shows</md-list-item>\n </md-list>\n </md-list-expand>\n </md-list-item>\n\n <md-list-item>\n <md-icon>shopping_basket</md-icon>\n <span>Shop</span>\n </md-list-item>\n </md-list>\n </div>\n ')])],1)])],1)])],1)},staticRenderFns:[]}},594:function(t,n,i){var s=i(526);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);i(5)("5dd515fe",s,!0)}});
Reference in a new issue View git blame Copy permalink