vue-material/menu.46f044e5.js

webpackJsonp([20,37],{816:function(e,m,t){function n(e){t(913)}var d=t(1)(null,t(952),n,"data-v-7268ce5e",null);e.exports=d.exports},880:function(e,m,t){m=e.exports=t(795)(),m.push([e.i,".md-menu[data-v-7268ce5e]{margin-right:36px}.author-card[data-v-7268ce5e]{padding:8px 16px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.author-card .md-avatar[data-v-7268ce5e]{margin-right:16px}.author-card .author-card-info[data-v-7268ce5e]{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex:1;flex:1}.author-card span[data-v-7268ce5e]{font-size:16px}.author-card .author-card-links[data-v-7268ce5e]{display:-ms-flexbox;display:flex}.author-card .author-card-links a+a[data-v-7268ce5e]{margin-left:8px}",""])},913:function(e,m,t){var n=t(880);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);t(796)("7f35223e",n,!0)},952:function(e,m){e.exports={render:function(){var e=this,m=e.$createElement,t=e._self._c||m;return t("page-content",{attrs:{"page-title":"Components - Menu"}},[t("docs-component",[t("div",{slot:"description"},[t("p",[e._v("Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.")]),e._v(" "),t("p",[e._v("You can create menus with selection items or show rich content.")]),e._v(" "),t("p",[e._v("You will need an element with the "),t("code",[e._v("md-menu-trigger")]),e._v(" attribute inside the menu or to use the menu core methods, like on the last example.")])]),e._v(" "),t("div",{slot:"api"},[t("api-table",{attrs:{name:"md-menu"}},[t("md-table",{slot:"properties"},[t("md-table-header",[t("md-table-row",[t("md-table-head",[e._v("Name")]),e._v(" "),t("md-table-head",[e._v("Type")]),e._v(" "),t("md-table-head",[e._v("Description")])],1)],1),e._v(" "),t("md-table-body",[t("md-table-row",[t("md-table-cell",[e._v("md-size")]),e._v(" "),t("md-table-cell",[t("code",[e._v("Number")])]),e._v(" "),t("md-table-cell",[e._v("Sets the size of the menu content. From 0 to 7. "),t("br"),e._v("Default: "),t("code",[e._v("0")])])],1),e._v(" "),t("md-table-row",[t("md-table-cell",[e._v("md-direction")]),e._v(" "),t("md-table-cell",[t("code",[e._v("String")])]),e._v(" "),t("md-table-cell",[e._v("Sets the direction of the menu content. "),t("br"),e._v(" Possibilities: "),t("code",[e._v("bottom right")]),e._v(" | "),t("code",[e._v("bottom left")]),e._v(" | "),t("code",[e._v("top right")]),e._v(" | "),t("code",[e._v("top right")]),t("br"),e._v("Default: "),t("code",[e._v("bottom right")])])],1),e._v(" "),t("md-table-row",[t("md-table-cell",[e._v("md-align-trigger")]),e._v(" "),t("md-table-cell",[t("code",[e._v("Boolean")])]),e._v(" "),t("md-table-cell",[e._v("Align the menu content to do not cover menu trigger. "),t("br"),e._v("Default: "),t("code",[e._v("false")])])],1),e._v(" "),t("md-table-row",[t("md-table-cell",[e._v("md-offset-x")]),e._v(" "),t("md-table-cell",[t("code",[e._v("Number")])]),e._v(" "),t("md-table-cell",[e._v("Set the menu content offset margin horizontally. "),t("br"),e._v("Default: "),t("code",[e._v("0")])])],1),e._v(" "),t("md-table-row",[t("md-table-cell",[e._v("md-offset-y")]),e._v(" "),t("md-table-cell",[t("code",[e._v("Number")])]),e._v(" "),t("md-table-cell",[e._v("Set the menu content offset margin vertically. "),t("br"),e._v("Default: "),t("code",[e._v("0")])])],1),e._v(" "),t("md-table-row",[t("md-table-cell",[e._v("md-close-on-select")]),e._v(" "),t("md-table-cell",[t("code",[e._v("Boolean")])]),e._v(" "),t("md-table-cell",[e._v("Close menu content upon mouse click on its menu items. "),t("br"),e._v("Default: "),t("code",[e._v("true")])])],1)],1)],1),e._v(" "),t("md-table",{slot:"events"},[t("md-table-header",[t("md-table-row",[t("md-table-head",[e._v("Name")]),e._v(" "),t("md-table-head",[e._v("Value")]),e._v(" "),t("md-table-head",[e._v("Description")])],1)],1),e._v(" "),t("md-table-body",[t("md-table-row",[t("md-table-cell",[e._v("open")]),e._v(" "),t("md-table-cell",[e._v("None")]),e._v(" "),t("md-table-cell",[e._v("Triggered when the menu starts to open.")])],1),e._v(" "),t("md-table-row",[t("md-table-cell",[e._v("close")]),e._v(" "),t("md-table-cell",[e._v("None")]),e._v(" "),t("md-table-cell",[e._v("Triggered when the menu starts to close.")])],1)],1)],1),e._v(" "),t("md-table",{slot:"methods"},[t("md-table-header",[t("md-table-row",[t("md-table-head",[e._v("Name")]),e._v(" "),t("md-table-head",[e._v("Description")])],1)],1),e._v(" "),t("md-table-body",[t("md-table-row",[t("md-table-cell",[e._v("open")]),e._v(" "),t("md-table-cell",[e._v("Open the menu.")])],1),e._v(" "),t("md-table-row",[t("md-table-cell",[e._v("close")]),e._v(" "),t("md-table-cell",[e._v("Close the menu.")])],1)],1)],1)],1),e._v(" "),t("api-table",{attrs:{name:"md-menu-content"}},[t("p",[e._v("Displays the content of a menu.")]),e._v(" "),t("p",[e._v("No options available")])]),e._v(" "),t("api-table",{attrs:{name:"md-menu-item"}},[t("p",[e._v("Displays a single item inside a menu.")]),e._v(" "),t("div",{slot:"properties"},[t("md-table",[t("md-table-header",[t("md-table-row",[t("md-table-head",[e._v("Name")]),e._v(" "),t("md-table-head",[e._v("Type")]),e._v(" "),t("md-table-head",[e._v("Description")])],1)],1),e._v(" "),t("md-table-body",[t("md-table-row",[t("md-table-cell",[e._v("disabled")]),e._v(" "),t("md-table-cell",[t("code",[e._v("Boolean")])]),e._v(" "),t("md-table-cell",[e._v("Disable the button and prevent its actions. Default "),t("code",[e._v("false")])])],1)],1)],1)],1),e._v(" "),t("md-table",{slot:"events"},[t("md-table-header",[t("md-table-row",[t("md-table-head",[e._v("Name")]),e._v(" "),t("md-table-head",[e._v("Value")]),e._v(" "),t("md-table-head",[e._v("Description")])],1)],1),e._v(" "),t("md-table-body",[t("md-table-row",[t("md-table-cell",[e._v("selected")]),e._v(" "),t("md-table-cell",[e._v("Receives the "),t("code",[e._v("$event")])]),e._v(" "),t("md-table-cell",[e._v("Triggered when the item receives a click.")])],1)],1)],1)],1)],1),e._v(" "),t("div",{slot:"example"},[t("example-box",{attrs:{"card-title":"Directions"}},[t("div",{slot:"demo"},[t("md-menu",[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Bottom Right")]),e._v(" "),t("md-menu-content",[t("md-menu-item",{attrs:{href:"http://google.com"}},[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-direction":"bottom left"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Bottom Left")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",{attrs:{disabled:""}},[e._v("My Item 3")]),e._v(" "),t("md-menu-item",[e._v("My Item 4")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-direction":"top left"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Top Left")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-direction":"top right"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Top Right")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1)],1),e._v(" "),t("div",{slot:"code"},[t("code-block",{attrs:{lang:"xml"}},[e._v('\n            <md-menu>\n              <md-button md-menu-trigger>Bottom Right</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-direction="bottom left">\n              <md-button md-menu-trigger>Bottom Left</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item disabled>My Item 3</md-menu-item>\n                <md-menu-item>My Item 4</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-direction="top left">\n              <md-button md-menu-trigger>Top Left</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-direction="top right">\n              <md-button md-menu-trigger>Top Right</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n          ')])],1)]),e._v(" "),t("example-box",{attrs:{"card-title":"Alignments"}},[t("div",{slot:"demo"},[t("md-menu",[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Default")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-align-trigger":""}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Align trigger")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-offset-x":154,"md-offset-y":"12"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Custom offset")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1)],1),e._v(" "),t("div",{slot:"code"},[t("code-block",{attrs:{lang:"xml"}},[e._v('\n            <md-menu>\n              <md-button md-menu-trigger>Default</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-align-trigger>\n              <md-button md-menu-trigger>Align trigger</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu :md-offset-x="154" md-offset-y="12">\n              <md-button md-menu-trigger>Custom offset</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n          ')])],1)]),e._v(" "),t("example-box",{attrs:{"card-title":"Sizes"}},[t("div",{slot:"demo"},[t("md-menu",{attrs:{"md-size":"1"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Size 1")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("Item 1")]),e._v(" "),t("md-menu-item",[e._v("Item 2")]),e._v(" "),t("md-menu-item",[e._v("Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-size":"2"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Size 2")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-size":"3"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Size 3")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-size":"4"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Size 4")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-size":"5"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Size 5")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-size":"6"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Size 6")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1),e._v(" "),t("md-menu",{attrs:{"md-size":"7"}},[t("md-button",{attrs:{"md-menu-trigger":""}},[e._v("Size 7")]),e._v(" "),t("md-menu-content",[t("md-menu-item",[e._v("My Item 1")]),e._v(" "),t("md-menu-item",[e._v("My Item 2")]),e._v(" "),t("md-menu-item",[e._v("My Item 3")])],1)],1)],1),e._v(" "),t("div",{slot:"code"},[t("code-block",{attrs:{lang:"xml"}},[e._v('\n            <md-menu md-size="1">\n              <md-button md-menu-trigger>Size 1</md-button>\n\n              <md-menu-content>\n                <md-menu-item>Item 1</md-menu-item>\n                <md-menu-item>Item 2</md-menu-item>\n                <md-menu-item>Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-size="2">\n              <md-button md-menu-trigger>Size 2</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-size="3">\n              <md-button md-menu-trigger>Size 3</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-size="4">\n              <md-button md-menu-trigger>Size 4</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-size="5">\n              <md-button md-menu-trigger>Size 5</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-size="6">\n              <md-button md-menu-trigger>Size 6</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-size="7">\n              <md-button md-menu-trigger>Size 7</md-button>\n\n              <md-menu-content>\n                <md-menu-item>My Item 1</md-menu-item>\n                <md-menu-item>My Item 2</md-menu-item>\n                <md-menu-item>My Item 3</md-menu-item>\n              </md-menu-content>\n            </md-menu>\n          ')])],1)]),e._v(" "),t("example-box",{attrs:{"card-title":"Rich Content and List Icons"}},[t("div",{slot:"demo"},[t("md-menu",{ref:"menu",attrs:{"md-size":"4","md-direction":"top right"}},[t("md-button",{staticClass:"md-icon-button",attrs:{"md-menu-trigger":""}},[t("md-icon",[e._v("contacts")])],1),e._v(" "),t("md-menu-content",[t("div",{staticClass:"author-card"},[t("md-avatar",{staticClass:"md-large"},[t("img",{attrs:{src:"assets/marcosmoura.jpg",alt:"Marcos Moura"}})]),e._v(" "),t("div",{staticClass:"author-card-info"},[t("span",[e._v("Marcos Moura")]),e._v(" "),t("div",{staticClass:"author-card-links"},[t("a",{attrs:{href:"https://linkedin.com/in/marcosvmmoura",target:"_blank",rel:"noopener"}},[e._v("Linkedin")]),e._v(" "),t("a",{attrs:{href:"https://github.com/marcosmoura",target:"_blank",rel:"noopener"}},[e._v("GitHub")])])])],1)])],1),e._v(" "),t("md-menu",{attrs:{"md-size":"4"}},[t("md-button",{staticClass:"md-icon-button",attrs:{"md-menu-trigger":""}},[t("md-icon",[e._v("phone")])],1),e._v(" "),t("md-menu-content",[t("md-menu-item",[t("md-icon",[e._v("phone")]),e._v(" "),t("span",[e._v("My Item 1")])],1),e._v(" "),t("md-menu-item",[t("md-icon",[e._v("phone")]),e._v(" "),t("span",[e._v("My Item 2")])],1),e._v(" "),t("md-menu-item",[t("md-icon",[e._v("phone")]),e._v(" "),t("span",[e._v("My Item 3")])],1)],1)],1),e._v(" "),t("md-menu",{attrs:{"md-direction":"bottom left","md-size":"4"}},[t("md-button",{staticClass:"md-icon-button",attrs:{"md-menu-trigger":""}},[t("md-icon",[e._v("near_me")])],1),e._v(" "),t("md-menu-content",[t("md-menu-item",[t("span",[e._v("Find on map")]),e._v(" "),t("md-icon",[e._v("near_me")])],1),e._v(" "),t("md-menu-item",[t("span",[e._v("Call")]),e._v(" "),t("md-icon",[e._v("phone")])],1)],1)],1),e._v(" "),t("md-button",{staticClass:"md-raised md-primary",nativeOn:{click:function(m){e.$refs.menu.open(m)}}},[e._v("Open contact card")])],1),e._v(" "),t("div",{slot:"code"},[t("code-block",{attrs:{lang:"xml"}},[e._v('\n            <md-menu md-size="4" md-direction="top right" ref="menu">\n              <md-button class="md-icon-button" md-menu-trigger>\n                <md-icon>contacts</md-icon>\n              </md-button>\n\n              <md-menu-content>\n                <div class="author-card">\n                  <md-avatar class="md-large">\n                    <img src="assets/marcosmoura.jpg" alt="Marcos Moura">\n                  </md-avatar>\n\n                  <div class="author-card-info">\n                    <span>Marcos Moura</span>\n                    <div class="author-card-links">\n                      <a href="https://linkedin.com/in/marcosvmmoura" target="_blank" rel="noopener">Linkedin</a>\n                      <a href="https://github.com/marcosmoura" target="_blank" rel="noopener">GitHub</a>\n                    </div>\n                  </div>\n                </div>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-size="4">\n              <md-button class="md-icon-button" md-menu-trigger>\n                <md-icon>phone</md-icon>\n              </md-button>\n\n              <md-menu-content>\n                <md-menu-item>\n                  <md-icon>phone</md-icon>\n                  <span>My Item 1</span>\n                </md-menu-item>\n\n                <md-menu-item>\n                  <md-icon>phone</md-icon>\n                  <span>My Item 2</span>\n                </md-menu-item>\n\n                <md-menu-item>\n                  <md-icon>phone</md-icon>\n                  <span>My Item 3</span>\n                </md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-menu md-direction="bottom left" md-size="4">\n              <md-button class="md-icon-button" md-menu-trigger>\n                <md-icon>near_me</md-icon>\n              </md-button>\n\n              <md-menu-content>\n                <md-menu-item>\n                  <span>Find on map</span>\n                  <md-icon>near_me</md-icon>\n                </md-menu-item>\n\n                <md-menu-item>\n                  <span>Call</span>\n                  <md-icon>phone</md-icon>\n                </md-menu-item>\n              </md-menu-content>\n            </md-menu>\n\n            <md-button class="md-raised md-primary" @click.native="$refs.menu.open">Open contact card</md-button>\n          ')]),e._v(" "),t("code-block",{attrs:{lang:"sass"}},[e._v("\n            .author-card {\n              padding: 8px 16px;\n              display: flex;\n              align-items: center;\n\n              .md-avatar {\n                margin-right: 16px;\n              }\n\n              .author-card-info {\n                display: flex;\n                flex-flow: column;\n                flex: 1;\n              }\n\n              span {\n                font-size: 16px;\n              }\n\n              .author-card-links {\n                display: flex;\n\n                a + a {\n                  margin-left: 8px;\n                }\n              }\n            }\n          ")])],1)])],1)])],1)},staticRenderFns:[]}}});