-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathlist.93bce61c.js
2 lines (2 loc) · 32.2 KB
/
list.93bce61c.js
1
2
webpackJsonp([9,34],{476:function(t,i,s){s(595);var n=s(0)(s(505),s(559),"data-v-3afd7c90",null);t.exports=n.exports},505:function(t,i,s){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.default={methods:{openAlert:function(){window.alert("...")}}},t.exports=i.default},527:function(t,i,s){i=t.exports=s(4)(),i.push([t.i,".phone-viewport[data-v-3afd7c90]{height:480px}.custom-list .md-icon[data-v-3afd7c90]:not(.md-primary){color:rgba(0,0,0,.26)}",""])},559:function(t,i){t.exports={render:function(){var t=this,i=t.$createElement,s=t._self._c||i;return s("page-content",{attrs:{"page-title":"Components - List"}},[s("docs-component",[s("div",{slot:"description"},[s("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(" "),s("p",[t._v("The "),s("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(" "),s("ul",[s("li",[s("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(" "),s("li",[s("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(" "),s("li",[s("code",[t._v(".md-divider")]),t._v(": Add a horizontal line between list items.")])])]),t._v(" "),s("div",{slot:"api"},[s("api-table",{attrs:{name:"md-list"}},[s("md-table",{slot:"classes"},[s("md-table-header",[s("md-table-row",[s("md-table-head",[t._v("Name")]),t._v(" "),s("md-table-head",[t._v("Description")])],1)],1),t._v(" "),s("md-table-body",[s("md-table-row",[s("md-table-cell",[t._v("md-dense")]),t._v(" "),s("md-table-cell",[t._v("Make the list dense and compact")])],1),t._v(" "),s("md-table-row",[s("md-table-cell",[t._v("md-double-line")]),t._v(" "),s("md-table-cell",[t._v("Make list items to support double line")])],1),t._v(" "),s("md-table-row",[s("md-table-cell",[t._v("md-triple-line")]),t._v(" "),s("md-table-cell",[t._v("Make list items to support triple line")])],1)],1)],1)],1),t._v(" "),s("api-table",{attrs:{name:"md-list-item"}},[s("p",[t._v("Display a single item inside lists")]),t._v(" "),s("md-table",{slot:"properties"},[s("md-table-header",[s("md-table-row",[s("md-table-head",[t._v("Name")]),t._v(" "),s("md-table-head",[t._v("Type")]),t._v(" "),s("md-table-head",[t._v("Description")])],1)],1),t._v(" "),s("md-table-body",[s("md-table-row",[s("md-table-cell",[t._v("href")]),t._v(" "),s("md-table-cell",[s("code",[t._v("String")])]),t._v(" "),s("md-table-cell",[t._v("The link that the item should redirect to.")])],1),t._v(" "),s("md-table-row",[s("md-table-cell",[t._v("target")]),t._v(" "),s("md-table-cell",[s("code",[t._v("String")])]),t._v(" "),s("md-table-cell",[t._v("The target for opening the href link. Normally used for "),s("code",[t._v("_blank")]),t._v(" cases.")])],1),t._v(" "),s("md-table-row",[s("md-table-cell",[t._v("disabled")]),t._v(" "),s("md-table-cell",[s("code",[t._v("Boolean")])]),t._v(" "),s("md-table-cell",[t._v("Disable the item and prevent his actions. Default "),s("code",[t._v("false")])])],1),t._v(" "),s("md-table-row",[s("md-table-cell",[t._v("md-expand-multiple")]),t._v(" "),s("md-table-cell",[s("code",[t._v("Boolean")])]),t._v(" "),s("md-table-cell",[t._v("Allow multiple items be expanded in same time in md-list. Default "),s("code",[t._v("false")])])],1)],1)],1),t._v(" "),s("md-table",{slot:"classes"},[s("md-table-header",[s("md-table-row",[s("md-table-head",[t._v("Name")]),t._v(" "),s("md-table-head",[t._v("Description")])],1)],1),t._v(" "),s("md-table-body",[s("md-table-row",[s("md-table-cell",[t._v("md-inset")]),t._v(" "),s("md-table-cell",[t._v("Add an empty space on the left of the table. "),s("br"),t._v("Useful to show list items without icons aligned with another that have an icon.")])],1)],1)],1)],1),t._v(" "),s("api-table",{attrs:{name:"md-list-expand"}},[s("p",[t._v("Create a expansion accordion automatically inside lists")]),t._v(" "),s("p",[t._v("No options available")])])],1),t._v(" "),s("div",{slot:"example"},[s("example-box",{attrs:{"card-title":"Single Line"}},[s("div",{slot:"demo"},[s("div",{staticClass:"phone-viewport"},[s("md-list",[s("md-list-item",[s("md-icon",[t._v("move_to_inbox")]),t._v(" "),s("span",[t._v("Inbox")])],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("send")]),t._v(" "),s("span",[t._v("Sent Mail")])],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("delete")]),t._v(" "),s("span",[t._v("Trash")])],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("error")]),t._v(" "),s("span",[t._v("Spam")]),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),s("span",[t._v("Abbey Christansen")]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),s("span",[t._v("Alex Nelson")]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),s("span",[t._v("Mary Johnson")]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("chat_bubble")])],1)],1)],1)],1),t._v(" "),s("div",{staticClass:"phone-viewport"},[s("md-list",{staticClass:"md-dense"},[s("md-list-item",[s("md-icon",[t._v("move_to_inbox")]),t._v(" "),s("span",[t._v("Inbox")])],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("send")]),t._v(" "),s("span",[t._v("Sent Mail")])],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("delete")]),t._v(" "),s("span",[t._v("Trash")])],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("error")]),t._v(" "),s("span",[t._v("Spam")]),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),s("span",[t._v("Abbey Christansen")]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),s("span",[t._v("Alex Nelson")]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),s("span",[t._v("Mary Johnson")]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("chat_bubble")])],1)],1)],1)],1)]),t._v(" "),s("div",{slot:"code"},[s("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(" "),s("example-box",{attrs:{"card-title":"Double Line"}},[s("div",{slot:"demo"},[s("div",{staticClass:"phone-viewport"},[s("md-list",{staticClass:"md-double-line"},[s("md-list-item",[s("md-icon",{staticClass:"md-primary"},[t._v("phone")]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("(650) 555-1234")]),t._v(" "),s("span",[t._v("Mobile")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("sms")])],1)],1),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("(650) 555-1234")]),t._v(" "),s("span",[t._v("Mobile")])]),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-icon",{staticClass:"md-primary"},[t._v("email")]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("aliconnors@example.com")]),t._v(" "),s("span",[t._v("Personal")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("sms")])],1)],1),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("ali_connors@example.com")]),t._v(" "),s("span",[t._v("Work")])])])],1)],1),t._v(" "),s("div",{staticClass:"phone-viewport"},[s("md-list",{staticClass:"md-double-line md-dense"},[s("md-list-item",[s("md-icon",{staticClass:"md-primary"},[t._v("phone")]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("(650) 555-1234")]),t._v(" "),s("span",[t._v("Mobile")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("sms")])],1)],1),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("(650) 555-1234")]),t._v(" "),s("span",[t._v("Mobile")])]),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-icon",{staticClass:"md-primary"},[t._v("email")]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("aliconnors@example.com")]),t._v(" "),s("span",[t._v("Personal")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("sms")])],1)],1),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("ali_connors@example.com")]),t._v(" "),s("span",[t._v("Work")])])])],1)],1)]),t._v(" "),s("div",{slot:"code"},[s("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(" "),s("example-box",{attrs:{"card-title":"Triple Line"}},[s("div",{slot:"demo"},[s("div",{staticClass:"phone-viewport"},[s("md-list",{staticClass:"custom-list md-triple-line"},[s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("Ali Connors")]),t._v(" "),s("span",[t._v("Brunch this weekend?")]),t._v(" "),s("p",[t._v("I'll be in your neighborhood doing errands...")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",{staticClass:"md-primary"},[t._v("star")])],1),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("me, Scott, Jennifer")]),t._v(" "),s("span",[t._v("Summer BBQ")]),t._v(" "),s("p",[t._v("Wish I could come, but I'm out of town ...")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("star_border")])],1),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("Sandra Adams")]),t._v(" "),s("span",[t._v("Oui oui")]),t._v(" "),s("p",[t._v("Do you have Paris recommendations ...")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("star_border")])],1),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/8",alt:"People"}})]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("Trevor Hansen")]),t._v(" "),s("span",[t._v("Order confirmation")]),t._v(" "),s("p",[t._v("Thank you for your recent order from ...")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("star_border")])],1),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1)],1)],1),t._v(" "),s("div",{staticClass:"phone-viewport"},[s("md-list",{staticClass:"custom-list md-triple-line md-dense"},[s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/1",alt:"People"}})]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("Ali Connors")]),t._v(" "),s("span",[t._v("Brunch this weekend?")]),t._v(" "),s("p",[t._v("I'll be in your neighborhood doing errands...")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",{staticClass:"md-primary"},[t._v("star")])],1),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/6",alt:"People"}})]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("me, Scott, Jennifer")]),t._v(" "),s("span",[t._v("Summer BBQ")]),t._v(" "),s("p",[t._v("Wish I could come, but I'm out of town ...")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("star_border")])],1),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/5",alt:"People"}})]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("Sandra Adams")]),t._v(" "),s("span",[t._v("Oui oui")]),t._v(" "),s("p",[t._v("Do you have Paris recommendations ...")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("star_border")])],1),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1),t._v(" "),s("md-list-item",[s("md-avatar",[s("img",{attrs:{src:"https://placeimg.com/40/40/people/8",alt:"People"}})]),t._v(" "),s("div",{staticClass:"md-list-text-container"},[s("span",[t._v("Trevor Hansen")]),t._v(" "),s("span",[t._v("Order confirmation")]),t._v(" "),s("p",[t._v("Thank you for your recent order from ...")])]),t._v(" "),s("md-button",{staticClass:"md-icon-button md-list-action"},[s("md-icon",[t._v("star_border")])],1),t._v(" "),s("md-divider",{staticClass:"md-inset"})],1)],1)],1)]),t._v(" "),s("div",{slot:"code"},[s("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(" "),s("example-box",{attrs:{"card-title":"Controls"}},[s("div",{slot:"demo"},[s("div",{staticClass:"phone-viewport"},[s("md-toolbar",{attrs:{"md-theme":"white"}},[s("span",{staticClass:"md-title"},[t._v("Multiple options")])]),t._v(" "),s("md-list",[s("md-list-item",[t._v("Plain Text")]),t._v(" "),s("md-list-item",{attrs:{target:"_blank",href:"https://google.com"}},[t._v("Link")]),t._v(" "),s("md-list-item",{nativeOn:{click:function(i){t.openAlert(i)}}},[t._v("Button")]),t._v(" "),s("md-list-item",[s("router-link",{attrs:{to:"/components/list"}},[t._v("Router View")])],1)],1)],1),t._v(" "),s("div",{staticClass:"phone-viewport"},[s("md-toolbar",{attrs:{"md-theme":"white"}},[s("span",{staticClass:"md-title"},[t._v("Single Expand")])]),t._v(" "),s("md-list",[s("md-list-item",[s("md-icon",[t._v("whatshot")]),t._v(" "),s("span",[t._v("News")]),t._v(" "),s("md-list-expand",[s("md-list",[s("md-list-item",{staticClass:"md-inset"},[t._v("World")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Americas")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Europe")])],1)],1)],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("videogame_asset")]),t._v(" "),s("span",[t._v("Games")]),t._v(" "),s("md-list-expand",[s("md-list",[s("md-list-item",{staticClass:"md-inset"},[t._v("Console")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("PC")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Phone")])],1)],1)],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("video_library")]),t._v(" "),s("span",[t._v("Video")]),t._v(" "),s("md-list-expand",[s("md-list",[s("md-list-item",{staticClass:"md-inset"},[t._v("Humor")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Music")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Movies")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("TV Shows")])],1)],1)],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("shopping_basket")]),t._v(" "),s("span",[t._v("Shop")])],1)],1)],1),t._v(" "),s("div",{staticClass:"phone-viewport"},[s("md-toolbar",{attrs:{"md-theme":"white"}},[s("span",{staticClass:"md-title"},[t._v("Multiple Expand")])]),t._v(" "),s("md-list",[s("md-list-item",{attrs:{"md-expand-multiple":""}},[s("md-icon",[t._v("whatshot")]),t._v(" "),s("span",[t._v("News")]),t._v(" "),s("md-list-expand",[s("md-list",[s("md-list-item",{staticClass:"md-inset"},[t._v("World")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Americas")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Europe")])],1)],1)],1),t._v(" "),s("md-list-item",{attrs:{"md-expand-multiple":""}},[s("md-icon",[t._v("videogame_asset")]),t._v(" "),s("span",[t._v("Games")]),t._v(" "),s("md-list-expand",[s("md-list",[s("md-list-item",{staticClass:"md-inset"},[t._v("Console")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("PC")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Phone")])],1)],1)],1),t._v(" "),s("md-list-item",{attrs:{"md-expand-multiple":""}},[s("md-icon",[t._v("video_library")]),t._v(" "),s("span",[t._v("Video")]),t._v(" "),s("md-list-expand",[s("md-list",[s("md-list-item",{staticClass:"md-inset"},[t._v("Humor")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Music")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("Movies")]),t._v(" "),s("md-list-item",{staticClass:"md-inset"},[t._v("TV Shows")])],1)],1)],1),t._v(" "),s("md-list-item",[s("md-icon",[t._v("shopping_basket")]),t._v(" "),s("span",[t._v("Shop")])],1)],1)],1)]),t._v(" "),s("div",{slot:"code"},[s("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:[]}},595:function(t,i,s){var n=s(527);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);s(5)("5dd515fe",n,!0)}});