muse-vue-ant-design-dashboard/documentation/_nuxt/475b504.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[6,2,3],{1179:function(t,e,n){"use strict";n.r(e);n(106),n(640);var r={props:["anchors"],data:function(){return{url:""}},beforeMount:function(){this.url=window.location.href.split("#")[0]}},o=n(81),component=Object(o.a)(r,(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 r={inheritAttrs:!0,props:["code","lang"],data:function(){return{}},methods:{onCopy:function(t){this.$message.success({content:"Copied!"})}}},o=n(81),component=Object(o.a)(r,(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},1183:function(t,e,n){var content=n(1198);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,n(135).default)("e7dd01dc",content,!0,{sourceMap:!1})},1197:function(t,e,n){"use strict";n(1183)},1198:function(t,e,n){var r=n(134)(!1);r.push([t.i,".head-example{width:42px;height:42px;border-radius:4px;background:#eee;display:inline-block;vertical-align:middle}.ant-badge-count p{color:#fff;font-size:12px}",""]),t.exports=r},1220:function(t,e,n){"use strict";n.r(e);var r={head:function(){return{title:"Badge | Muse Vue Ant Design Dashboard @ Creative Tim",meta:[{hid:"description",name:"description",content:"Small numerical value or status descriptor for UI elements."}]}},data:function(){return{anchors:{"When-To-Use":"When To Use",Basic:"Basic",Status:"Status","Colorful-Badge":"Colorful Badge"},colors:["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"],codeSample:'\n<template>\n  <div>\n    <a-badge count="5">\n      <a href="#" class="head-example" />\n    </a-badge>\n    <a-badge count="0" show-zero>\n      <a href="#" class="head-example" />\n    </a-badge>\n    <a-badge>\n      <a-icon slot="count" type="clock-circle" style="color: #f5222d" />\n      <a href="#" class="head-example" />\n    </a-badge>\n  </div>\n</template>',status:'\n<template>\n  <div>\n    <a-badge status="success" />\n    <a-badge status="error" />\n    <a-badge status="default" />\n    <a-badge status="processing" />\n    <a-badge status="warning" />\n    <br />\n    <a-badge status="success" text="Success" />\n    <br />\n    <a-badge status="error" text="Error" />\n    <br />\n    <a-badge status="default" text="Default" />\n    <br />\n    <a-badge status="processing" text="Processing" />\n    <br />\n    <a-badge status="warning" text="warning" />\n  </div>\n</template>',colorfulBadge:'\n<template>\n  <div>\n    <h4 style="margin-bottom: 16px">\n      Presets:\n    </h4>\n    <div>\n      <div v-for="color in colors" :key="color">\n        <a-badge :color="color" :text="color" />\n      </div>\n    </div>\n    <h4 style="margin: 16px 0">\n      Custom:\n    </h4>\n    <div>\n      <a-badge color="#f50" text="#f50" />\n      <br />\n      <a-badge color="#2db7f5" text="#2db7f5" />\n      <br />\n      <a-badge color="#87d068" text="#87d068" />\n      <br />\n      <a-badge color="#108ee9" text="#108ee9" />\n    </div>\n  </div>\n</template>\n<script>\nconst colors = [\n  \'pink\',\n  \'red\',\n  \'yellow\',\n  \'orange\',\n  \'cyan\',\n  \'green\',\n  \'blue\',\n  \'purple\',\n  \'geekblue\',\n  \'magenta\',\n  \'volcano\',\n  \'gold\',\n  \'lime\',\n];\nexport default {\n  data() {\n    return {\n      colors,\n    };\n  },\n};\n<\/script>'}},methods:{}},o=(n(1197),n(81)),component=Object(o.a)(r,(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(" "),t._m(2),t._v(" "),n("div",{staticClass:"showcase"},[n("a-badge",{staticClass:"mr-10",attrs:{count:"5"}},[n("a",{staticClass:"head-example",attrs:{href:"#"}})]),t._v(" "),n("a-badge",{staticClass:"mr-10",attrs:{count:"0","show-zero":""}},[n("a",{staticClass:"head-example",attrs:{href:"#"}})]),t._v(" "),n("a-badge",{staticClass:"mr-10"},[n("a-icon",{staticStyle:{color:"#f5222d"},attrs:{slot:"count",type:"clock-circle"},slot:"count"}),t._v(" "),n("a",{staticClass:"head-example",attrs:{href:"#"}})],1)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.codeSample}})],1),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Status"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Status")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tStandalone badge with status.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-badge",{attrs:{status:"success"}}),t._v(" "),n("a-badge",{attrs:{status:"error"}}),t._v(" "),n("a-badge",{attrs:{status:"default"}}),t._v(" "),n("a-badge",{attrs:{status:"processing"}}),t._v(" "),n("a-badge",{attrs:{status:"warning"}}),t._v(" "),n("br"),t._v(" "),n("a-badge",{attrs:{status:"success",text:"Success"}}),t._v(" "),n("br"),t._v(" "),n("a-badge",{attrs:{status:"error",text:"Error"}}),t._v(" "),n("br"),t._v(" "),n("a-badge",{attrs:{status:"default",text:"Default"}}),t._v(" "),n("br"),t._v(" "),n("a-badge",{attrs:{status:"processing",text:"Processing"}}),t._v(" "),n("br"),t._v(" "),n("a-badge",{attrs:{status:"warning",text:"warning"}})],1),t._v(" "),n("muse-snippet",{attrs:{code:t.status}})],1),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Colorful-Badge"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Colorful Badge")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tNew feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("h4",{staticStyle:{"margin-bottom":"16px"}},[t._v("\n\t\t\t\t\t\t\tPresets:\n\t\t\t\t\t\t")]),t._v(" "),n("div",t._l(t.colors,(function(t){return n("div",{key:t},[n("a-badge",{attrs:{color:t,text:t}})],1)})),0),t._v(" "),n("h4",{staticStyle:{margin:"16px 0"}},[t._v("\n\t\t\t\t\t\t\tCustom:\n\t\t\t\t\t\t")]),t._v(" "),n("div",[n("a-badge",{attrs:{color:"#f50",text:"#f50"}}),t._v(" "),n("br"),t._v(" "),n("a-badge",{attrs:{color:"#2db7f5",text:"#2db7f5"}}),t._v(" "),n("br"),t._v(" "),n("a-badge",{attrs:{color:"#87d068",text:"#87d068"}}),t._v(" "),n("br"),t._v(" "),n("a-badge",{attrs:{color:"#108ee9",text:"#108ee9"}})],1)]),t._v(" "),n("muse-snippet",{attrs:{code:t.colorfulBadge}})],1),t._v(" "),t._m(3)],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("Badge")]),t._v(" "),n("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tSmall numerical value or status descriptor for UI elements.\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\tBadge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.\n\t\t\t\t\t")])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("p",[t._v("\n\t\t\t\t\t\tSimplest Usage. Badge will be hidden when "),n("code",[t._v("count")]),t._v(" is 0, but we can use "),n("code",[t._v("showZero")]),t._v(" to show it.\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 Badge? Please check the\n\t\t\t\t\t"),n("a",{attrs:{target:"_blank",href:"https://antdv.com/components/badge/"}},[t._v("official docs")]),t._v(".\n\t\t\t\t")])}],!1,null,null,null);e.default=component.exports;installComponents(component,{MuseSnippet:n(1180).default,MuseAnchor:n(1179).default})}}]);