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

(window.webpackJsonp=window.webpackJsonp||[]).push([[17,2,3],{1179:function(t,e,n){"use strict";n.r(e);n(106),n(640);var c={props:["anchors"],data:function(){return{url:""}},beforeMount:function(){this.url=window.location.href.split("#")[0]}},o=n(81),component=Object(o.a)(c,(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 c={inheritAttrs:!0,props:["code","lang"],data:function(){return{}},methods:{onCopy:function(t){this.$message.success({content:"Copied!"})}}},o=n(81),component=Object(o.a)(c,(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},1231:function(t,e,n){"use strict";n.r(e);var c={head:function(){return{title:"Checkbox | Muse Vue Ant Design Dashboard @ Creative Tim",meta:[{hid:"description",name:"description",content:"Checkbox component"}]}},data:function(){return{anchors:{"When-To-Use":"When To Use",Basic:"Basic"},codeSample:'\n<template>\n  <a-checkbox @change="onChange">\n    Checkbox\n  </a-checkbox>\n</template>\n<script>\nexport default {\n  methods: {\n    onChange(e) {\n      console.log(`checked = ${e.target.checked}`);\n    },\n  },\n};\n<\/script>\n'}},methods:{}},o=n(81),component=Object(o.a)(c,(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\tBasic usage of checkbox\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-checkbox",[t._v("\n\t\t\t\t\t\t\tCheckbox\n\t\t\t\t\t\t")])],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("Checkbox")]),t._v(" "),n("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tCheckbox component\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("ul",[n("li",[t._v("Used for selecting multiple values from several options.")]),t._v(" "),n("li",[t._v("\n\t\t\t\t\t\t\tIf you use only one checkbox, it is the same as using Switch to toggle\n\t\t\t\t\t\t\tbetween two states. The difference is that Switch will trigger the state\n\t\t\t\t\t\t\tchange directly, but Checkbox just marks the state as changed and this\n\t\t\t\t\t\t\tneeds to be submitted.\n\t\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 Checkbox? Please check the\n\t\t\t\t\t"),n("a",{attrs:{target:"_blank",href:"https://antdv.com/components/checkbox/"}},[t._v("official docs")]),t._v(".\n\t\t\t\t")])}],!1,null,"797b78b4",null);e.default=component.exports;installComponents(component,{MuseSnippet:n(1180).default,MuseAnchor:n(1179).default})}}]);