index.7e771106.js 179 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816
  1. import{d as I,C as B,_ as d,l as g,w as o,j as e,k,f as s,b as n,e as a,P as W,r as f,a as C,h as x,F as S,q as w}from"./index.3fe853a6.js";import{N as X}from"./NotificationOutlined.40f5adfc.js";import{M as q}from"./MinusOutlined.aa94c9ae.js";const z=I({components:{ClockCircleOutlined:B}});function J(l,t,c,p,i,h){const u=e("a-avatar"),r=e("a-badge"),b=e("clock-circle-outlined"),m=e("demo-box");return k(),g(m,{jsfiddle:{us:"Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.",cn:"\u7B80\u5355\u7684\u5FBD\u7AE0\u5C55\u793A\uFF0C\u5F53 `count` \u4E3A `0` \u65F6\uFF0C\u9ED8\u8BA4\u4E0D\u663E\u793A\uFF0C\u4F46\u662F\u53EF\u4EE5\u4F7F\u7528 `showZero` \u4FEE\u6539\u4E3A\u663E\u793A\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  2. <span aria-hidden="true" class="anchor">#</span>
  3. </a></h2>
  4. <p>\u7B80\u5355\u7684\u5FBD\u7AE0\u5C55\u793A\uFF0C\u5F53 <code>count</code> \u4E3A <code>0</code> \u65F6\uFF0C\u9ED8\u8BA4\u4E0D\u663E\u793A\uFF0C\u4F46\u662F\u53EF\u4EE5\u4F7F\u7528 <code>showZero</code> \u4FEE\u6539\u4E3A\u663E\u793A\u3002</p>
  5. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  6. <span aria-hidden="true" class="anchor">#</span>
  7. </a></h2>
  8. <p>Simplest Usage. Badge will be hidden when <code>count</code> is <code>0</code>, but we can use <code>showZero</code> to show it.</p>
  9. `,order:0,title:{"zh-CN":"\u57FA\u672C","en-US":"Basic"},relativePath:"components/badge/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIGNvdW50PSI1Ij4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CiAgPGEtYmFkZ2UgY291bnQ9IjAiIHNob3ctemVybz4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CiAgPGEtYmFkZ2U+CiAgICA8dGVtcGxhdGUgI2NvdW50PgogICAgICA8Y2xvY2stY2lyY2xlLW91dGxpbmVkIHN0eWxlPSJjb2xvcjogI2Y1MjIyZCIgLz4KICAgIDwvdGVtcGxhdGU+CiAgICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgc2l6ZT0ibGFyZ2UiIC8+CiAgPC9hLWJhZGdlPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgQ2xvY2tDaXJjbGVPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgQ2xvY2tDaXJjbGVPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIGNvdW50PSI1Ij4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CiAgPGEtYmFkZ2UgY291bnQ9IjAiIHNob3ctemVybz4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CiAgPGEtYmFkZ2U+CiAgICA8dGVtcGxhdGUgI2NvdW50PgogICAgICA8Y2xvY2stY2lyY2xlLW91dGxpbmVkIHN0eWxlPSJjb2xvcjogI2Y1MjIyZCIgLz4KICAgIDwvdGVtcGxhdGU+CiAgICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgc2l6ZT0ibGFyZ2UiIC8+CiAgPC9hLWJhZGdlPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBDbG9ja0NpcmNsZU91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBDbG9ja0NpcmNsZU91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:o(()=>[s(r,{count:"5"},{default:o(()=>[s(u,{shape:"square",size:"large"})]),_:1}),s(r,{count:"0","show-zero":""},{default:o(()=>[s(u,{shape:"square",size:"large"})]),_:1}),s(r,null,{count:o(()=>[s(b,{style:{color:"#f5222d"}})]),default:o(()=>[s(u,{shape:"square",size:"large"})]),_:1})]),htmlCode:o(()=>t[0]||(t[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  10. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  11. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  12. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  13. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"show-zero"),n("span",{class:"token punctuation"},">")]),a(`
  14. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  15. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  16. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  17. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#count"),n("span",{class:"token punctuation"},">")]),a(`
  18. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("clock-circle-outlined")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" #f5222d")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  19. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  20. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  21. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  22. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  23. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  24. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  25. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ClockCircleOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
  26. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  27. `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
  28. ClockCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
  29. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  30. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  31. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  32. `)])],-1)])),jsVersionHtml:o(()=>t[1]||(t[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  33. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  34. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  35. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  36. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"show-zero"),n("span",{class:"token punctuation"},">")]),a(`
  37. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  38. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  39. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  40. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#count"),n("span",{class:"token punctuation"},">")]),a(`
  41. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("clock-circle-outlined")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" #f5222d")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  42. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  43. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  44. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  45. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  46. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  47. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  48. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ClockCircleOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
  49. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  50. `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
  51. ClockCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
  52. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  53. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  54. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  55. `)])],-1)])),_:1})}const N=d(z,[["render",J]]),R={};function H(l,t){const c=e("a-badge"),p=e("demo-box");return k(),g(p,{jsfiddle:{us:"Used in standalone when children is empty.",cn:`\u4E0D\u5305\u88F9\u4EFB\u4F55\u5143\u7D20\u5373\u662F\u72EC\u7ACB\u4F7F\u7528\uFF0C\u53EF\u81EA\u5B9A\u6837\u5F0F\u5C55\u73B0\u3002
  56. \u5728\u53F3\u4E0A\u89D2\u7684 badge \u5219\u9650\u5B9A\u4E3A\u7EA2\u8272\u3002`,docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  57. <span aria-hidden="true" class="anchor">#</span>
  58. </a></h2>
  59. <p>\u4E0D\u5305\u88F9\u4EFB\u4F55\u5143\u7D20\u5373\u662F\u72EC\u7ACB\u4F7F\u7528\uFF0C\u53EF\u81EA\u5B9A\u6837\u5F0F\u5C55\u73B0\u3002
  60. \u5728\u53F3\u4E0A\u89D2\u7684 badge \u5219\u9650\u5B9A\u4E3A\u7EA2\u8272\u3002</p>
  61. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  62. <span aria-hidden="true" class="anchor">#</span>
  63. </a></h2>
  64. <p>Used in standalone when children is empty.</p>
  65. `,order:1,title:{"zh-CN":"\u72EC\u7ACB\u4F7F\u7528","en-US":"Standalone"},relativePath:"components/badge/demo/no-wrapper.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIGNvdW50PSIyNSIgLz4KICA8YS1iYWRnZQogICAgY291bnQ9IjQiCiAgICA6bnVtYmVyLXN0eWxlPSJ7CiAgICAgIGJhY2tncm91bmRDb2xvcjogJyNmZmYnLAogICAgICBjb2xvcjogJyM5OTknLAogICAgICBib3hTaGFkb3c6ICcwIDAgMCAxcHggI2Q5ZDlkOSBpbnNldCcsCiAgICB9IgogIC8+CiAgPGEtYmFkZ2UgY291bnQ9IjEwOSIgOm51bWJlci1zdHlsZT0ieyBiYWNrZ3JvdW5kQ29sb3I6ICcjNTJjNDFhJyB9IiAvPgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIGNvdW50PSIyNSIgLz4KICA8YS1iYWRnZQogICAgY291bnQ9IjQiCiAgICA6bnVtYmVyLXN0eWxlPSJ7CiAgICAgIGJhY2tncm91bmRDb2xvcjogJyNmZmYnLAogICAgICBjb2xvcjogJyM5OTknLAogICAgICBib3hTaGFkb3c6ICcwIDAgMCAxcHggI2Q5ZDlkOSBpbnNldCcsCiAgICB9IgogIC8+CiAgPGEtYmFkZ2UgY291bnQ9IjEwOSIgOm51bWJlci1zdHlsZT0ieyBiYWNrZ3JvdW5kQ29sb3I6ICcjNTJjNDFhJyB9IiAvPgo8L3RlbXBsYXRlPg=="}},{default:o(()=>[s(c,{count:"25"}),s(c,{count:"4","number-style":{backgroundColor:"#fff",color:"#999",boxShadow:"0 0 0 1px #d9d9d9 inset"}}),s(c,{count:"109","number-style":{backgroundColor:"#52c41a"}})]),htmlCode:o(()=>t[0]||(t[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  66. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("25"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  67. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(`
  68. `),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),a(`
  69. `),n("span",{class:"token attr-name"},":number-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`{
  70. backgroundColor: '#fff',
  71. color: '#999',
  72. boxShadow: '0 0 0 1px #d9d9d9 inset',
  73. }`),n("span",{class:"token punctuation"},'"')]),a(`
  74. `),n("span",{class:"token punctuation"},"/>")]),a(`
  75. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("109"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":number-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ backgroundColor: '#52c41a' }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  76. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  77. `)])],-1)])),jsVersionHtml:o(()=>t[1]||(t[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  78. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("25"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  79. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(`
  80. `),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),a(`
  81. `),n("span",{class:"token attr-name"},":number-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`{
  82. backgroundColor: '#fff',
  83. color: '#999',
  84. boxShadow: '0 0 0 1px #d9d9d9 inset',
  85. }`),n("span",{class:"token punctuation"},'"')]),a(`
  86. `),n("span",{class:"token punctuation"},"/>")]),a(`
  87. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("109"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":number-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ backgroundColor: '#52c41a' }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  88. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  89. `)])],-1)])),_:1})}const F=d(R,[["render",H]]),V=I({components:{NotificationOutlined:X}});function L(l,t,c,p,i,h){const u=e("notification-outlined"),r=e("a-badge"),b=e("demo-box");return k(),g(b,{jsfiddle:{us:`This will simply display a red badge, without a specific count.
  90. If count equals 0, it won't display the dot.`,cn:"\u6CA1\u6709\u5177\u4F53\u7684\u6570\u5B57\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  91. <span aria-hidden="true" class="anchor">#</span>
  92. </a></h2>
  93. <p>\u6CA1\u6709\u5177\u4F53\u7684\u6570\u5B57\u3002</p>
  94. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  95. <span aria-hidden="true" class="anchor">#</span>
  96. </a></h2>
  97. <p>This will simply display a red badge, without a specific count.
  98. If count equals 0, it won't display the dot.</p>
  99. `,order:3,title:{"zh-CN":"\u8BA8\u5ACC\u7684\u5C0F\u7EA2\u70B9","en-US":"Red badge"},relativePath:"components/badge/demo/dot.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIGRvdD4KICAgIDxub3RpZmljYXRpb24tb3V0bGluZWQgc3R5bGU9ImZvbnQtc2l6ZTogMTZweCIgLz4KICA8L2EtYmFkZ2U+CiAgPGEtYmFkZ2UgZG90PgogICAgPGEgaHJlZj0iIyI+TGluayBzb21ldGhpbmc8L2E+CiAgPC9hLWJhZGdlPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTm90aWZpY2F0aW9uT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIE5vdGlmaWNhdGlvbk91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIGRvdD4KICAgIDxub3RpZmljYXRpb24tb3V0bGluZWQgc3R5bGU9ImZvbnQtc2l6ZTogMTZweCIgLz4KICA8L2EtYmFkZ2U+CiAgPGEtYmFkZ2UgZG90PgogICAgPGEgaHJlZj0iIyI+TGluayBzb21ldGhpbmc8L2E+CiAgPC9hLWJhZGdlPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBOb3RpZmljYXRpb25PdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTm90aWZpY2F0aW9uT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:o(()=>[s(r,{dot:""},{default:o(()=>[s(u,{style:{"font-size":"16px"}})]),_:1}),s(r,{dot:""},{default:o(()=>t[0]||(t[0]=[n("a",{href:"#"},"Link something",-1)])),_:1,__:[0]})]),htmlCode:o(()=>t[1]||(t[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  100. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"dot"),n("span",{class:"token punctuation"},">")]),a(`
  101. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("notification-outlined")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  102. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  103. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"dot"),n("span",{class:"token punctuation"},">")]),a(`
  104. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Link something"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),a(`
  105. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  106. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  107. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  108. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  109. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" NotificationOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
  110. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  111. `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
  112. NotificationOutlined`),n("span",{class:"token punctuation"},","),a(`
  113. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  114. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  115. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  116. `)])],-1)])),jsVersionHtml:o(()=>t[2]||(t[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  117. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"dot"),n("span",{class:"token punctuation"},">")]),a(`
  118. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("notification-outlined")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  119. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  120. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"dot"),n("span",{class:"token punctuation"},">")]),a(`
  121. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Link something"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),a(`
  122. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  123. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  124. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  125. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  126. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" NotificationOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
  127. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  128. `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
  129. NotificationOutlined`),n("span",{class:"token punctuation"},","),a(`
  130. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  131. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  132. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  133. `)])],-1)])),_:1})}const j=d(V,[["render",L]]),U=I({components:{MinusOutlined:q,PlusOutlined:W},setup(){const l=f(5),t=()=>{l.value>=1&&l.value--},c=()=>{l.value++};return{count:l,show:f(!0),decline:t,increase:c}}});function _(l,t,c,p,i,h){const u=e("a-avatar"),r=e("a-badge"),b=e("minus-outlined"),m=e("a-button"),v=e("plus-outlined"),Z=e("a-button-group"),y=e("a-divider"),G=e("a-switch"),A=e("demo-box");return k(),g(A,{jsfiddle:{us:"The count will be animated as it changes.",cn:"\u5C55\u793A\u52A8\u6001\u53D8\u5316\u7684\u6548\u679C\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  134. <span aria-hidden="true" class="anchor">#</span>
  135. </a></h2>
  136. <p>\u5C55\u793A\u52A8\u6001\u53D8\u5316\u7684\u6548\u679C\u3002</p>
  137. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  138. <span aria-hidden="true" class="anchor">#</span>
  139. </a></h2>
  140. <p>The count will be animated as it changes.</p>
  141. `,order:5,title:{"zh-CN":"\u52A8\u6001","en-US":"Dynamic"},relativePath:"components/badge/demo/change.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1iYWRnZSA6Y291bnQ9ImNvdW50Ij4KICAgICAgPGEtYXZhdGFyIHNoYXBlPSJzcXVhcmUiIHNpemU9ImxhcmdlIiAvPgogICAgPC9hLWJhZGdlPgogICAgPGEtYnV0dG9uLWdyb3VwPgogICAgICA8YS1idXR0b24gQGNsaWNrPSJkZWNsaW5lIj4KICAgICAgICA8bWludXMtb3V0bGluZWQgLz4KICAgICAgPC9hLWJ1dHRvbj4KICAgICAgPGEtYnV0dG9uIEBjbGljaz0iaW5jcmVhc2UiPgogICAgICAgIDxwbHVzLW91dGxpbmVkIC8+CiAgICAgIDwvYS1idXR0b24+CiAgICA8L2EtYnV0dG9uLWdyb3VwPgogIDwvZGl2PgogIDxhLWRpdmlkZXIgLz4KICA8YS1iYWRnZSA6ZG90PSJzaG93Ij4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CiAgPGEtc3dpdGNoIHYtbW9kZWw6Y2hlY2tlZD0ic2hvdyIgLz4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWludXNPdXRsaW5lZCwgUGx1c091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBNaW51c091dGxpbmVkLAogICAgUGx1c091dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBjb3VudCA9IHJlZjxudW1iZXI+KDUpOwogICAgY29uc3QgZGVjbGluZSA9ICgpID0+IHsKICAgICAgaWYgKGNvdW50LnZhbHVlID49IDEpIHsKICAgICAgICBjb3VudC52YWx1ZS0tOwogICAgICB9CiAgICB9OwoKICAgIGNvbnN0IGluY3JlYXNlID0gKCkgPT4gewogICAgICBjb3VudC52YWx1ZSsrOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGNvdW50LAogICAgICBzaG93OiByZWY8Ym9vbGVhbj4odHJ1ZSksCiAgICAgIGRlY2xpbmUsCiAgICAgIGluY3JlYXNlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1iYWRnZSA6Y291bnQ9ImNvdW50Ij4KICAgICAgPGEtYXZhdGFyIHNoYXBlPSJzcXVhcmUiIHNpemU9ImxhcmdlIiAvPgogICAgPC9hLWJhZGdlPgogICAgPGEtYnV0dG9uLWdyb3VwPgogICAgICA8YS1idXR0b24gQGNsaWNrPSJkZWNsaW5lIj4KICAgICAgICA8bWludXMtb3V0bGluZWQgLz4KICAgICAgPC9hLWJ1dHRvbj4KICAgICAgPGEtYnV0dG9uIEBjbGljaz0iaW5jcmVhc2UiPgogICAgICAgIDxwbHVzLW91dGxpbmVkIC8+CiAgICAgIDwvYS1idXR0b24+CiAgICA8L2EtYnV0dG9uLWdyb3VwPgogIDwvZGl2PgogIDxhLWRpdmlkZXIgLz4KICA8YS1iYWRnZSA6ZG90PSJzaG93Ij4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CiAgPGEtc3dpdGNoIHYtbW9kZWw6Y2hlY2tlZD0ic2hvdyIgLz4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBNaW51c091dGxpbmVkLCBQbHVzT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIE1pbnVzT3V0bGluZWQsCiAgICBQbHVzT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGNvdW50ID0gcmVmKDUpOwogICAgY29uc3QgZGVjbGluZSA9ICgpID0+IHsKICAgICAgaWYgKGNvdW50LnZhbHVlID49IDEpIHsKICAgICAgICBjb3VudC52YWx1ZS0tOwogICAgICB9CiAgICB9OwogICAgY29uc3QgaW5jcmVhc2UgPSAoKSA9PiB7CiAgICAgIGNvdW50LnZhbHVlKys7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgY291bnQsCiAgICAgIHNob3c6IHJlZih0cnVlKSwKICAgICAgZGVjbGluZSwKICAgICAgaW5jcmVhc2UsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:o(()=>[n("div",null,[s(r,{count:l.count},{default:o(()=>[s(u,{shape:"square",size:"large"})]),_:1},8,["count"]),s(Z,null,{default:o(()=>[s(m,{onClick:l.decline},{default:o(()=>[s(b)]),_:1},8,["onClick"]),s(m,{onClick:l.increase},{default:o(()=>[s(v)]),_:1},8,["onClick"])]),_:1})]),s(y),s(r,{dot:l.show},{default:o(()=>[s(u,{shape:"square",size:"large"})]),_:1},8,["dot"]),s(G,{checked:l.show,"onUpdate:checked":t[0]||(t[0]=Y=>l.show=Y)},null,8,["checked"])]),htmlCode:o(()=>t[1]||(t[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  142. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  143. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("count"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  144. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  145. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  146. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button-group")]),n("span",{class:"token punctuation"},">")]),a(`
  147. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("decline"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  148. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("minus-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  149. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  150. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("increase"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  151. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("plus-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  152. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  153. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button-group")]),n("span",{class:"token punctuation"},">")]),a(`
  154. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  155. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  156. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":dot"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("show"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  157. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  158. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  159. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("show"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  160. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  161. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  162. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  163. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" MinusOutlined"),n("span",{class:"token punctuation"},","),a(" PlusOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
  164. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  165. `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
  166. MinusOutlined`),n("span",{class:"token punctuation"},","),a(`
  167. PlusOutlined`),n("span",{class:"token punctuation"},","),a(`
  168. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  169. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  170. `),n("span",{class:"token keyword"},"const"),a(" count "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("number"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"5"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  171. `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"decline"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
  172. `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("count"),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},">="),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  173. count`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token operator"},"--"),n("span",{class:"token punctuation"},";"),a(`
  174. `),n("span",{class:"token punctuation"},"}"),a(`
  175. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  176. `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"increase"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
  177. count`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token operator"},"++"),n("span",{class:"token punctuation"},";"),a(`
  178. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  179. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  180. count`),n("span",{class:"token punctuation"},","),a(`
  181. `),n("span",{class:"token literal-property property"},"show"),n("span",{class:"token operator"},":"),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
  182. decline`),n("span",{class:"token punctuation"},","),a(`
  183. increase`),n("span",{class:"token punctuation"},","),a(`
  184. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  185. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  186. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  187. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  188. `)])],-1)])),jsVersionHtml:o(()=>t[2]||(t[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  189. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  190. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("count"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  191. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  192. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  193. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button-group")]),n("span",{class:"token punctuation"},">")]),a(`
  194. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("decline"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  195. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("minus-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  196. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  197. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("increase"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  198. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("plus-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  199. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  200. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button-group")]),n("span",{class:"token punctuation"},">")]),a(`
  201. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  202. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  203. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":dot"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("show"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  204. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  205. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  206. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("show"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  207. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  208. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  209. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  210. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" MinusOutlined"),n("span",{class:"token punctuation"},","),a(" PlusOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
  211. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  212. `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
  213. MinusOutlined`),n("span",{class:"token punctuation"},","),a(`
  214. PlusOutlined`),n("span",{class:"token punctuation"},","),a(`
  215. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  216. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  217. `),n("span",{class:"token keyword"},"const"),a(" count "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"5"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  218. `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"decline"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
  219. `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("count"),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},">="),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  220. count`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token operator"},"--"),n("span",{class:"token punctuation"},";"),a(`
  221. `),n("span",{class:"token punctuation"},"}"),a(`
  222. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  223. `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"increase"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
  224. count`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token operator"},"++"),n("span",{class:"token punctuation"},";"),a(`
  225. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  226. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  227. count`),n("span",{class:"token punctuation"},","),a(`
  228. `),n("span",{class:"token literal-property property"},"show"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
  229. decline`),n("span",{class:"token punctuation"},","),a(`
  230. increase`),n("span",{class:"token punctuation"},","),a(`
  231. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  232. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  233. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  234. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  235. `)])],-1)])),_:1})}const D=d(U,[["render",_]]),E={};function K(l,t){const c=e("a-avatar"),p=e("a-badge"),i=e("demo-box");return k(),g(i,{jsfiddle:{us:"`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.",cn:"\u8D85\u8FC7 `overflowCount` \u7684\u4F1A\u663E\u793A\u4E3A `${overflowCount}+`\uFF0C\u9ED8\u8BA4\u7684 `overflowCount` \u4E3A `99`\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  236. <span aria-hidden="true" class="anchor">#</span>
  237. </a></h2>
  238. <p>\u8D85\u8FC7 <code>overflowCount</code> \u7684\u4F1A\u663E\u793A\u4E3A <code>\${overflowCount}+</code>\uFF0C\u9ED8\u8BA4\u7684 <code>overflowCount</code> \u4E3A <code>99</code>\u3002</p>
  239. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  240. <span aria-hidden="true" class="anchor">#</span>
  241. </a></h2>
  242. <p><code>\${overflowCount}+</code> is displayed when count is larger than <code>overflowCount</code>. The default value of <code>overflowCount</code> is <code>99</code>.</p>
  243. `,order:2,title:{"zh-CN":"\u5C01\u9876\u6570\u5B57","en-US":"Overflow Count"},relativePath:"components/badge/demo/overflow.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIDpjb3VudD0iOTkiPgogICAgPGEtYXZhdGFyIHNoYXBlPSJzcXVhcmUiIHNpemU9ImxhcmdlIiAvPgogIDwvYS1iYWRnZT4KICA8YS1iYWRnZSA6Y291bnQ9IjEwMCI+CiAgICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgc2l6ZT0ibGFyZ2UiIC8+CiAgPC9hLWJhZGdlPgogIDxhLWJhZGdlIDpjb3VudD0iOTkiIDpvdmVyZmxvdy1jb3VudD0iMTAiPgogICAgPGEtYXZhdGFyIHNoYXBlPSJzcXVhcmUiIHNpemU9ImxhcmdlIiAvPgogIDwvYS1iYWRnZT4KICA8YS1iYWRnZSA6Y291bnQ9IjEwMDAiIDpvdmVyZmxvdy1jb3VudD0iOTk5Ij4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CjwvdGVtcGxhdGU+CgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIDpjb3VudD0iOTkiPgogICAgPGEtYXZhdGFyIHNoYXBlPSJzcXVhcmUiIHNpemU9ImxhcmdlIiAvPgogIDwvYS1iYWRnZT4KICA8YS1iYWRnZSA6Y291bnQ9IjEwMCI+CiAgICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgc2l6ZT0ibGFyZ2UiIC8+CiAgPC9hLWJhZGdlPgogIDxhLWJhZGdlIDpjb3VudD0iOTkiIDpvdmVyZmxvdy1jb3VudD0iMTAiPgogICAgPGEtYXZhdGFyIHNoYXBlPSJzcXVhcmUiIHNpemU9ImxhcmdlIiAvPgogIDwvYS1iYWRnZT4KICA8YS1iYWRnZSA6Y291bnQ9IjEwMDAiIDpvdmVyZmxvdy1jb3VudD0iOTk5Ij4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CjwvdGVtcGxhdGU+"}},{default:o(()=>[s(p,{count:99},{default:o(()=>[s(c,{shape:"square",size:"large"})]),_:1}),s(p,{count:100},{default:o(()=>[s(c,{shape:"square",size:"large"})]),_:1}),s(p,{count:99,"overflow-count":10},{default:o(()=>[s(c,{shape:"square",size:"large"})]),_:1}),s(p,{count:1e3,"overflow-count":999},{default:o(()=>[s(c,{shape:"square",size:"large"})]),_:1})]),htmlCode:o(()=>t[0]||(t[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  244. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("99"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  245. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  246. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  247. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("100"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  248. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  249. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  250. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("99"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":overflow-count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  251. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  252. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  253. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1000"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":overflow-count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("999"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  254. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  255. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  256. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  257. `)])],-1)])),jsVersionHtml:o(()=>t[1]||(t[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  258. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("99"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  259. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  260. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  261. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("100"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  262. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  263. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  264. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("99"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":overflow-count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  265. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  266. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  267. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1000"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":overflow-count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("999"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  268. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  269. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  270. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  271. `)])],-1)])),_:1})}const T=d(E,[["render",K]]),Q={};function M(l,t){const c=e("a-badge"),p=e("demo-box");return k(),g(p,{jsfiddle:{us:"Standalone badge with status.",cn:"\u7528\u4E8E\u8868\u793A\u72B6\u6001\u7684\u5C0F\u5706\u70B9\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  272. <span aria-hidden="true" class="anchor">#</span>
  273. </a></h2>
  274. <p>\u7528\u4E8E\u8868\u793A\u72B6\u6001\u7684\u5C0F\u5706\u70B9\u3002</p>
  275. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  276. <span aria-hidden="true" class="anchor">#</span>
  277. </a></h2>
  278. <p>Standalone badge with status.</p>
  279. `,order:4,title:{"zh-CN":"\u72B6\u6001\u70B9","en-US":"Status"},relativePath:"components/badge/demo/status.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIHN0YXR1cz0ic3VjY2VzcyIgLz4KICA8YS1iYWRnZSBzdGF0dXM9ImVycm9yIiAvPgogIDxhLWJhZGdlIHN0YXR1cz0iZGVmYXVsdCIgLz4KICA8YS1iYWRnZSBzdGF0dXM9InByb2Nlc3NpbmciIC8+CiAgPGEtYmFkZ2Ugc3RhdHVzPSJ3YXJuaW5nIiAvPgogIDxiciAvPgogIDxhLWJhZGdlIHN0YXR1cz0ic3VjY2VzcyIgdGV4dD0iU3VjY2VzcyIgLz4KICA8YnIgLz4KICA8YS1iYWRnZSBzdGF0dXM9ImVycm9yIiB0ZXh0PSJFcnJvciIgLz4KICA8YnIgLz4KICA8YS1iYWRnZSBzdGF0dXM9ImRlZmF1bHQiIHRleHQ9IkRlZmF1bHQiIC8+CiAgPGJyIC8+CiAgPGEtYmFkZ2Ugc3RhdHVzPSJwcm9jZXNzaW5nIiB0ZXh0PSJQcm9jZXNzaW5nIiAvPgogIDxiciAvPgogIDxhLWJhZGdlIHN0YXR1cz0id2FybmluZyIgdGV4dD0id2FybmluZyIgLz4KPC90ZW1wbGF0ZT4KCgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIHN0YXR1cz0ic3VjY2VzcyIgLz4KICA8YS1iYWRnZSBzdGF0dXM9ImVycm9yIiAvPgogIDxhLWJhZGdlIHN0YXR1cz0iZGVmYXVsdCIgLz4KICA8YS1iYWRnZSBzdGF0dXM9InByb2Nlc3NpbmciIC8+CiAgPGEtYmFkZ2Ugc3RhdHVzPSJ3YXJuaW5nIiAvPgogIDxiciAvPgogIDxhLWJhZGdlIHN0YXR1cz0ic3VjY2VzcyIgdGV4dD0iU3VjY2VzcyIgLz4KICA8YnIgLz4KICA8YS1iYWRnZSBzdGF0dXM9ImVycm9yIiB0ZXh0PSJFcnJvciIgLz4KICA8YnIgLz4KICA8YS1iYWRnZSBzdGF0dXM9ImRlZmF1bHQiIHRleHQ9IkRlZmF1bHQiIC8+CiAgPGJyIC8+CiAgPGEtYmFkZ2Ugc3RhdHVzPSJwcm9jZXNzaW5nIiB0ZXh0PSJQcm9jZXNzaW5nIiAvPgogIDxiciAvPgogIDxhLWJhZGdlIHN0YXR1cz0id2FybmluZyIgdGV4dD0id2FybmluZyIgLz4KPC90ZW1wbGF0ZT4="}},{default:o(()=>[s(c,{status:"success"}),s(c,{status:"error"}),s(c,{status:"default"}),s(c,{status:"processing"}),s(c,{status:"warning"}),t[0]||(t[0]=n("br",null,null,-1)),s(c,{status:"success",text:"Success"}),t[1]||(t[1]=n("br",null,null,-1)),s(c,{status:"error",text:"Error"}),t[2]||(t[2]=n("br",null,null,-1)),s(c,{status:"default",text:"Default"}),t[3]||(t[3]=n("br",null,null,-1)),s(c,{status:"processing",text:"Processing"}),t[4]||(t[4]=n("br",null,null,-1)),s(c,{status:"warning",text:"warning"})]),htmlCode:o(()=>t[5]||(t[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  280. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("success"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  281. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  282. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  283. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("processing"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  284. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  285. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  286. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("success"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Success"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  287. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  288. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Error"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  289. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  290. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Default"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  291. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  292. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("processing"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Processing"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  293. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  294. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  295. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  296. `)])],-1)])),jsVersionHtml:o(()=>t[6]||(t[6]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  297. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("success"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  298. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  299. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  300. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("processing"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  301. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  302. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  303. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("success"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Success"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  304. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  305. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Error"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  306. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  307. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Default"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  308. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  309. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("processing"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Processing"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  310. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  311. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"status"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  312. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  313. `)])],-1)])),_:1})}const O=d(Q,[["render",M]]),$={};function nn(l,t){const c=e("a-avatar"),p=e("a-badge"),i=e("demo-box");return k(),g(i,{jsfiddle:{us:"The badge will display `title` when hovered over, instead of `count`.",cn:"\u8BBE\u7F6E\u9F20\u6807\u653E\u5728\u72B6\u6001\u70B9\u4E0A\u65F6\u663E\u793A\u7684\u6587\u5B57",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  314. <span aria-hidden="true" class="anchor">#</span>
  315. </a></h2>
  316. <p>\u8BBE\u7F6E\u9F20\u6807\u653E\u5728\u72B6\u6001\u70B9\u4E0A\u65F6\u663E\u793A\u7684\u6587\u5B57</p>
  317. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  318. <span aria-hidden="true" class="anchor">#</span>
  319. </a></h2>
  320. <p>The badge will display <code>title</code> when hovered over, instead of <code>count</code>.</p>
  321. `,order:6,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u6807\u9898","en-US":"Title"},relativePath:"components/badge/demo/title.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIDpjb3VudD0iNSIgdGl0bGU9IkN1c3RvbSBob3ZlciB0ZXh0Ij4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CjwvdGVtcGxhdGU+CgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlIDpjb3VudD0iNSIgdGl0bGU9IkN1c3RvbSBob3ZlciB0ZXh0Ij4KICAgIDxhLWF2YXRhciBzaGFwZT0ic3F1YXJlIiBzaXplPSJsYXJnZSIgLz4KICA8L2EtYmFkZ2U+CjwvdGVtcGxhdGU+"}},{default:o(()=>[s(p,{count:5,title:"Custom hover text"},{default:o(()=>[s(c,{shape:"square",size:"large"})]),_:1})]),htmlCode:o(()=>t[0]||(t[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  322. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("5"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Custom hover text"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  323. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  324. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  325. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  326. `)])],-1)])),jsVersionHtml:o(()=>t[1]||(t[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  327. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("5"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Custom hover text"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  328. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  329. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  330. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  331. `)])],-1)])),_:1})}const an=d($,[["render",nn]]),tn=["pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"],sn=I({setup(){return{colors:tn}}});function on(l,t,c,p,i,h){const u=e("a-badge"),r=e("a-divider"),b=e("demo-box");return k(),g(b,{jsfiddle:{us:"New 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.",cn:"1.5.0 \u540E\u65B0\u589E\u3002\u6211\u4EEC\u6DFB\u52A0\u4E86\u591A\u79CD\u9884\u8BBE\u8272\u5F69\u7684\u5FBD\u6807\u6837\u5F0F\uFF0C\u7528\u4F5C\u4E0D\u540C\u573A\u666F\u4F7F\u7528\u3002\u5982\u679C\u9884\u8BBE\u503C\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u5177\u4F53\u7684\u8272\u503C\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  332. <span aria-hidden="true" class="anchor">#</span>
  333. </a></h2>
  334. <p>1.5.0 \u540E\u65B0\u589E\u3002\u6211\u4EEC\u6DFB\u52A0\u4E86\u591A\u79CD\u9884\u8BBE\u8272\u5F69\u7684\u5FBD\u6807\u6837\u5F0F\uFF0C\u7528\u4F5C\u4E0D\u540C\u573A\u666F\u4F7F\u7528\u3002\u5982\u679C\u9884\u8BBE\u503C\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u5177\u4F53\u7684\u8272\u503C\u3002</p>
  335. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  336. <span aria-hidden="true" class="anchor">#</span>
  337. </a></h2>
  338. <p>New 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.</p>
  339. `,order:7,title:{"zh-CN":"\u591A\u5F69\u5FBD\u6807","en-US":"Colorful Badge"},relativePath:"components/badge/demo/colors.vue",sourceCode:"PHRlbXBsYXRlPgogIDxoNCBzdHlsZT0ibWFyZ2luLWJvdHRvbTogMTZweCI+UHJlc2V0czo8L2g0PgogIDxkaXY+CiAgICA8ZGl2IHYtZm9yPSJjb2xvciBpbiBjb2xvcnMiIDprZXk9ImNvbG9yIj4KICAgICAgPGEtYmFkZ2UgOmNvbG9yPSJjb2xvciIgOnRleHQ9ImNvbG9yIiAvPgogICAgPC9kaXY+CiAgPC9kaXY+CiAgPGEtZGl2aWRlciBvcmllbnRhdGlvbj0ibGVmdCI+Q3VzdG9tPC9hLWRpdmlkZXI+CiAgPGEtYmFkZ2UgY29sb3I9IiNmNTAiIHRleHQ9IiNmNTAiIC8+CiAgPGJyIC8+CiAgPGEtYmFkZ2UgY29sb3I9IiMyZGI3ZjUiIHRleHQ9IiMyZGI3ZjUiIC8+CiAgPGJyIC8+CiAgPGEtYmFkZ2UgY29sb3I9IiM4N2QwNjgiIHRleHQ9IiM4N2QwNjgiIC8+CiAgPGJyIC8+CiAgPGEtYmFkZ2UgY29sb3I9IiMxMDhlZTkiIHRleHQ9IiMxMDhlZTkiIC8+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwoKY29uc3QgY29sb3JzID0gWwogICdwaW5rJywKICAncmVkJywKICAneWVsbG93JywKICAnb3JhbmdlJywKICAnY3lhbicsCiAgJ2dyZWVuJywKICAnYmx1ZScsCiAgJ3B1cnBsZScsCiAgJ2dlZWtibHVlJywKICAnbWFnZW50YScsCiAgJ3ZvbGNhbm8nLAogICdnb2xkJywKICAnbGltZScsCl07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICByZXR1cm4gewogICAgICBjb2xvcnMsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxoNCBzdHlsZT0ibWFyZ2luLWJvdHRvbTogMTZweCI+UHJlc2V0czo8L2g0PgogIDxkaXY+CiAgICA8ZGl2IHYtZm9yPSJjb2xvciBpbiBjb2xvcnMiIDprZXk9ImNvbG9yIj4KICAgICAgPGEtYmFkZ2UgOmNvbG9yPSJjb2xvciIgOnRleHQ9ImNvbG9yIiAvPgogICAgPC9kaXY+CiAgPC9kaXY+CiAgPGEtZGl2aWRlciBvcmllbnRhdGlvbj0ibGVmdCI+Q3VzdG9tPC9hLWRpdmlkZXI+CiAgPGEtYmFkZ2UgY29sb3I9IiNmNTAiIHRleHQ9IiNmNTAiIC8+CiAgPGJyIC8+CiAgPGEtYmFkZ2UgY29sb3I9IiMyZGI3ZjUiIHRleHQ9IiMyZGI3ZjUiIC8+CiAgPGJyIC8+CiAgPGEtYmFkZ2UgY29sb3I9IiM4N2QwNjgiIHRleHQ9IiM4N2QwNjgiIC8+CiAgPGJyIC8+CiAgPGEtYmFkZ2UgY29sb3I9IiMxMDhlZTkiIHRleHQ9IiMxMDhlZTkiIC8+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGNvbG9ycyA9IFsncGluaycsICdyZWQnLCAneWVsbG93JywgJ29yYW5nZScsICdjeWFuJywgJ2dyZWVuJywgJ2JsdWUnLCAncHVycGxlJywgJ2dlZWtibHVlJywgJ21hZ2VudGEnLCAndm9sY2FubycsICdnb2xkJywgJ2xpbWUnXTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIHJldHVybiB7CiAgICAgIGNvbG9ycywKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:o(()=>[t[1]||(t[1]=n("h4",{style:{"margin-bottom":"16px"}},"Presets:",-1)),n("div",null,[(k(!0),C(S,null,x(l.colors,m=>(k(),C("div",{key:m},[s(u,{color:m,text:m},null,8,["color","text"])]))),128))]),s(r,{orientation:"left"},{default:o(()=>t[0]||(t[0]=[a("Custom")])),_:1,__:[0]}),s(u,{color:"#f50",text:"#f50"}),t[2]||(t[2]=n("br",null,null,-1)),s(u,{color:"#2db7f5",text:"#2db7f5"}),t[3]||(t[3]=n("br",null,null,-1)),s(u,{color:"#87d068",text:"#87d068"}),t[4]||(t[4]=n("br",null,null,-1)),s(u,{color:"#108ee9",text:"#108ee9"})]),htmlCode:o(()=>t[5]||(t[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  340. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("h4")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Presets:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("h4")]),n("span",{class:"token punctuation"},">")]),a(`
  341. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  342. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("color in colors"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("color"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  343. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("color"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("color"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  344. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  345. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  346. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Custom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  347. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#f50"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#f50"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  348. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  349. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#2db7f5"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#2db7f5"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  350. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  351. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#87d068"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#87d068"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  352. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  353. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#108ee9"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#108ee9"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  354. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  355. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  356. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  357. `),n("span",{class:"token keyword"},"const"),a(" colors "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),a(`
  358. `),n("span",{class:"token string"},"'pink'"),n("span",{class:"token punctuation"},","),a(`
  359. `),n("span",{class:"token string"},"'red'"),n("span",{class:"token punctuation"},","),a(`
  360. `),n("span",{class:"token string"},"'yellow'"),n("span",{class:"token punctuation"},","),a(`
  361. `),n("span",{class:"token string"},"'orange'"),n("span",{class:"token punctuation"},","),a(`
  362. `),n("span",{class:"token string"},"'cyan'"),n("span",{class:"token punctuation"},","),a(`
  363. `),n("span",{class:"token string"},"'green'"),n("span",{class:"token punctuation"},","),a(`
  364. `),n("span",{class:"token string"},"'blue'"),n("span",{class:"token punctuation"},","),a(`
  365. `),n("span",{class:"token string"},"'purple'"),n("span",{class:"token punctuation"},","),a(`
  366. `),n("span",{class:"token string"},"'geekblue'"),n("span",{class:"token punctuation"},","),a(`
  367. `),n("span",{class:"token string"},"'magenta'"),n("span",{class:"token punctuation"},","),a(`
  368. `),n("span",{class:"token string"},"'volcano'"),n("span",{class:"token punctuation"},","),a(`
  369. `),n("span",{class:"token string"},"'gold'"),n("span",{class:"token punctuation"},","),a(`
  370. `),n("span",{class:"token string"},"'lime'"),n("span",{class:"token punctuation"},","),a(`
  371. `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
  372. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  373. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  374. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  375. colors`),n("span",{class:"token punctuation"},","),a(`
  376. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  377. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  378. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  379. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  380. `)])],-1)])),jsVersionHtml:o(()=>t[6]||(t[6]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  381. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("h4")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Presets:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("h4")]),n("span",{class:"token punctuation"},">")]),a(`
  382. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  383. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("color in colors"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("color"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  384. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},":color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("color"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("color"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  385. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  386. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  387. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Custom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  388. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#f50"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#f50"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  389. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  390. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#2db7f5"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#2db7f5"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  391. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  392. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#87d068"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#87d068"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  393. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  394. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#108ee9"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#108ee9"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  395. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  396. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  397. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  398. `),n("span",{class:"token keyword"},"const"),a(" colors "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'pink'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'red'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'yellow'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'orange'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'cyan'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'green'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'blue'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'purple'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'geekblue'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'magenta'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'volcano'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'gold'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'lime'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
  399. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  400. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  401. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  402. colors`),n("span",{class:"token punctuation"},","),a(`
  403. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  404. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  405. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  406. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  407. `)])],-1)])),_:1})}const en=d(sn,[["render",on]]),cn={},pn={href:"#"};function ln(l,t){const c=e("a-avatar"),p=e("a-badge"),i=e("demo-box");return k(),g(i,{jsfiddle:{us:"The badge can be wrapped with `a` tag to make it linkable.",cn:"\u7528 a \u6807\u7B7E\u8FDB\u884C\u5305\u88F9\u5373\u53EF\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  408. <span aria-hidden="true" class="anchor">#</span>
  409. </a></h2>
  410. <p>\u7528 a \u6807\u7B7E\u8FDB\u884C\u5305\u88F9\u5373\u53EF\u3002</p>
  411. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  412. <span aria-hidden="true" class="anchor">#</span>
  413. </a></h2>
  414. <p>The badge can be wrapped with <code>a</code> tag to make it linkable.</p>
  415. `,order:8,title:{"zh-CN":"\u53EF\u70B9\u51FB","en-US":"Clickable"},relativePath:"components/badge/demo/link.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhIGhyZWY9IiMiPgogICAgPGEtYmFkZ2UgY291bnQ9IjUiPgogICAgICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgc2l6ZT0ibGFyZ2UiIC8+CiAgICA8L2EtYmFkZ2U+CiAgPC9hPgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhIGhyZWY9IiMiPgogICAgPGEtYmFkZ2UgY291bnQ9IjUiPgogICAgICA8YS1hdmF0YXIgc2hhcGU9InNxdWFyZSIgc2l6ZT0ibGFyZ2UiIC8+CiAgICA8L2EtYmFkZ2U+CiAgPC9hPgo8L3RlbXBsYXRlPg=="}},{default:o(()=>[n("a",pn,[s(p,{count:"5"},{default:o(()=>[s(c,{shape:"square",size:"large"})]),_:1})])]),htmlCode:o(()=>t[0]||(t[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  416. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  417. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  418. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  419. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  420. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),a(`
  421. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  422. `)])],-1)])),jsVersionHtml:o(()=>t[1]||(t[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  423. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  424. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge")]),a(),n("span",{class:"token attr-name"},"count"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  425. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"shape"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("square"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  426. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge")]),n("span",{class:"token punctuation"},">")]),a(`
  427. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),a(`
  428. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  429. `)])],-1)])),_:1})}const un=d(cn,[["render",ln]]),kn={};function rn(l,t){const c=e("a-card"),p=e("a-badge-ribbon"),i=e("demo-box");return k(),g(i,{jsfiddle:{us:"Use ribbon badge.",cn:"\u4F7F\u7528\u7F0E\u5E26\u578B\u7684\u5FBD\u6807\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  430. <span aria-hidden="true" class="anchor">#</span>
  431. </a></h2>
  432. <p>\u4F7F\u7528\u7F0E\u5E26\u578B\u7684\u5FBD\u6807\u3002</p>
  433. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  434. <span aria-hidden="true" class="anchor">#</span>
  435. </a></h2>
  436. <p>Use ribbon badge.</p>
  437. `,order:9,title:{"zh-CN":"\u7F0E\u5E26","en-US":"Ribbon"},relativePath:"components/badge/demo/ribbon.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlLXJpYmJvbiB0ZXh0PSJIaXBwaWVzIj4KICAgIDxhLWNhcmQgdGl0bGU9IlB1c2hlcyBvcGVuIHRoZSB3aW5kb3ciIHNpemU9InNtYWxsIj5hbmQgcmFpc2VzIHRoZSBzcHlnbGFzcy48L2EtY2FyZD4KICA8L2EtYmFkZ2UtcmliYm9uPgogIDxhLWJhZGdlLXJpYmJvbiB0ZXh0PSJIaXBwaWVzIiBjb2xvcj0icGluayI+CiAgICA8YS1jYXJkIHRpdGxlPSJQdXNoZXMgb3BlbiB0aGUgd2luZG93IiBzaXplPSJzbWFsbCI+YW5kIHJhaXNlcyB0aGUgc3B5Z2xhc3MuPC9hLWNhcmQ+CiAgPC9hLWJhZGdlLXJpYmJvbj4KICA8YS1iYWRnZS1yaWJib24gdGV4dD0iSGlwcGllcyIgY29sb3I9InJlZCI+CiAgICA8YS1jYXJkIHRpdGxlPSJQdXNoZXMgb3BlbiB0aGUgd2luZG93IiBzaXplPSJzbWFsbCI+YW5kIHJhaXNlcyB0aGUgc3B5Z2xhc3MuPC9hLWNhcmQ+CiAgPC9hLWJhZGdlLXJpYmJvbj4KICA8YS1iYWRnZS1yaWJib24gdGV4dD0iSGlwcGllcyIgY29sb3I9ImN5YW4iPgogICAgPGEtY2FyZCB0aXRsZT0iUHVzaGVzIG9wZW4gdGhlIHdpbmRvdyIgc2l6ZT0ic21hbGwiPmFuZCByYWlzZXMgdGhlIHNweWdsYXNzLjwvYS1jYXJkPgogIDwvYS1iYWRnZS1yaWJib24+CiAgPGEtYmFkZ2UtcmliYm9uIHRleHQ9IkhpcHBpZXMiIGNvbG9yPSJncmVlbiI+CiAgICA8YS1jYXJkIHRpdGxlPSJQdXNoZXMgb3BlbiB0aGUgd2luZG93IiBzaXplPSJzbWFsbCI+YW5kIHJhaXNlcyB0aGUgc3B5Z2xhc3MuPC9hLWNhcmQ+CiAgPC9hLWJhZGdlLXJpYmJvbj4KICA8YS1iYWRnZS1yaWJib24gdGV4dD0iSGlwcGllcyIgY29sb3I9InB1cnBsZSI+CiAgICA8YS1jYXJkIHRpdGxlPSJQdXNoZXMgb3BlbiB0aGUgd2luZG93IiBzaXplPSJzbWFsbCI+YW5kIHJhaXNlcyB0aGUgc3B5Z2xhc3MuPC9hLWNhcmQ+CiAgPC9hLWJhZGdlLXJpYmJvbj4KICA8YS1iYWRnZS1yaWJib24gdGV4dD0iSGlwcGllcyIgY29sb3I9InZvbGNhbm8iPgogICAgPGEtY2FyZCB0aXRsZT0iUHVzaGVzIG9wZW4gdGhlIHdpbmRvdyIgc2l6ZT0ic21hbGwiPmFuZCByYWlzZXMgdGhlIHNweWdsYXNzLjwvYS1jYXJkPgogIDwvYS1iYWRnZS1yaWJib24+CiAgPGEtYmFkZ2UtcmliYm9uIHRleHQ9IkhpcHBpZXMiIGNvbG9yPSJtYWdlbnRhIj4KICAgIDxhLWNhcmQgdGl0bGU9IlB1c2hlcyBvcGVuIHRoZSB3aW5kb3ciIHNpemU9InNtYWxsIj5hbmQgcmFpc2VzIHRoZSBzcHlnbGFzcy48L2EtY2FyZD4KICA8L2EtYmFkZ2UtcmliYm9uPgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJhZGdlLXJpYmJvbiB0ZXh0PSJIaXBwaWVzIj4KICAgIDxhLWNhcmQgdGl0bGU9IlB1c2hlcyBvcGVuIHRoZSB3aW5kb3ciIHNpemU9InNtYWxsIj5hbmQgcmFpc2VzIHRoZSBzcHlnbGFzcy48L2EtY2FyZD4KICA8L2EtYmFkZ2UtcmliYm9uPgogIDxhLWJhZGdlLXJpYmJvbiB0ZXh0PSJIaXBwaWVzIiBjb2xvcj0icGluayI+CiAgICA8YS1jYXJkIHRpdGxlPSJQdXNoZXMgb3BlbiB0aGUgd2luZG93IiBzaXplPSJzbWFsbCI+YW5kIHJhaXNlcyB0aGUgc3B5Z2xhc3MuPC9hLWNhcmQ+CiAgPC9hLWJhZGdlLXJpYmJvbj4KICA8YS1iYWRnZS1yaWJib24gdGV4dD0iSGlwcGllcyIgY29sb3I9InJlZCI+CiAgICA8YS1jYXJkIHRpdGxlPSJQdXNoZXMgb3BlbiB0aGUgd2luZG93IiBzaXplPSJzbWFsbCI+YW5kIHJhaXNlcyB0aGUgc3B5Z2xhc3MuPC9hLWNhcmQ+CiAgPC9hLWJhZGdlLXJpYmJvbj4KICA8YS1iYWRnZS1yaWJib24gdGV4dD0iSGlwcGllcyIgY29sb3I9ImN5YW4iPgogICAgPGEtY2FyZCB0aXRsZT0iUHVzaGVzIG9wZW4gdGhlIHdpbmRvdyIgc2l6ZT0ic21hbGwiPmFuZCByYWlzZXMgdGhlIHNweWdsYXNzLjwvYS1jYXJkPgogIDwvYS1iYWRnZS1yaWJib24+CiAgPGEtYmFkZ2UtcmliYm9uIHRleHQ9IkhpcHBpZXMiIGNvbG9yPSJncmVlbiI+CiAgICA8YS1jYXJkIHRpdGxlPSJQdXNoZXMgb3BlbiB0aGUgd2luZG93IiBzaXplPSJzbWFsbCI+YW5kIHJhaXNlcyB0aGUgc3B5Z2xhc3MuPC9hLWNhcmQ+CiAgPC9hLWJhZGdlLXJpYmJvbj4KICA8YS1iYWRnZS1yaWJib24gdGV4dD0iSGlwcGllcyIgY29sb3I9InB1cnBsZSI+CiAgICA8YS1jYXJkIHRpdGxlPSJQdXNoZXMgb3BlbiB0aGUgd2luZG93IiBzaXplPSJzbWFsbCI+YW5kIHJhaXNlcyB0aGUgc3B5Z2xhc3MuPC9hLWNhcmQ+CiAgPC9hLWJhZGdlLXJpYmJvbj4KICA8YS1iYWRnZS1yaWJib24gdGV4dD0iSGlwcGllcyIgY29sb3I9InZvbGNhbm8iPgogICAgPGEtY2FyZCB0aXRsZT0iUHVzaGVzIG9wZW4gdGhlIHdpbmRvdyIgc2l6ZT0ic21hbGwiPmFuZCByYWlzZXMgdGhlIHNweWdsYXNzLjwvYS1jYXJkPgogIDwvYS1iYWRnZS1yaWJib24+CiAgPGEtYmFkZ2UtcmliYm9uIHRleHQ9IkhpcHBpZXMiIGNvbG9yPSJtYWdlbnRhIj4KICAgIDxhLWNhcmQgdGl0bGU9IlB1c2hlcyBvcGVuIHRoZSB3aW5kb3ciIHNpemU9InNtYWxsIj5hbmQgcmFpc2VzIHRoZSBzcHlnbGFzcy48L2EtY2FyZD4KICA8L2EtYmFkZ2UtcmliYm9uPgo8L3RlbXBsYXRlPg=="}},{default:o(()=>[s(p,{text:"Hippies"},{default:o(()=>[s(c,{title:"Pushes open the window",size:"small"},{default:o(()=>t[0]||(t[0]=[a("and raises the spyglass.")])),_:1,__:[0]})]),_:1}),s(p,{text:"Hippies",color:"pink"},{default:o(()=>[s(c,{title:"Pushes open the window",size:"small"},{default:o(()=>t[1]||(t[1]=[a("and raises the spyglass.")])),_:1,__:[1]})]),_:1}),s(p,{text:"Hippies",color:"red"},{default:o(()=>[s(c,{title:"Pushes open the window",size:"small"},{default:o(()=>t[2]||(t[2]=[a("and raises the spyglass.")])),_:1,__:[2]})]),_:1}),s(p,{text:"Hippies",color:"cyan"},{default:o(()=>[s(c,{title:"Pushes open the window",size:"small"},{default:o(()=>t[3]||(t[3]=[a("and raises the spyglass.")])),_:1,__:[3]})]),_:1}),s(p,{text:"Hippies",color:"green"},{default:o(()=>[s(c,{title:"Pushes open the window",size:"small"},{default:o(()=>t[4]||(t[4]=[a("and raises the spyglass.")])),_:1,__:[4]})]),_:1}),s(p,{text:"Hippies",color:"purple"},{default:o(()=>[s(c,{title:"Pushes open the window",size:"small"},{default:o(()=>t[5]||(t[5]=[a("and raises the spyglass.")])),_:1,__:[5]})]),_:1}),s(p,{text:"Hippies",color:"volcano"},{default:o(()=>[s(c,{title:"Pushes open the window",size:"small"},{default:o(()=>t[6]||(t[6]=[a("and raises the spyglass.")])),_:1,__:[6]})]),_:1}),s(p,{text:"Hippies",color:"magenta"},{default:o(()=>[s(c,{title:"Pushes open the window",size:"small"},{default:o(()=>t[7]||(t[7]=[a("and raises the spyglass.")])),_:1,__:[7]})]),_:1})]),htmlCode:o(()=>t[8]||(t[8]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  438. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  439. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  440. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  441. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pink"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  442. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  443. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  444. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("red"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  445. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  446. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  447. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("cyan"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  448. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  449. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  450. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("green"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  451. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  452. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  453. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("purple"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  454. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  455. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  456. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("volcano"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  457. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  458. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  459. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("magenta"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  460. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  461. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  462. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  463. `)])],-1)])),jsVersionHtml:o(()=>t[9]||(t[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  464. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  465. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  466. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  467. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pink"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  468. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  469. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  470. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("red"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  471. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  472. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  473. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("cyan"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  474. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  475. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  476. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("green"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  477. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  478. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  479. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("purple"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  480. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  481. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  482. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("volcano"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  483. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  484. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  485. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-badge-ribbon")]),a(),n("span",{class:"token attr-name"},"text"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Hippies"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("magenta"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  486. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-card")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Pushes open the window"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("and raises the spyglass."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-card")]),n("span",{class:"token punctuation"},">")]),a(`
  487. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-badge-ribbon")]),n("span",{class:"token punctuation"},">")]),a(`
  488. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  489. `)])],-1)])),_:1})}const dn=d(kn,[["render",rn]]),gn={pageData:{title:"Badge",description:"",frontmatter:{category:"Components",type:"\u6570\u636E\u5C55\u793A",title:"Badge",subtitle:"\u5FBD\u6807\u6570",cover:"https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u4E00\u822C\u51FA\u73B0\u5728\u901A\u77E5\u56FE\u6807\u6216\u5934\u50CF\u7684\u53F3\u4E0A\u89D2\uFF0C\u7528\u4E8E\u663E\u793A\u9700\u8981\u5904\u7406\u7684\u6D88\u606F\u6761\u6570\uFF0C\u901A\u8FC7\u9192\u76EE\u89C6\u89C9\u5F62\u5F0F\u5438\u5F15\u7528\u6237\u5904\u7406\u3002"},{level:2,title:"API",slug:"API",content:`<a-badge :count="5" />
  490. `},{level:3,title:"Badge",slug:"Badge",content:""},{level:3,title:"Badge.Ribbon (2.0.1+)",slug:"Badge-Ribbon-2-0-1",content:""}],relativePath:"components/badge/index.zh-CN.md",content:`
  491. \u56FE\u6807\u53F3\u4E0A\u89D2\u7684\u5706\u5F62\u5FBD\u6807\u6570\u5B57\u3002
  492. ## \u4F55\u65F6\u4F7F\u7528
  493. \u4E00\u822C\u51FA\u73B0\u5728\u901A\u77E5\u56FE\u6807\u6216\u5934\u50CF\u7684\u53F3\u4E0A\u89D2\uFF0C\u7528\u4E8E\u663E\u793A\u9700\u8981\u5904\u7406\u7684\u6D88\u606F\u6761\u6570\uFF0C\u901A\u8FC7\u9192\u76EE\u89C6\u89C9\u5F62\u5F0F\u5438\u5F15\u7528\u6237\u5904\u7406\u3002
  494. ## API
  495. \`\`\`html
  496. &lt;a-badge :count=&quot;5&quot;&gt;
  497. &lt;a href=&quot;#&quot; class=&quot;head-example&quot; /&gt;
  498. &lt;/a-badge&gt;
  499. \`\`\`
  500. \`\`\`html
  501. &lt;a-badge :count=&quot;5&quot; /&gt;
  502. \`\`\`
  503. ### Badge
  504. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
  505. | --- | --- | --- | --- | --- |
  506. | color | \u81EA\u5B9A\u4E49\u5C0F\u5706\u70B9\u7684\u989C\u8272 | string | - | 1.5.0 |
  507. | count | \u5C55\u793A\u7684\u6570\u5B57\uFF0C\u5927\u4E8E overflowCount \u65F6\u663E\u793A\u4E3A \`\${overflowCount}+\`\uFF0C\u4E3A 0 \u65F6\u9690\u85CF | number \\| string \\| slot | | |
  508. | dot | \u4E0D\u5C55\u793A\u6570\u5B57\uFF0C\u53EA\u6709\u4E00\u4E2A\u5C0F\u7EA2\u70B9 | boolean | false | |
  509. | numberStyle | \u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u6837\u5F0F | object | &#39;&#39; | |
  510. | offset | \u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u4F4D\u7F6E\u504F\u79FB\uFF0C\u683C\u5F0F\u4E3A [x, y] | [number\\|string, number\\|string] | - | |
  511. | overflowCount | \u5C55\u793A\u5C01\u9876\u7684\u6570\u5B57\u503C | number | 99 | |
  512. | showZero | \u5F53\u6570\u503C\u4E3A 0 \u65F6\uFF0C\u662F\u5426\u5C55\u793A Badge | boolean | false | |
  513. | status | \u8BBE\u7F6E Badge \u4E3A\u72B6\u6001\u70B9 | Enum{ &#39;success&#39;, &#39;processing, &#39;default&#39;, &#39;error&#39;, &#39;warning&#39; } | &#39;&#39; | |
  514. | text | \u5728\u8BBE\u7F6E\u4E86 \`status\` \u7684\u524D\u63D0\u4E0B\u6709\u6548\uFF0C\u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u6587\u672C | string | &#39;&#39; | |
  515. | title | \u8BBE\u7F6E\u9F20\u6807\u653E\u5728\u72B6\u6001\u70B9\u4E0A\u65F6\u663E\u793A\u7684\u6587\u5B57 | string | \`count\` | |
  516. ### Badge.Ribbon (2.0.1+)
  517. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
  518. | --- | --- | --- | --- | --- |
  519. | color | \u81EA\u5B9A\u4E49\u7F0E\u5E26\u7684\u989C\u8272 | string | - | |
  520. | placement | \u7F0E\u5E26\u7684\u4F4D\u7F6E\uFF0C\`start\` \u548C \`end\` \u968F\u6587\u5B57\u65B9\u5411\uFF08RTL \u6216 LTR\uFF09\u53D8\u52A8 | \`start\` \\| \`end\` | \`end\` | |
  521. | text | \u7F0E\u5E26\u4E2D\u586B\u5165\u7684\u5185\u5BB9 | string \\| VNode \\| slot | - | |
  522. `,html:`<p>\u56FE\u6807\u53F3\u4E0A\u89D2\u7684\u5706\u5F62\u5FBD\u6807\u6570\u5B57\u3002</p>
  523. <h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528">
  524. <span aria-hidden="true" class="anchor">#</span>
  525. </a></h2>
  526. <p>\u4E00\u822C\u51FA\u73B0\u5728\u901A\u77E5\u56FE\u6807\u6216\u5934\u50CF\u7684\u53F3\u4E0A\u89D2\uFF0C\u7528\u4E8E\u663E\u793A\u9700\u8981\u5904\u7406\u7684\u6D88\u606F\u6761\u6570\uFF0C\u901A\u8FC7\u9192\u76EE\u89C6\u89C9\u5F62\u5F0F\u5438\u5F15\u7528\u6237\u5904\u7406\u3002</p>
  527. <h2 id="API">API <a class="header-anchor" href="#API">
  528. <span aria-hidden="true" class="anchor">#</span>
  529. </a></h2>
  530. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-badge</span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  531. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>head-example<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  532. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-badge</span><span class="token punctuation">></span></span>
  533. </code></pre>
  534. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-badge</span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  535. </code></pre>
  536. <h3 id="Badge">Badge <a class="header-anchor" href="#Badge">
  537. <span aria-hidden="true" class="anchor">#</span>
  538. </a></h3>
  539. <table>
  540. <thead>
  541. <tr>
  542. <th>\u53C2\u6570</th>
  543. <th>\u8BF4\u660E</th>
  544. <th>\u7C7B\u578B</th>
  545. <th>\u9ED8\u8BA4\u503C</th>
  546. <th>\u7248\u672C</th>
  547. </tr>
  548. </thead>
  549. <tbody>
  550. <tr>
  551. <td>color</td>
  552. <td>\u81EA\u5B9A\u4E49\u5C0F\u5706\u70B9\u7684\u989C\u8272</td>
  553. <td>string</td>
  554. <td>-</td>
  555. <td>1.5.0</td>
  556. </tr>
  557. <tr>
  558. <td>count</td>
  559. <td>\u5C55\u793A\u7684\u6570\u5B57\uFF0C\u5927\u4E8E overflowCount \u65F6\u663E\u793A\u4E3A <code>\${overflowCount}+</code>\uFF0C\u4E3A 0 \u65F6\u9690\u85CF</td>
  560. <td>number | string | slot</td>
  561. <td></td>
  562. <td></td>
  563. </tr>
  564. <tr>
  565. <td>dot</td>
  566. <td>\u4E0D\u5C55\u793A\u6570\u5B57\uFF0C\u53EA\u6709\u4E00\u4E2A\u5C0F\u7EA2\u70B9</td>
  567. <td>boolean</td>
  568. <td>false</td>
  569. <td></td>
  570. </tr>
  571. <tr>
  572. <td>numberStyle</td>
  573. <td>\u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u6837\u5F0F</td>
  574. <td>object</td>
  575. <td>''</td>
  576. <td></td>
  577. </tr>
  578. <tr>
  579. <td>offset</td>
  580. <td>\u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u4F4D\u7F6E\u504F\u79FB\uFF0C\u683C\u5F0F\u4E3A [x, y]</td>
  581. <td>[number|string, number|string]</td>
  582. <td>-</td>
  583. <td></td>
  584. </tr>
  585. <tr>
  586. <td>overflowCount</td>
  587. <td>\u5C55\u793A\u5C01\u9876\u7684\u6570\u5B57\u503C</td>
  588. <td>number</td>
  589. <td>99</td>
  590. <td></td>
  591. </tr>
  592. <tr>
  593. <td>showZero</td>
  594. <td>\u5F53\u6570\u503C\u4E3A 0 \u65F6\uFF0C\u662F\u5426\u5C55\u793A Badge</td>
  595. <td>boolean</td>
  596. <td>false</td>
  597. <td></td>
  598. </tr>
  599. <tr>
  600. <td>status</td>
  601. <td>\u8BBE\u7F6E Badge \u4E3A\u72B6\u6001\u70B9</td>
  602. <td>Enum{ 'success', 'processing, 'default', 'error', 'warning' }</td>
  603. <td>''</td>
  604. <td></td>
  605. </tr>
  606. <tr>
  607. <td>text</td>
  608. <td>\u5728\u8BBE\u7F6E\u4E86 <code>status</code> \u7684\u524D\u63D0\u4E0B\u6709\u6548\uFF0C\u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u6587\u672C</td>
  609. <td>string</td>
  610. <td>''</td>
  611. <td></td>
  612. </tr>
  613. <tr>
  614. <td>title</td>
  615. <td>\u8BBE\u7F6E\u9F20\u6807\u653E\u5728\u72B6\u6001\u70B9\u4E0A\u65F6\u663E\u793A\u7684\u6587\u5B57</td>
  616. <td>string</td>
  617. <td><code>count</code></td>
  618. <td></td>
  619. </tr>
  620. </tbody>
  621. </table>
  622. <h3 id="Badge-Ribbon-2-0-1">Badge.Ribbon (2.0.1+) <a class="header-anchor" href="#Badge-Ribbon-2-0-1">
  623. <span aria-hidden="true" class="anchor">#</span>
  624. </a></h3>
  625. <table>
  626. <thead>
  627. <tr>
  628. <th>\u53C2\u6570</th>
  629. <th>\u8BF4\u660E</th>
  630. <th>\u7C7B\u578B</th>
  631. <th>\u9ED8\u8BA4\u503C</th>
  632. <th>\u7248\u672C</th>
  633. </tr>
  634. </thead>
  635. <tbody>
  636. <tr>
  637. <td>color</td>
  638. <td>\u81EA\u5B9A\u4E49\u7F0E\u5E26\u7684\u989C\u8272</td>
  639. <td>string</td>
  640. <td>-</td>
  641. <td></td>
  642. </tr>
  643. <tr>
  644. <td>placement</td>
  645. <td>\u7F0E\u5E26\u7684\u4F4D\u7F6E\uFF0C<code>start</code> \u548C <code>end</code> \u968F\u6587\u5B57\u65B9\u5411\uFF08RTL \u6216 LTR\uFF09\u53D8\u52A8</td>
  646. <td><code>start</code> | <code>end</code></td>
  647. <td><code>end</code></td>
  648. <td></td>
  649. </tr>
  650. <tr>
  651. <td>text</td>
  652. <td>\u7F0E\u5E26\u4E2D\u586B\u5165\u7684\u5185\u5BB9</td>
  653. <td>string | VNode | slot</td>
  654. <td>-</td>
  655. <td></td>
  656. </tr>
  657. </tbody>
  658. </table>
  659. `,lastUpdated:1748060300539}},mn={class:"markdown"};function bn(l,t,c,p,i,h){return k(),C("article",mn,t[0]||(t[0]=[w(`<p>\u56FE\u6807\u53F3\u4E0A\u89D2\u7684\u5706\u5F62\u5FBD\u6807\u6570\u5B57\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u4E00\u822C\u51FA\u73B0\u5728\u901A\u77E5\u56FE\u6807\u6216\u5934\u50CF\u7684\u53F3\u4E0A\u89D2\uFF0C\u7528\u4E8E\u663E\u793A\u9700\u8981\u5904\u7406\u7684\u6D88\u606F\u6761\u6570\uFF0C\u901A\u8FC7\u9192\u76EE\u89C6\u89C9\u5F62\u5F0F\u5438\u5F15\u7528\u6237\u5904\u7406\u3002</p><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-badge</span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  660. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>head-example<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  661. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-badge</span><span class="token punctuation">&gt;</span></span>
  662. </code></pre><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-badge</span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  663. </code></pre><h3 id="Badge">Badge <a class="header-anchor" href="#Badge"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>color</td><td>\u81EA\u5B9A\u4E49\u5C0F\u5706\u70B9\u7684\u989C\u8272</td><td>string</td><td>-</td><td>1.5.0</td></tr><tr><td>count</td><td>\u5C55\u793A\u7684\u6570\u5B57\uFF0C\u5927\u4E8E overflowCount \u65F6\u663E\u793A\u4E3A <code>\${overflowCount}+</code>\uFF0C\u4E3A 0 \u65F6\u9690\u85CF</td><td>number | string | slot</td><td></td><td></td></tr><tr><td>dot</td><td>\u4E0D\u5C55\u793A\u6570\u5B57\uFF0C\u53EA\u6709\u4E00\u4E2A\u5C0F\u7EA2\u70B9</td><td>boolean</td><td>false</td><td></td></tr><tr><td>numberStyle</td><td>\u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u6837\u5F0F</td><td>object</td><td>&#39;&#39;</td><td></td></tr><tr><td>offset</td><td>\u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u4F4D\u7F6E\u504F\u79FB\uFF0C\u683C\u5F0F\u4E3A [x, y]</td><td>[number|string, number|string]</td><td>-</td><td></td></tr><tr><td>overflowCount</td><td>\u5C55\u793A\u5C01\u9876\u7684\u6570\u5B57\u503C</td><td>number</td><td>99</td><td></td></tr><tr><td>showZero</td><td>\u5F53\u6570\u503C\u4E3A 0 \u65F6\uFF0C\u662F\u5426\u5C55\u793A Badge</td><td>boolean</td><td>false</td><td></td></tr><tr><td>status</td><td>\u8BBE\u7F6E Badge \u4E3A\u72B6\u6001\u70B9</td><td>Enum{ &#39;success&#39;, &#39;processing, &#39;default&#39;, &#39;error&#39;, &#39;warning&#39; }</td><td>&#39;&#39;</td><td></td></tr><tr><td>text</td><td>\u5728\u8BBE\u7F6E\u4E86 <code>status</code> \u7684\u524D\u63D0\u4E0B\u6709\u6548\uFF0C\u8BBE\u7F6E\u72B6\u6001\u70B9\u7684\u6587\u672C</td><td>string</td><td>&#39;&#39;</td><td></td></tr><tr><td>title</td><td>\u8BBE\u7F6E\u9F20\u6807\u653E\u5728\u72B6\u6001\u70B9\u4E0A\u65F6\u663E\u793A\u7684\u6587\u5B57</td><td>string</td><td><code>count</code></td><td></td></tr></tbody></table><h3 id="Badge-Ribbon-2-0-1">Badge.Ribbon (2.0.1+) <a class="header-anchor" href="#Badge-Ribbon-2-0-1"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>color</td><td>\u81EA\u5B9A\u4E49\u7F0E\u5E26\u7684\u989C\u8272</td><td>string</td><td>-</td><td></td></tr><tr><td>placement</td><td>\u7F0E\u5E26\u7684\u4F4D\u7F6E\uFF0C<code>start</code> \u548C <code>end</code> \u968F\u6587\u5B57\u65B9\u5411\uFF08RTL \u6216 LTR\uFF09\u53D8\u52A8</td><td><code>start</code> | <code>end</code></td><td><code>end</code></td><td></td></tr><tr><td>text</td><td>\u7F0E\u5E26\u4E2D\u586B\u5165\u7684\u5185\u5BB9</td><td>string | VNode | slot</td><td>-</td><td></td></tr></tbody></table>`,10)]))}const hn=d(gn,[["render",bn]]),In={pageData:{title:"Badge",description:"",frontmatter:{category:"Components",type:"Data Display",title:"Badge",cover:"https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg"},headers:[{level:2,title:"When To Use",slug:"When-To-Use",content:"Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count."},{level:2,title:"API",slug:"API",content:`<a-badge :count="5" />
  664. `},{level:3,title:"Badge",slug:"Badge",content:""},{level:3,title:"Badge.Ribbon (2.0.1+)",slug:"Badge-Ribbon-2-0-1",content:""}],relativePath:"components/badge/index.en_US.md",content:"\nSmall numerical value or status descriptor for UI elements.\n\n## When To Use\n\nBadge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.\n\n## API\n\n```html\n&lt;a-badge :count=&quot;5&quot;&gt;\n &lt;a href=&quot;#&quot; class=&quot;head-example&quot; /&gt;\n&lt;/a-badge&gt;\n```\n\n```html\n&lt;a-badge :count=&quot;5&quot; /&gt;\n```\n\n### Badge\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| color | Customize Badge dot color | string | - | 1.5.0 |\n| count | Number to show in badge | number\\|string \\| slot | | |\n| dot | Whether to display a red dot instead of `count` | boolean | `false` | |\n| offset | set offset of the badge dot, like [x, y] | [number\\|string, number\\|string] | - | |\n| overflowCount | Max count to show | number | 99 | |\n| showZero | Whether to show badge when `count` is zero | boolean | `false` | |\n| status | Set Badge as a status dot | `success` \\| `processing` \\| `default` \\| `error` \\| `warning` | `&#39;&#39;` | |\n| text | If `status` is set, `text` sets the display text of the status `dot` | string | `&#39;&#39;` | |\n| numberStyle | sets the display style of the status `dot` | object | &#39;&#39; | |\n| title | Text to show when hovering over the badge | string | `count` | |\n\n### Badge.Ribbon (2.0.1+)\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| color | Customize Ribbon color | string | - | |\n| placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \\| `end` | `end` | |\n| text | Content inside the Ribbon | string \\| VNode \\| slot | - | |\n",html:`<p>Small numerical value or status descriptor for UI elements.</p>
  665. <h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use">
  666. <span aria-hidden="true" class="anchor">#</span>
  667. </a></h2>
  668. <p>Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.</p>
  669. <h2 id="API">API <a class="header-anchor" href="#API">
  670. <span aria-hidden="true" class="anchor">#</span>
  671. </a></h2>
  672. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-badge</span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  673. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>head-example<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  674. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-badge</span><span class="token punctuation">></span></span>
  675. </code></pre>
  676. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-badge</span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  677. </code></pre>
  678. <h3 id="Badge">Badge <a class="header-anchor" href="#Badge">
  679. <span aria-hidden="true" class="anchor">#</span>
  680. </a></h3>
  681. <table>
  682. <thead>
  683. <tr>
  684. <th>Property</th>
  685. <th>Description</th>
  686. <th>Type</th>
  687. <th>Default</th>
  688. <th>Version</th>
  689. </tr>
  690. </thead>
  691. <tbody>
  692. <tr>
  693. <td>color</td>
  694. <td>Customize Badge dot color</td>
  695. <td>string</td>
  696. <td>-</td>
  697. <td>1.5.0</td>
  698. </tr>
  699. <tr>
  700. <td>count</td>
  701. <td>Number to show in badge</td>
  702. <td>number|string | slot</td>
  703. <td></td>
  704. <td></td>
  705. </tr>
  706. <tr>
  707. <td>dot</td>
  708. <td>Whether to display a red dot instead of <code>count</code></td>
  709. <td>boolean</td>
  710. <td><code>false</code></td>
  711. <td></td>
  712. </tr>
  713. <tr>
  714. <td>offset</td>
  715. <td>set offset of the badge dot, like [x, y]</td>
  716. <td>[number|string, number|string]</td>
  717. <td>-</td>
  718. <td></td>
  719. </tr>
  720. <tr>
  721. <td>overflowCount</td>
  722. <td>Max count to show</td>
  723. <td>number</td>
  724. <td>99</td>
  725. <td></td>
  726. </tr>
  727. <tr>
  728. <td>showZero</td>
  729. <td>Whether to show badge when <code>count</code> is zero</td>
  730. <td>boolean</td>
  731. <td><code>false</code></td>
  732. <td></td>
  733. </tr>
  734. <tr>
  735. <td>status</td>
  736. <td>Set Badge as a status dot</td>
  737. <td><code>success</code> | <code>processing</code> | <code>default</code> | <code>error</code> | <code>warning</code></td>
  738. <td><code>''</code></td>
  739. <td></td>
  740. </tr>
  741. <tr>
  742. <td>text</td>
  743. <td>If <code>status</code> is set, <code>text</code> sets the display text of the status <code>dot</code></td>
  744. <td>string</td>
  745. <td><code>''</code></td>
  746. <td></td>
  747. </tr>
  748. <tr>
  749. <td>numberStyle</td>
  750. <td>sets the display style of the status <code>dot</code></td>
  751. <td>object</td>
  752. <td>''</td>
  753. <td></td>
  754. </tr>
  755. <tr>
  756. <td>title</td>
  757. <td>Text to show when hovering over the badge</td>
  758. <td>string</td>
  759. <td><code>count</code></td>
  760. <td></td>
  761. </tr>
  762. </tbody>
  763. </table>
  764. <h3 id="Badge-Ribbon-2-0-1">Badge.Ribbon (2.0.1+) <a class="header-anchor" href="#Badge-Ribbon-2-0-1">
  765. <span aria-hidden="true" class="anchor">#</span>
  766. </a></h3>
  767. <table>
  768. <thead>
  769. <tr>
  770. <th>Property</th>
  771. <th>Description</th>
  772. <th>Type</th>
  773. <th>Default</th>
  774. <th>Version</th>
  775. </tr>
  776. </thead>
  777. <tbody>
  778. <tr>
  779. <td>color</td>
  780. <td>Customize Ribbon color</td>
  781. <td>string</td>
  782. <td>-</td>
  783. <td></td>
  784. </tr>
  785. <tr>
  786. <td>placement</td>
  787. <td>The placement of the Ribbon, <code>start</code> and <code>end</code> follow text direction (RTL or LTR)</td>
  788. <td><code>start</code> | <code>end</code></td>
  789. <td><code>end</code></td>
  790. <td></td>
  791. </tr>
  792. <tr>
  793. <td>text</td>
  794. <td>Content inside the Ribbon</td>
  795. <td>string | VNode | slot</td>
  796. <td>-</td>
  797. <td></td>
  798. </tr>
  799. </tbody>
  800. </table>
  801. `,lastUpdated:1748060300539}},Cn={class:"markdown"};function vn(l,t,c,p,i,h){return k(),C("article",Cn,t[0]||(t[0]=[w(`<p>Small numerical value or status descriptor for UI elements.</p><h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use"><span aria-hidden="true" class="anchor">#</span></a></h2><p>Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.</p><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-badge</span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  802. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>head-example<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  803. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-badge</span><span class="token punctuation">&gt;</span></span>
  804. </code></pre><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-badge</span> <span class="token attr-name">:count</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>5<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  805. </code></pre><h3 id="Badge">Badge <a class="header-anchor" href="#Badge"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>color</td><td>Customize Badge dot color</td><td>string</td><td>-</td><td>1.5.0</td></tr><tr><td>count</td><td>Number to show in badge</td><td>number|string | slot</td><td></td><td></td></tr><tr><td>dot</td><td>Whether to display a red dot instead of <code>count</code></td><td>boolean</td><td><code>false</code></td><td></td></tr><tr><td>offset</td><td>set offset of the badge dot, like [x, y]</td><td>[number|string, number|string]</td><td>-</td><td></td></tr><tr><td>overflowCount</td><td>Max count to show</td><td>number</td><td>99</td><td></td></tr><tr><td>showZero</td><td>Whether to show badge when <code>count</code> is zero</td><td>boolean</td><td><code>false</code></td><td></td></tr><tr><td>status</td><td>Set Badge as a status dot</td><td><code>success</code> | <code>processing</code> | <code>default</code> | <code>error</code> | <code>warning</code></td><td><code>&#39;&#39;</code></td><td></td></tr><tr><td>text</td><td>If <code>status</code> is set, <code>text</code> sets the display text of the status <code>dot</code></td><td>string</td><td><code>&#39;&#39;</code></td><td></td></tr><tr><td>numberStyle</td><td>sets the display style of the status <code>dot</code></td><td>object</td><td>&#39;&#39;</td><td></td></tr><tr><td>title</td><td>Text to show when hovering over the badge</td><td>string</td><td><code>count</code></td><td></td></tr></tbody></table><h3 id="Badge-Ribbon-2-0-1">Badge.Ribbon (2.0.1+) <a class="header-anchor" href="#Badge-Ribbon-2-0-1"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>color</td><td>Customize Ribbon color</td><td>string</td><td>-</td><td></td></tr><tr><td>placement</td><td>The placement of the Ribbon, <code>start</code> and <code>end</code> follow text direction (RTL or LTR)</td><td><code>start</code> | <code>end</code></td><td><code>end</code></td><td></td></tr><tr><td>text</td><td>Content inside the Ribbon</td><td>string | VNode | slot</td><td>-</td><td></td></tr></tbody></table>`,10)]))}const Zn=d(In,[["render",vn]]),yn=I({CN:hn,US:Zn,components:{Basic:N,NoWapper:F,Overflow:T,Dot:j,Status:O,Change:D,Title:an,Colors:en,Link:un,Ribbon:dn}});function Gn(l,t,c,p,i,h){const u=e("Basic"),r=e("NoWapper"),b=e("Overflow"),m=e("Dot"),v=e("Status"),Z=e("Change"),y=e("Title"),G=e("Colors"),A=e("Ribbon"),Y=e("Link"),P=e("demo-sort");return k(),g(P,null,{default:o(()=>[s(u),s(r),s(b),s(m),s(v),s(Z),s(y),s(G),s(A),s(Y)]),_:1})}const wn=d(yn,[["render",Gn]]);export{wn as default};