vue-material/dist/docs/list.817a09c7.js

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("Ad
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