muse-vue-ant-design-dashboard/documentation/_nuxt/ff204ad.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[31,2,3],{1179:function(t,e,n){"use strict";n.r(e);n(106),n(640);var o={props:["anchors"],data:function(){return{url:""}},beforeMount:function(){this.url=window.location.href.split("#")[0]}},r=n(81),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"page-anchor"},[n("a-anchor",{attrs:{targetOffset:80,offsetTop:85}},t._l(t.anchors,(function(title,e){return n("a-anchor-link",{key:e,attrs:{href:t.url+"#"+e,title:title}})})),1)],1)}),[],!1,null,null,null);e.default=component.exports},1180:function(t,e,n){"use strict";n.r(e);var o={inheritAttrs:!0,props:["code","lang"],data:function(){return{}},methods:{onCopy:function(t){this.$message.success({content:"Copied!"})}}},r=n(81),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"highlight-section"},[n("a-button",{directives:[{name:"clipboard",rawName:"v-clipboard:copy",value:t.code.trim(),expression:"code.trim()",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:t.onCopy,expression:"onCopy",arg:"success"}],staticClass:"btn-copy",attrs:{type:"primary",icon:"copy",size:"small"}},[t._v("Copy")]),t._v(" "),n("highlight-code",{staticStyle:{"max-height":"500px"},attrs:{lang:t.lang?t.lang:"html"}},[t._v("\n\t\t"+t._s(t.code)+"\n\t")])],1)}),[],!1,null,null,null);e.default=component.exports},1244:function(t,e,n){"use strict";n.r(e);var o={head:function(){return{title:"Dropdown | Muse Vue Ant Design Dashboard @ Creative Tim",meta:[{hid:"desDropdownription",name:"description",content:"A dropdown list."}]}},data:function(){return{anchors:{"When-To-Use":"When To Use",Basic:"Basic","Button-with-dropdown-menu":"Button with dropdown menu"},basicCode:'\n<template>\n  <a-dropdown>\n    <a class="ant-dropdown-link" @click="e => e.preventDefault()">\n      Hover me <a-icon type="down" />\n    </a>\n    <a-menu slot="overlay">\n      <a-menu-item>\n        <a href="javascript:;">1st menu item</a>\n      </a-menu-item>\n      <a-menu-item>\n        <a href="javascript:;">2nd menu item</a>\n      </a-menu-item>\n      <a-menu-item>\n        <a href="javascript:;">3rd menu item</a>\n      </a-menu-item>\n    </a-menu>\n  </a-dropdown>\n</template>',buttonCode:'\n<template>\n  <div>\n    <a-dropdown-button @click="handleButtonClick">\n      Dropdown\n      <a-menu slot="overlay" @click="handleMenuClick">\n        <a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>\n        <a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>\n        <a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>\n      </a-menu>\n    </a-dropdown-button>\n    <a-dropdown-button>\n      Dropdown\n      <a-menu slot="overlay" @click="handleMenuClick">\n        <a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>\n        <a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>\n        <a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>\n      </a-menu>\n      <a-icon slot="icon" type="user" />\n    </a-dropdown-button>\n    <a-dropdown-button disabled style="margin-left: 8px" @click="handleButtonClick">\n      Dropdown\n      <a-menu slot="overlay" @click="handleMenuClick">\n        <a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>\n        <a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>\n        <a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>\n      </a-menu>\n    </a-dropdown-button>\n    <a-dropdown>\n      <a-menu slot="overlay" @click="handleMenuClick">\n        <a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>\n        <a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>\n        <a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item>\n      </a-menu>\n      <a-button style="margin-left: 8px"> Button <a-icon type="down" /> </a-button>\n    </a-dropdown>\n  </div>\n</template>\n\n<script>\nexport default {\n  methods: {\n    handleButtonClick(e) {\n      console.log(\'click left button\', e);\n    },\n    handleMenuClick(e) {\n      console.log(\'click\', e);\n    },\n  },\n};\n<\/script>\n'}},methods:{}},r=n(81),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"page-row"},[n("div",{staticClass:"page-content"},[t._m(0),t._v(" "),n("a-divider"),t._v(" "),t._m(1),t._v(" "),n("h2",[t._v("Examples")]),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Basic"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Basic")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tThe most basic dropdown menu.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-dropdown",[n("a",{staticClass:"ant-dropdown-link",on:{click:function(t){return t.preventDefault()}}},[t._v("\n\t\t\t\t\t\t\tHover me "),n("a-icon",{attrs:{type:"down"}})],1),t._v(" "),n("a-menu",{attrs:{slot:"overlay"},slot:"overlay"},[n("a-menu-item",[n("a",{attrs:{href:"javascript:;"}},[t._v("1st menu item")])]),t._v(" "),n("a-menu-item",[n("a",{attrs:{href:"javascript:;"}},[t._v("2nd menu item")])]),t._v(" "),n("a-menu-item",[n("a",{attrs:{href:"javascript:;"}},[t._v("3rd menu item")])])],1)],1)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.basicCode}})],1),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Button-with-dropdown-menu"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Button with dropdown menu")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tA button is on the left, and a related functional menu is on the right.\n\t\t\t\t\t\tYou can set the icon property to modify the icon of right.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-dropdown-button",[t._v("\n\t\t\t\t\t\t\tDropdown\n\t\t\t\t\t\t\t"),n("a-menu",{attrs:{slot:"overlay"},slot:"overlay"},[n("a-menu-item",{key:"1"},[n("a-icon",{attrs:{type:"user"}}),t._v("1st menu item ")],1),t._v(" "),n("a-menu-item",{key:"2"},[n("a-icon",{attrs:{type:"user"}}),t._v("2nd menu item ")],1),t._v(" "),n("a-menu-item",{key:"3"},[n("a-icon",{attrs:{type:"user"}}),t._v("3rd item ")],1)],1)],1),t._v(" "),n("a-dropdown-button",[t._v("\n\t\t\t\t\t\t\tDropdown\n\t\t\t\t\t\t\t"),n("a-menu",{attrs:{slot:"overlay"},slot:"overlay"},[n("a-menu-item",{key:"1"},[n("a-icon",{attrs:{type:"user"}}),t._v("1st menu item ")],1),t._v(" "),n("a-menu-item",{key:"2"},[n("a-icon",{attrs:{type:"user"}}),t._v("2nd menu item ")],1),t._v(" "),n("a-menu-item",{key:"3"},[n("a-icon",{attrs:{type:"user"}}),t._v("3rd item ")],1)],1),t._v(" "),n("a-icon",{attrs:{slot:"icon",type:"user"},slot:"icon"})],1),t._v(" "),n("a-dropdown-button",{staticStyle:{"margin-left":"8px"},attrs:{disabled:""}},[t._v("\n\t\t\t\t\t\t\tDropdown\n\t\t\t\t\t\t\t"),n("a-menu",{attrs:{slot:"overlay"},slot:"overlay"},[n("a-menu-item",{key:"1"},[n("a-icon",{attrs:{type:"user"}}),t._v("1st menu item ")],1),t._v(" "),n("a-menu-item",{key:"2"},[n("a-icon",{attrs:{type:"user"}}),t._v("2nd menu item ")],1),t._v(" "),n("a-menu-item",{key:"3"},[n("a-icon",{attrs:{type:"user"}}),t._v("3rd item ")],1)],1)],1),t._v(" "),n("a-dropdown",[n("a-menu",{attrs:{slot:"overlay"},slot:"overlay"},[n("a-menu-item",{key:"1"},[n("a-icon",{attrs:{type:"user"}}),t._v("1st menu item ")],1),t._v(" "),n("a-menu-item",{key:"2"},[n("a-icon",{attrs:{type:"user"}}),t._v("2nd menu item ")],1),t._v(" "),n("a-menu-item",{key:"3"},[n("a-icon",{attrs:{type:"user"}}),t._v("3rd item ")],1)],1),t._v(" "),n("a-button",{staticStyle:{"margin-left":"8px"}},[t._v(" Button "),n("a-icon",{attrs:{type:"down"}})],1)],1)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.buttonCode}})],1),t._v(" "),t._m(2)],1),t._v(" "),n("muse-anchor",{attrs:{anchors:t.anchors}})],1)])}),[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"mb-24"},[n("h1",[t._v("Dropdown")]),t._v(" "),n("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tA dropdown list.\n\t\t\t\t\t")])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"mb-24",attrs:{id:"When-To-Use"}},[n("h2",[t._v("When To Use")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tWhen there are more than a few options to choose from, you can wrap them\n\t\t\t\t\t\tin a Dropdown. By hovering or clicking on the trigger, a dropdown menu\n\t\t\t\t\t\twill appear, which allows you to choose an option and execute the relevant\n\t\t\t\t\t\taction.\n\t\t\t\t\t")])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("p",{staticClass:"text-right font-semibold mb-24"},[t._v("\n\t\t\t\t\tLooking for more Ant Design Vue Dropdown? Please check the\n\t\t\t\t\t"),n("a",{attrs:{target:"_blank",href:"https://antdv.com/components/dropdown/"}},[t._v("official docs")]),t._v(".\n\t\t\t\t")])}],!1,null,"522dcea6",null);e.default=component.exports;installComponents(component,{MuseSnippet:n(1180).default,MuseAnchor:n(1179).default})}}]);