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

(window.webpackJsonp=window.webpackJsonp||[]).push([[10,2,3],{1179:function(t,n,e){"use strict";e.r(n);e(106),e(640);var o={props:["anchors"],data:function(){return{url:""}},beforeMount:function(){this.url=window.location.href.split("#")[0]}},c=e(81),component=Object(c.a)(o,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{staticClass:"page-anchor"},[e("a-anchor",{attrs:{targetOffset:80,offsetTop:85}},t._l(t.anchors,(function(title,n){return e("a-anchor-link",{key:n,attrs:{href:t.url+"#"+n,title:title}})})),1)],1)}),[],!1,null,null,null);n.default=component.exports},1180:function(t,n,e){"use strict";e.r(n);var o={inheritAttrs:!0,props:["code","lang"],data:function(){return{}},methods:{onCopy:function(t){this.$message.success({content:"Copied!"})}}},c=e(81),component=Object(c.a)(o,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("section",{staticClass:"highlight-section"},[e("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(" "),e("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);n.default=component.exports},1224:function(t,n,e){"use strict";e.r(n);var o={head:function(){return{title:"Modal | Muse Vue Ant Design Dashboard @ Creative Tim",meta:[{hid:"description",name:"description",content:"Modal dialogs."}]}},data:function(){return{anchors:{"When-To-Use":"When To Use",Basic:"Basic","Information-modal-dialog":"Information modal dialog"},ModalText:"Content of the modal",visible:!1,codeSample:'\n<template>\n  <div>\n    <a-button type="primary" @click="showModal">\n      Open Modal\n    </a-button>\n    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n    </a-modal>\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      visible: false,\n    };\n  },\n  methods: {\n    showModal() {\n      this.visible = true;\n    },\n    handleOk(e) {\n      console.log(e);\n      this.visible = false;\n    },\n  },\n};\n<\/script>',informationModalCode:"\n<template>\n  <div>\n    <a-button @click=\"info\">\n      Info\n    </a-button>\n    <a-button @click=\"success\">\n      Success\n    </a-button>\n    <a-button @click=\"error\">\n      Error\n    </a-button>\n    <a-button @click=\"warning\">\n      Warning\n    </a-button>\n  </div>\n</template>\n<script>\nimport { Modal } from 'ant-design-vue';\nexport default {\n  methods: {\n    info() {\n      const h = this.$createElement;\n      this.$info({\n        title: 'This is a notification message',\n        content: h('div', {}, [\n          h('p', 'some messages...some messages...'),\n          h('p', 'some messages...some messages...'),\n        ]),\n        onOk() {},\n      });\n    },\n\n    success() {\n      this.$success({\n        title: 'This is a success message',\n        // JSX support\n        content: (\n          <div>\n            <p>some messages...some messages...</p>\n            <p>some messages...some messages...</p>\n          </div>\n        ),\n      });\n    },\n\n    error() {\n      this.$error({\n        title: 'This is an error message',\n        content: 'some messages...some messages...',\n      });\n    },\n\n    warning() {\n      this.$warning({\n        title: 'This is a warning message',\n        content: 'some messages...some messages...',\n      });\n    },\n  },\n};\n<\/script>"}},methods:{showModal:function(){this.visible=!0},handleCancel:function(t){this.visible=!1},info:function(){var t=this.$createElement;this.$info({title:"This is a notification message",content:t("div",[t("p",{class:"mb-0"},["some messages...some messages..."]),t("p",{class:"mb-0"},["some messages...some messages..."])])})},success:function(){var t=this.$createElement;this.$success({title:"This is a success message",content:t("div",[t("p",{class:"mb-0"},["some messages...some messages..."]),t("p",{class:"mb-0"},["some messages...some messages..."])])})},error:function(){this.$error({title:"This is an error message",content:"some messages...some messages..."})},warning:function(){this.$warning({title:"This is a warning message",content:"some messages...some messages..."})}}},c=e(81),component=Object(c.a)(o,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[e("div",{staticClass:"page-row"},[e("div",{staticClass:"page-content"},[t._m(0),t._v(" "),e("a-divider"),t._v(" "),t._m(1),t._v(" "),e("h2",[t._v("Examples")]),t._v(" "),e("section",{staticClass:"mb-24",attrs:{id:"Basic"}},[e("a-divider",{attrs:{orientation:"left"}},[t._v("Basic")]),t._v(" "),e("p",[t._v("\n\t\t\t\t\t\tBasic modal.\n\t\t\t\t\t")]),t._v(" "),e("div",{staticClass:"showcase"},[e("a-button",{attrs:{type:"primary"},on:{click:t.showModal}},[t._v("\n\t\t\t\t\t\t\tOpen Modal\n\t\t\t\t\t\t")]),t._v(" "),e("a-modal",{attrs:{title:"Basic Modal"},on:{ok:t.handleOk},model:{value:t.visible,callback:function(n){t.visible=n},expression:"visible"}},[e("p",[t._v("Some contents...")]),t._v(" "),e("p",[t._v("Some contents...")]),t._v(" "),e("p",[t._v("Some contents...")])])],1),t._v(" "),e("muse-snippet",{attrs:{code:t.codeSample}})],1),t._v(" "),e("section",{staticClass:"mb-24",attrs:{id:"Information-modal-dialog"}},[e("a-divider",{attrs:{orientation:"left"}},[t._v("Information modal dialog")]),t._v(" "),e("p",[t._v("\n\t\t\t\t\t\tIn the various types of information modal dialog, only one button to close dialog is provided.\n\t\t\t\t\t")]),t._v(" "),e("div",{staticClass:"showcase"},[e("a-button",{on:{click:t.info}},[t._v("\n\t\t\t\t\t\t\tInfo\n\t\t\t\t\t\t")]),t._v(" "),e("a-button",{on:{click:t.success}},[t._v("\n\t\t\t\t\t\t\tSuccess\n\t\t\t\t\t\t")]),t._v(" "),e("a-button",{on:{click:t.error}},[t._v("\n\t\t\t\t\t\t\tError\n\t\t\t\t\t\t")]),t._v(" "),e("a-button",{on:{click:t.warning}},[t._v("\n\t\t\t\t\t\t\tWarning\n\t\t\t\t\t\t")])],1),t._v(" "),e("muse-snippet",{attrs:{code:t.informationModalCode}})],1),t._v(" "),t._m(2)],1),t._v(" "),e("muse-anchor",{attrs:{anchors:t.anchors}})],1)])}),[function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("section",{staticClass:"mb-24"},[e("h1",[t._v("Modal")]),t._v(" "),e("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tModal dialogs.\n\t\t\t\t\t")])])},function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("section",{staticClass:"mb-24",attrs:{id:"When-To-Use"}},[e("h2",[t._v("When To Use")]),t._v(" "),e("p",[t._v("\n\t\t\t\t\t\tWhen requiring users to interact with the application, but without jumping to a new page and interrupting\n\t\t\t\t\t\tthe user’s workflow, you can use "),e("code",[t._v("Modal")]),t._v(" to create a new floating layer over the current page to get user\n\t\t\t\t\t\tfeedback or display information.\n\t\t\t\t\t\tAdditionally, if you need show a simple confirmation dialog, you can use "),e("code",[t._v("antd.Modal.confirm()")]),t._v(",\n\t\t\t\t\t\tand so on.\n\t\t\t\t\t")])])},function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("p",{staticClass:"text-right font-semibold mb-24"},[t._v("\n\t\t\t\t\tLooking for more Ant Design Vue Modal? Please check the\n\t\t\t\t\t"),e("a",{attrs:{target:"_blank",href:"https://antdv.com/components/modal/"}},[t._v("official docs")]),t._v(".\n\t\t\t\t")])}],!1,null,"2cf3e5e3",null);n.default=component.exports;installComponents(component,{MuseSnippet:e(1180).default,MuseAnchor:e(1179).default})}}]);