vue-material/dist/docs/3.24b8259b.js

webpackJsonp([3,27,29],{99:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={methods:{toggleLeftSidenav:function(){this.$refs.leftSidenav.toggle()},toggleRightSidenav:function(){this.$refs.rightSidenav.toggle()},closeRightSidenav:function(){this.$refs.rightSidenav.close()},open:function(e){console.log("Opened: "+e)},close:function(e){console.log("Closed: "+e)}}},e.exports=t.default},239:function(e,t,n){t=e.exports=n(1)(),t.push([e.id,".phone-viewport p[data-v-70fc7701]{padding:8px 16px}",""])},320:function(e,t,n){var o,d;n(239),o=n(99);var i=n(448);d=o=o||{},"object"!=typeof o.default&&"function"!=typeof o.default||(d=o=o.default),"function"==typeof d&&(d=d.options),d.render=i.render,d.staticRenderFns=i.staticRenderFns,d._scopeId="data-v-70fc7701",e.exports=o},448:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("page-content",{attrs:{"page-title":"Components - Sidenav"}},[n("docs-component",[n("div",{slot:"description"},[n("p",[e._v("The sidenav spans the height of the screen, with everything behind it visible but darkened by a backdrop.")])]),e._v(" "),n("div",{slot:"api"},[n("api-table",{attrs:{name:"md-sidenav"}},[n("md-table",{slot:"classes"},[n("md-table-header",[n("md-table-row",[n("md-table-head",[e._v("Name")]),e._v(" "),n("md-table-head",[e._v("Description")])],1)],1),e._v(" "),n("md-table-body",[n("md-table-row",[n("md-table-cell",[e._v("md-left")]),e._v(" "),n("md-table-cell",[e._v("Display the sidenav on the left of parent")])],1),e._v(" "),n("md-table-row",[n("md-table-cell",[e._v("md-right")]),e._v(" "),n("md-table-cell",[e._v("Display the sidenav on the right of parent")])],1),e._v(" "),n("md-table-row",[n("md-table-cell",[e._v("md-fixed")]),e._v(" "),n("md-table-cell",[e._v("Apply position fixed")])],1)],1)],1),e._v(" "),n("md-table",{slot:"events"},[n("md-table-header",[n("md-table-row",[n("md-table-head",[e._v("Name")]),e._v(" "),n("md-table-head",[e._v("Value")]),e._v(" "),n("md-table-head",[e._v("Description")])],1)],1),e._v(" "),n("md-table-body",[n("md-table-row",[n("md-table-cell",[e._v("open")]),e._v(" "),n("md-table-cell",[e._v("None")]),e._v(" "),n("md-table-cell",[e._v("Triggered when the sidenav starts to open.")])],1),e._v(" "),n("md-table-row",[n("md-table-cell",[e._v("close")]),e._v(" "),n("md-table-cell",[e._v("None")]),e._v(" "),n("md-table-cell",[e._v("Triggered when the sidenav starts to close.")])],1)],1)],1),e._v(" "),n("md-table",{slot:"methods"},[n("md-table-header",[n("md-table-row",[n("md-table-head",[e._v("Name")]),e._v(" "),n("md-table-head",[e._v("Description")])],1)],1),e._v(" "),n("md-table-body",[n("md-table-row",[n("md-table-cell",[e._v("open")]),e._v(" "),n("md-table-cell",[e._v("Open the sidenav.")])],1),e._v(" "),n("md-table-row",[n("md-table-cell",[e._v("close")]),e._v(" "),n("md-table-cell",[e._v("Close the sidenav.")])],1),e._v(" "),n("md-table-row",[n("md-table-cell",[e._v("toggle")]),e._v(" "),n("md-table-cell",[e._v("Toggle the sidenav.")])],1)],1)],1)],1)],1),e._v(" "),n("div",{slot:"example"},[n("example-box",{attrs:{"card-title":"Default"}},[n("div",{slot:"demo"},[n("div",{staticClass:"phone-viewport"},[n("md-toolbar",[n("md-button",{staticClass:"md-icon-button",on:{click:e.toggleLeftSidenav}},[n("md-icon",[e._v("menu")])],1),e._v(" "),n("h2",{staticClass:"md-title"},[e._v("My App")])],1),e._v(" "),n("div",[n("md-button",{staticClass:"md-raised md-accent",on:{click:e.toggleRightSidenav}},[e._v("Toggle right")]),e._v(" "),n("p",[e._v("Open console to see the events")])],1),e._v(" "),n("md-sidenav",{ref:"leftSidenav",staticClass:"md-left",on:{open:function(t){e.open("Left")},close:function(t){e.close("Left")}}},[n("md-toolbar",{staticClass:"md-large"},[n("div",{staticClass:"md-toolbar-container"},[n("h3",{staticClass:"md-title"},[e._v("Sidenav content")])])]),e._v(" "),n("p",[e._v("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!")])],1),e._v(" "),n("md-sidenav",{ref:"rightSidenav",staticClass:"md-right",on:{open:function(t){e.open("Right")},close:function(t){e.close("Right")}}},[n("md-toolbar",[n("div",{staticClass:"md-toolbar-container"},[n("h3",{staticClass:"md-title"},[e._v("Sidenav content")])])]),e._v(" "),n("md-button",{staticClass:"md-raised md-accent",on:{click:e.closeRightSidenav}},[e._v("Close")])],1)],1)]),e._v(" "),n("div",{slot:"code"},[n("code-block",{attrs:{lang:"xml"}},[e._v('\n            <div class="phone-viewport">\n              <md-toolbar>\n                <md-button class="md-icon-button" @click="toggleLeftSidenav">\n                  <md-icon>menu</md-icon>\n                </md-button>\n\n                <h2 class="md-title">My App</h2>\n              </md-toolbar>\n\n              <div>\n                <md-button class="md-raised md-accent" @click="toggleRightSidenav">Toggle right</md-button>\n                <p>Open console to see the events</p>\n              </div>\n\n              <md-sidenav class="md-left" ref="leftSidenav" @open="open(\'Left\')" @close="close(\'Left\')">\n                <md-toolbar class="md-large">\n                  <div class="md-toolbar-container">\n                    <h3 class="md-title">Sidenav content</h3>\n                  </div>\n                </md-toolbar>\n\n                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!</p>\n              </md-sidenav>\n\n              <md-sidenav class="md-right" ref="rightSidenav" @open="open(\'Right\')" @close="close(\'Right\')">\n                <md-toolbar>\n                  <div class="md-toolbar-container">\n                    <h3 class="md-title">Sidenav content</h3>\n                  </div>\n                </md-toolbar>\n\n                <md-button class="md-raised md-accent" @click="closeRightSidenav">Close</md-button>\n              </md-sidenav>\n            </div>\n          ')]),e._v(" "),n("code-block",{attrs:{lang:"javascript"}},[e._v("\n            export default {\n              methods: {\n                toggleLeftSidenav() {\n                  this.$refs.leftSidenav.toggle();\n                },\n                toggleRightSidenav() {\n                  this.$refs.rightSidenav.toggle();\n                },\n                closeRightSidenav() {\n                  this.$refs.rightSidenav.close();\n                },\n                open(ref) {\n                  console.log('Opened: ' + ref);\n                },\n                close(ref) {\n                  console.log('Closed: ' + ref);\n                }\n              }\n            };\n          ")])],1)])],1)])],1)},staticRenderFns:[]}}});