vue-material/releases/v0.7.0/subheader.f0a1356a.js

webpackJsonp([31,34],{485:function(t,n,a){var s=a(0)(null,a(545),null,null);t.exports=s.exports},545:function(t,n){t.exports={render:function(){var t=this,n=t.$createElement,a=t._self._c||n;return a("page-content",{attrs:{"page-title":"Components - Subheader"}},[a("docs-component",[a("div",{slot:"description"},[a("p",[t._v("Subheaders may be displayed inline with tiles or associated with content. They are typically related to filtering or sorting criteria.")]),t._v(" "),a("p",[t._v("The following classes can be applied to change the color palette:")]),t._v(" "),a("ul",{staticClass:"md-body-2"},[a("li",[a("code",[t._v("md-primary")])]),t._v(" "),a("li",[a("code",[t._v("md-accent")])]),t._v(" "),a("li",[a("code",[t._v("md-warn")])])])]),t._v(" "),a("div",{slot:"api"},[a("api-table",{attrs:{name:"md-subheader"}},[a("md-table",{slot:"classes"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[t._v("Name")]),t._v(" "),a("md-table-head",[t._v("Description")])],1)],1),t._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[t._v("md-inset")]),t._v(" "),a("md-table-cell",[t._v("Add a padding to the left of the subheader to follow inset lists")])],1)],1)],1)],1)],1),t._v(" "),a("div",{slot:"example"},[a("example-box",{attrs:{"card-title":"Default"}},[a("div",{slot:"demo"},[a("div",{staticClass:"phone-viewport"},[a("md-list",[a("md-subheader",[t._v("Navigation")]),t._v(" "),a("md-list-item",[a("md-icon",[t._v("move_to_inbox")]),t._v(" "),a("span",[t._v("Inbox")])],1),t._v(" "),a("md-list-item",[a("md-icon",[t._v("send")]),t._v(" "),a("span",[t._v("Outbox")])],1),t._v(" "),a("md-list-item",[a("md-icon",[t._v("delete")]),t._v(" "),a("span",[t._v("Trash")])],1),t._v(" "),a("md-list-item",[a("md-icon",[t._v("error")]),t._v(" "),a("span",[t._v("Spam")]),t._v(" "),a("md-divider",{staticClass:"md-inset"})],1),t._v(" "),a("md-subheader",[t._v("Contacts")]),t._v(" "),a("md-list-item",[a("md-avatar",[a("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})]),t._v(" "),a("span",[t._v("Abbey Christansen")]),t._v(" "),a("md-button",{staticClass:"md-icon-button md-list-action"},[a("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),a("md-list-item",[a("md-avatar",[a("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})]),t._v(" "),a("span",[t._v("Alex Nelson")]),t._v(" "),a("md-button",{staticClass:"md-icon-button md-list-action"},[a("md-icon",{staticClass:"md-primary"},[t._v("chat_bubble")])],1)],1),t._v(" "),a("md-list-item",[a("md-avatar",[a("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})]),t._v(" "),a("span",[t._v("Mary Johnson")]),t._v(" "),a("md-button",{staticClass:"md-icon-button md-list-action"},[a("md-icon",[t._v("chat_bubble")])],1)],1)],1)],1),t._v(" "),a("div",{staticClass:"phone-viewport"},[a("md-list",{staticClass:"custom-list md-triple-line"},[a("md-subheader",{staticClass:"md-inset"},[t._v("Today")]),t._v(" "),a("md-list-item",[a("md-avatar",[a("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})]),t._v(" "),a("div",{staticClass:"md-list-text-container"},[a("span",[t._v("Ali Connors")]),t._v(" "),a("span",[t._v("Brunch this weekend?")]),t._v(" "),a("p",[t._v("I'll be in your neighborhood doing errands...")])]),t._v(" "),a("md-button",{staticClass:"md-icon-button md-list-action"},[a("md-icon",{staticClass:"md-primary"},[t._v("star")])],1),t._v(" "),a("md-divider",{staticClass:"md-inset"})],1),t._v(" "),a("md-list-item",[a("md-avatar",[a("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})]),t._v(" "),a("div",{staticClass:"md-list-text-container"},[a("span",[t._v("me, Scott, Jennifer")]),t._v(" "),a("span",[t._v("Summer BBQ")]),t._v(" "),a("p",[t._v("Wish I could come, but I'm out of town ...")])]),t._v(" "),a("md-button",{staticClass:"md-icon-button md-list-action"},[a("md-icon",[t._v("star_border")])],1),t._v(" "),a("md-divider",{staticClass:"md-inset"})],1),t._v(" "),a("md-list-item",[a("md-avatar",[a("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})]),t._v(" "),a("div",{staticClass:"md-list-text-container"},[a("span",[t._v("Sandra Adams")]),t._v(" "),a("span",[t._v("Oui oui")]),t._v(" "),a("p",[t._v("Do you have Paris recommendations ...")])]),t._v(" "),a("md-button",{staticClass:"md-icon-button md-list-action"},[a("md-icon",[t._v("star_border")])],1),t._v(" "),a("md-divider",{staticClass:"md-inset"})],1),t._v(" "),a("md-list-item",[a("md-avatar",[a("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})]),t._v(" "),a("div",{staticClass:"md-list-text-container"},[a("span",[t._v("Trevor Hansen")]),t._v(" "),a("span",[t._v("Order confirmation")]),t._v(" "),a("p",[t._v("Thank you for your recent order from ...")])]),t._v(" "),a("md-button",{staticClass:"md-icon-button md-list-action"},[a("md-icon",[t._v("star_border")])],1),t._v(" "),a("md-divider",{staticClass:"md-inset"})],1)],1)],1)]),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n            <div class="phone-viewport">\n              <md-list>\n                <md-subheader>Navigation</md-subheader>\n\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>Outbox</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-subheader>Contacts</md-subheader>\n\n                <md-list-item>\n                  <md-avatar>\n                    <img src="assets/avatar-2.jpg" 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="assets/avatar-2.jpg" 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="assets/avatar-2.jpg" 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="custom-list md-triple-line">\n                <md-subheader class="md-inset">Today</md-subheader>\n\n                <md-list-item>\n                  <md-avatar>\n                    <img src="assets/avatar-2.jpg" 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="assets/avatar-2.jpg" 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="assets/avatar-2.jpg" 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="assets/avatar-2.jpg" 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)])],1)])],1)},staticRenderFns:[]}}});