webpackJsonp([10,37],{815:function(t,i,s){function n(t){s(902)}var m=s(1)(s(847),s(937),n,"data-v-3afd7c90",null);t.exports=m.exports},847:function(t,i,s){"use strict";Object.defineProperty(i,"__esModule",{value:!0}),i.default={methods:{openAlert:function(){window.alert("...")}}},t.exports=i.default},870:function(t,i,s){i=t.exports=s(795)(),i.push([t.i,".phone-viewport[data-v-3afd7c90]{height:480px;overflow:auto}.custom-list .md-icon[data-v-3afd7c90]:not(.md-primary){color:rgba(0,0,0,.26)}",""])},902:function(t,i,s){var n=s(870);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);s(796)("56e2dc7f",n,!0)},937: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 its 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),t._v(" "),s("md-table",{slot:"events"},[s("md-table-header",[s("md-table-row",[s("md-table-head",[t._v("Name")]),t._v(" "),s("md-table-head",[t._v("Value")]),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("click")]),t._v(" "),s("md-table-cell",[t._v("Receive the click event")]),t._v(" "),s("md-table-cell",[t._v("Triggered when an item is clicked.")])],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":"Multiple Options"}},[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",{on:{click:t.openAlert}},[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",{slot:"code"},[s("code-block",{attrs:{lang:"xml"}},[t._v('\n            <div class="phone-viewport">\n                <md-toolbar md-theme="white">\n                <span class="md-title">Multiple options</span>\n                </md-toolbar>\n\n                <md-list>\n                  <md-list-item>Plain Text</md-list-item>\n                  <md-list-item target="_blank" href="https://google.com">Link</md-list-item>\n                  <md-list-item @click="openAlert">Button</md-list-item>\n                  <md-list-item>\n                      <router-link to="/components/list">Router View</router-link>\n                  </md-list-item>\n                </md-list>\n            </div>\n          ')])],1)]),t._v(" "),s("example-box",{attrs:{"card-title":"Expand List"}},[s("div",{slot:"demo"},[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>Plain Text</md-list-item>\n                <md-list-item target="_blank" href="https://google.com">Link</md-list-item>\n                <md-list-item @click="openAlert">Button</md-list-item>\n                <md-list-item>\n                  <router-link to="/components/list">Router View</router-link>\n                </md-list-item>\n              </md-list>\n            </div>\n\n            <div class="phone-viewport">\n                <md-toolbar md-theme="white">\n                <span class="md-title">Single Expand</span>\n                </md-toolbar>\n\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\n            <div class="phone-viewport">\n                <md-toolbar md-theme="white">\n                <span class="md-title">Multiple Expand</span>\n                </md-toolbar>\n\n                <md-list>\n                <md-list-item md-expand-multiple>\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 md-expand-multiple>\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 md-expand-multiple>\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\n            <div class="phone-viewport">\n              <md-list>\n                <md-list-item md-expand-multiple>\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 md-expand-multiple>\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 md-expand-multiple>\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:[]}}});