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

(window.webpackJsonp=window.webpackJsonp||[]).push([[11,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]}},l=n(81),component=Object(l.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!"})}}},l=n(81),component=Object(l.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},1184:function(t,e,n){var content=n(1201);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,n(135).default)("725a0709",content,!0,{sourceMap:!1})},1200:function(t,e,n){"use strict";n(1184)},1201:function(t,e,n){var o=n(134)(!1);o.push([t.i,"#components-popover-demo-placement .ant-btn[data-v-1d2754f5]{width:70px;text-align:center;padding:0;margin-right:8px;margin-bottom:8px}",""]),t.exports=o},1225:function(t,e,n){"use strict";n.r(e);var o={head:function(){return{title:"Popover | Muse Vue Ant Design Dashboard @ Creative Tim",meta:[{hid:"description",name:"description",content:"The floating card popped by clicking or hovering."}]}},data:function(){return{anchors:{"When-To-Use":"When To Use","Three-ways-to-trigger":"Three ways to trigger",Placement:"Placement"},buttonWidth:70,triggerSample:'\n<template>\n  <div>\n    <a-popover title="Title" trigger="hover">\n      <template slot="content">\n        <p class="mb-0">Content</p>\n        <p class="mb-0">Content</p>\n      </template>\n      <a-button type="primary">\n        Hover me\n      </a-button>\n    </a-popover>\n    <a-popover title="Title" trigger="focus">\n      <template slot="content">\n        <p class="mb-0">Content</p>\n        <p class="mb-0">Content</p>\n      </template>\n      <a-button type="primary">\n        Focus me\n      </a-button>\n    </a-popover>\n    <a-popover title="Title" trigger="click">\n      <template slot="content">\n        <p class="mb-0">Content</p>\n        <p class="mb-0">Content</p>\n      </template>\n      <a-button type="primary">\n        Click me\n      </a-button>\n    </a-popover>\n  </div>\n</template>\n',codeSample:'\n<template>\n  <div id="components-popover-demo-placement">\n    <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: \'nowrap\' }">\n      <a-popover placement="topLeft">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>TL</a-button>\n      </a-popover>\n      <a-popover placement="top">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>Top</a-button>\n      </a-popover>\n      <a-popover placement="topRight">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>TR</a-button>\n      </a-popover>\n    </div>\n    <div :style="{ width: `${buttonWidth}px`, float: \'left\' }">\n      <a-popover placement="leftTop">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>LT</a-button>\n      </a-popover>\n      <a-popover placement="left">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>Left</a-button>\n      </a-popover>\n      <a-popover placement="leftBottom">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>LB</a-button>\n      </a-popover>\n    </div>\n    <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24}px` }">\n      <a-popover placement="rightTop">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>RT</a-button>\n      </a-popover>\n      <a-popover placement="right">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>Right</a-button>\n      </a-popover>\n      <a-popover placement="rightBottom">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>RB</a-button>\n      </a-popover>\n    </div>\n    <div :style="{ marginLeft: `${buttonWidth}px`, clear: \'both\', whiteSpace: \'nowrap\' }">\n      <a-popover placement="bottomLeft">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>BL</a-button>\n      </a-popover>\n      <a-popover placement="bottom">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>Bottom</a-button>\n      </a-popover>\n      <a-popover placement="bottomRight">\n        <template slot="content">\n          <p class="mb-0">Content</p>\n          <p class="mb-0">Content</p>\n        </template>\n        <template slot="title">\n          <span>Title</span>\n        </template>\n        <a-button>BR</a-button>\n      </a-popover>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      buttonWidth: 70,\n    };\n  },\n};\n<\/script>'}},methods:{}},l=(n(1200),n(81)),component=Object(l.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:"Three-ways-to-trigger"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Three ways to trigger")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tMouse to click, focus and move in.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-popover",{attrs:{title:"Title",trigger:"hover"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("a-button",{attrs:{type:"primary"}},[t._v("\n\t\t\t\t\t\t\t\tHover me\n\t\t\t\t\t\t\t")])],2),t._v(" "),n("a-popover",{attrs:{title:"Title",trigger:"focus"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("a-button",{attrs:{type:"primary"}},[t._v("\n\t\t\t\t\t\t\t\tFocus me\n\t\t\t\t\t\t\t")])],2),t._v(" "),n("a-popover",{attrs:{title:"Title",trigger:"click"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("a-button",{attrs:{type:"primary"}},[t._v("\n\t\t\t\t\t\t\t\tClick me\n\t\t\t\t\t\t\t")])],2)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.triggerSample}})],1),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Placement"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Placement")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tThere are 12 placement options available.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("div",{attrs:{id:"components-popover-demo-placement"}},[n("div",{style:{marginLeft:t.buttonWidth+"px",whiteSpace:"nowrap"}},[n("a-popover",{attrs:{placement:"topLeft"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("TL")])],2),t._v(" "),n("a-popover",{attrs:{placement:"top"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("Top")])],2),t._v(" "),n("a-popover",{attrs:{placement:"topRight"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("TR")])],2)],1),t._v(" "),n("div",{style:{width:t.buttonWidth+"px",float:"left"}},[n("a-popover",{attrs:{placement:"leftTop"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("LT")])],2),t._v(" "),n("a-popover",{attrs:{placement:"left"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("Left")])],2),t._v(" "),n("a-popover",{attrs:{placement:"leftBottom"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("LB")])],2)],1),t._v(" "),n("div",{style:{width:t.buttonWidth+"px",marginLeft:4*t.buttonWidth+24+"px"}},[n("a-popover",{attrs:{placement:"rightTop"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("RT")])],2),t._v(" "),n("a-popover",{attrs:{placement:"right"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("Right")])],2),t._v(" "),n("a-popover",{attrs:{placement:"rightBottom"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("RB")])],2)],1),t._v(" "),n("div",{style:{marginLeft:t.buttonWidth+"px",clear:"both",whiteSpace:"nowrap"}},[n("a-popover",{attrs:{placement:"bottomLeft"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("BL")])],2),t._v(" "),n("a-popover",{attrs:{placement:"bottom"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("Bottom")])],2),t._v(" "),n("a-popover",{attrs:{placement:"bottomRight"}},[n("template",{slot:"content"},[n("p",{staticClass:"mb-0"},[t._v("Content")]),t._v(" "),n("p",{staticClass:"mb-0"},[t._v("Content")])]),t._v(" "),n("template",{slot:"title"},[n("span",[t._v("Title")])]),t._v(" "),n("a-button",[t._v("BR")])],2)],1)])]),t._v(" "),n("muse-snippet",{attrs:{code:t.codeSample}})],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("Popover")]),t._v(" "),n("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tThe floating card popped by clicking or hovering.\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\tA simple popup menu to provide extra information or operations.\n\t\t\t\t\t")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tComparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.\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 Popover? Please check the\n\t\t\t\t\t"),n("a",{attrs:{target:"_blank",href:"https://antdv.com/components/popover/"}},[t._v("official docs")]),t._v(".\n\t\t\t\t")])}],!1,null,"1d2754f5",null);e.default=component.exports;installComponents(component,{MuseSnippet:n(1180).default,MuseAnchor:n(1179).default})}}]);