mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 11:18:14 +08:00
fix: Badge count style when customize color (#31617)
* fix: Badge count style when customize color close #31590 close #31591 * add demo for debug * update badge demos * create ribbon.test.tsx
This commit is contained in:
afc163
GitHub
parent
416482bb87
commit
06dff86287
@ -1,14 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
@ -25,14 +29,18 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
@ -40,14 +48,18 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
|
||||
>
|
||||
0
|
||||
</sup>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
aria-label="clock-circle"
|
||||
class="anticon anticon-clock-circle ant-scroll-number-custom-component"
|
||||
@ -71,20 +83,23 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/change.md correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
@ -101,7 +116,7 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</span>,
|
||||
<div
|
||||
class="ant-btn-group"
|
||||
>
|
||||
@ -181,23 +196,27 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
style="margin-top:10px"
|
||||
>
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>,
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>
|
||||
</span>,
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
@ -210,9 +229,8 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/colorful.md correctly 1`] = `
|
||||
@ -421,7 +439,6 @@ Array [
|
||||
Custom
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -434,8 +451,8 @@ Array [
|
||||
>
|
||||
#f50
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -448,8 +465,8 @@ Array [
|
||||
>
|
||||
#2db7f5
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -462,8 +479,8 @@ Array [
|
||||
>
|
||||
#87d068
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -476,13 +493,12 @@ Array [
|
||||
>
|
||||
#108ee9
|
||||
</span>
|
||||
</span>
|
||||
</div>,
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -490,6 +506,7 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
|
||||
aria-label="notification"
|
||||
class="anticon anticon-notification"
|
||||
role="img"
|
||||
style="font-size:16px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -509,30 +526,7 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
aria-label="notification"
|
||||
class="anticon anticon-notification"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="notification"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
@ -545,8 +539,8 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/link.md correctly 1`] = `
|
||||
@ -557,8 +551,13 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
|
||||
class="ant-badge"
|
||||
>
|
||||
<span
|
||||
class="head-example"
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
@ -579,6 +578,189 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
|
||||
</a>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/mix.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-status-success"
|
||||
data-show="true"
|
||||
title="5"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-status-warning"
|
||||
data-show="true"
|
||||
title="5"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
|
||||
data-show="true"
|
||||
title="5"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
style="background:#fa541c"
|
||||
title="5"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-success"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-warning"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
|
||||
data-show="true"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
data-show="true"
|
||||
style="background:#fa541c"
|
||||
/>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
@ -668,31 +850,6 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-not-a-wrapper site-badge-count-4"
|
||||
>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
title="4"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
@ -716,10 +873,14 @@ exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
@ -741,14 +902,18 @@ exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
|
||||
data-show="true"
|
||||
@ -775,14 +940,18 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
|
||||
data-show="true"
|
||||
@ -790,14 +959,18 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
|
||||
>
|
||||
99+
|
||||
</sup>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
|
||||
data-show="true"
|
||||
@ -805,14 +978,18 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
|
||||
>
|
||||
10+
|
||||
</sup>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
|
||||
data-show="true"
|
||||
@ -820,8 +997,8 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
|
||||
>
|
||||
999+
|
||||
</sup>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/ribbbon.md correctly 1`] = `
|
||||
@ -1301,10 +1478,14 @@ Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
@ -1325,10 +1506,14 @@ Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-count-sm"
|
||||
data-show="true"
|
||||
@ -1350,7 +1535,7 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1360,7 +1545,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1370,7 +1555,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1380,7 +1565,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1390,7 +1575,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1400,8 +1585,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1413,8 +1598,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1426,8 +1611,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
>
|
||||
Error
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1439,8 +1624,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
>
|
||||
Default
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1452,8 +1637,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
>
|
||||
Processing
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -1465,19 +1650,23 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
>
|
||||
Warning
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/title.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
@ -1494,14 +1683,18 @@ exports[`renders ./components/badge/demo/title.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
<span
|
||||
class="ant-avatar ant-avatar-lg ant-avatar-square"
|
||||
>
|
||||
<span
|
||||
class="ant-avatar-string"
|
||||
style="opacity:0"
|
||||
/>
|
||||
</span>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
|
||||
data-show="true"
|
||||
@ -1528,6 +1721,6 @@ exports[`renders ./components/badge/demo/title.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -7,31 +7,64 @@ exports[`Badge render Badge status/color when contains children 1`] = `
|
||||
>
|
||||
<a />
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-success"
|
||||
class="ant-scroll-number ant-badge-count ant-badge-status-success"
|
||||
data-show="true"
|
||||
title="5"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition: none;"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<a />
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
|
||||
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
|
||||
data-show="true"
|
||||
title="5"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition: none;"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
<span
|
||||
class="ant-badge ant-badge-status"
|
||||
>
|
||||
<a />
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-dot"
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
style="background: rgb(0, 136, 204);"
|
||||
title="5"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition: none;"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</span>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
@ -547,20 +580,3 @@ exports[`Badge should support offset when count is a ReactNode 1`] = `
|
||||
/>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Ribbon rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<div
|
||||
class="ant-ribbon-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-rtl"
|
||||
>
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
/>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Ribbon rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<div
|
||||
class="ant-ribbon-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-rtl"
|
||||
>
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
/>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -128,6 +128,7 @@ describe('Badge', () => {
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/21331
|
||||
// https://github.com/ant-design/ant-design/issues/31590
|
||||
it('render Badge status/color when contains children', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
@ -143,6 +144,9 @@ describe('Badge', () => {
|
||||
</div>,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
expect(wrapper.find(Badge).at(0).find('.ant-scroll-number-only-unit').text()).toBe('5');
|
||||
expect(wrapper.find(Badge).at(1).find('.ant-scroll-number-only-unit').text()).toBe('5');
|
||||
expect(wrapper.find(Badge).at(2).find('.ant-scroll-number-only-unit').text()).toBe('5');
|
||||
});
|
||||
|
||||
it('Badge should work when status/color is empty string', () => {
|
||||
@ -156,72 +160,3 @@ describe('Badge', () => {
|
||||
expect(wrapper.find('.ant-badge')).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Ribbon', () => {
|
||||
mountTest(Badge.Ribbon);
|
||||
rtlTest(Badge.Ribbon);
|
||||
|
||||
describe('placement', () => {
|
||||
it('works with `start` & `end` placement', () => {
|
||||
const wrapperStart = mount(
|
||||
<Badge.Ribbon placement="start">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1);
|
||||
|
||||
const wrapperEnd = mount(
|
||||
<Badge.Ribbon placement="end">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('color', () => {
|
||||
it('works with preset color', () => {
|
||||
const wrapper = mount(
|
||||
<Badge.Ribbon color="green">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1);
|
||||
});
|
||||
it('works with custom color', () => {
|
||||
const wrapperLeft = mount(
|
||||
<Badge.Ribbon color="#888" placement="start">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapperLeft.find('.ant-ribbon').prop('style').background).toEqual('#888');
|
||||
expect(wrapperLeft.find('.ant-ribbon-corner').prop('style').color).toEqual('#888');
|
||||
const wrapperRight = mount(
|
||||
<Badge.Ribbon color="#888" placement="end">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapperRight.find('.ant-ribbon').prop('style').background).toEqual('#888');
|
||||
expect(wrapperRight.find('.ant-ribbon-corner').prop('style').color).toEqual('#888');
|
||||
});
|
||||
});
|
||||
|
||||
describe('text', () => {
|
||||
it('works with string', () => {
|
||||
const wrapper = mount(
|
||||
<Badge.Ribbon text="cool">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapper.find('.ant-ribbon').text()).toEqual('cool');
|
||||
});
|
||||
it('works with element', () => {
|
||||
const wrapper = mount(
|
||||
<Badge.Ribbon text={<span className="cool" />}>
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapper.find('.cool').length).toEqual(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
74
components/badge/__tests__/ribbon.test.tsx
Normal file
74
components/badge/__tests__/ribbon.test.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Badge from '../index';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
|
||||
describe('Ribbon', () => {
|
||||
mountTest(Badge.Ribbon);
|
||||
rtlTest(Badge.Ribbon);
|
||||
|
||||
describe('placement', () => {
|
||||
it('works with `start` & `end` placement', () => {
|
||||
const wrapperStart = mount(
|
||||
<Badge.Ribbon placement="start">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1);
|
||||
|
||||
const wrapperEnd = mount(
|
||||
<Badge.Ribbon placement="end">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('color', () => {
|
||||
it('works with preset color', () => {
|
||||
const wrapper = mount(
|
||||
<Badge.Ribbon color="green">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1);
|
||||
});
|
||||
it('works with custom color', () => {
|
||||
const wrapperLeft = mount(
|
||||
<Badge.Ribbon color="#888" placement="start">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapperLeft.find('.ant-ribbon').prop('style')?.background).toEqual('#888');
|
||||
expect(wrapperLeft.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888');
|
||||
const wrapperRight = mount(
|
||||
<Badge.Ribbon color="#888" placement="end">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapperRight.find('.ant-ribbon').prop('style')?.background).toEqual('#888');
|
||||
expect(wrapperRight.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888');
|
||||
});
|
||||
});
|
||||
|
||||
describe('text', () => {
|
||||
it('works with string', () => {
|
||||
const wrapper = mount(
|
||||
<Badge.Ribbon text="cool">
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapper.find('.ant-ribbon').text()).toEqual('cool');
|
||||
});
|
||||
it('works with element', () => {
|
||||
const wrapper = mount(
|
||||
<Badge.Ribbon text={<span className="cool" />}>
|
||||
<div />
|
||||
</Badge.Ribbon>,
|
||||
);
|
||||
expect(wrapper.find('.cool').length).toEqual(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -14,21 +14,21 @@ title:
|
||||
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Avatar } from 'antd';
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={0} showZero>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -41,15 +41,4 @@ ReactDOM.render(
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.head-example {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 2px;
|
||||
background: #eee;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
[data-theme="dark"] .head-example {
|
||||
background: rgba(255,255,255,.12);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,7 +14,7 @@ title:
|
||||
The count will be animated as it changes.
|
||||
|
||||
```jsx
|
||||
import { Badge, Button, Switch } from 'antd';
|
||||
import { Badge, Button, Switch, Divider, Avatar } from 'antd';
|
||||
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
@ -49,10 +49,9 @@ class Demo extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<>
|
||||
<Badge count={this.state.count}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<ButtonGroup>
|
||||
<Button onClick={this.decline}>
|
||||
@ -65,14 +64,12 @@ class Demo extends React.Component {
|
||||
<QuestionOutlined />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<Divider />
|
||||
<Badge dot={this.state.show}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Switch onChange={this.onChange} checked={this.state.show} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 8
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 多彩徽标
|
||||
en-US: Colorful Badge
|
||||
@ -43,7 +43,7 @@ ReactDOM.render(
|
||||
))}
|
||||
</div>
|
||||
<Divider orientation="left">Custom</Divider>
|
||||
<div>
|
||||
<>
|
||||
<Badge color="#f50" text="#f50" />
|
||||
<br />
|
||||
<Badge color="#2db7f5" text="#2db7f5" />
|
||||
@ -51,7 +51,7 @@ ReactDOM.render(
|
||||
<Badge color="#87d068" text="#87d068" />
|
||||
<br />
|
||||
<Badge color="#108ee9" text="#108ee9" />
|
||||
</div>
|
||||
</>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -18,26 +18,14 @@ import { Badge } from 'antd';
|
||||
import { NotificationOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Badge dot>
|
||||
<NotificationOutlined />
|
||||
</Badge>
|
||||
<Badge count={0} dot>
|
||||
<NotificationOutlined />
|
||||
<NotificationOutlined style={{ fontSize: 16 }} />
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<a href="#">Link something</a>
|
||||
</Badge>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
<style>
|
||||
.anticon-notification {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 3
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 可点击
|
||||
en-US: Clickable
|
||||
@ -14,12 +14,12 @@ title:
|
||||
The badge can be wrapped with `a` tag to make it linkable.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Avatar } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<a href="#">
|
||||
<Badge count={5}>
|
||||
<span className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</a>,
|
||||
mountNode,
|
||||
|
||||
49
components/badge/demo/mix.md
Normal file
49
components/badge/demo/mix.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
order: 99
|
||||
title:
|
||||
zh-CN: 各种混用的情况
|
||||
en-US: Mixed usage
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
测试 `count` `stauts` `color` `dot` 共用的情况。
|
||||
|
||||
## en-US
|
||||
|
||||
Using `count/dot` with custom `stauts/color`.
|
||||
|
||||
```jsx
|
||||
import { Badge, Avatar } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Badge count={5} status="success">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={5} status="warning">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={5} color="blue">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={5} color="#fa541c">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge dot status="success">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge dot status="warning">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge dot color="blue">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge dot color="#fa541c">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -24,15 +24,9 @@ const Demo = () => {
|
||||
|
||||
return (
|
||||
<Space>
|
||||
<Switch
|
||||
checked={show}
|
||||
onChange={() => {
|
||||
setShow(!show);
|
||||
}}
|
||||
/>
|
||||
<Switch checked={show} onChange={() => setShow(!show)} />
|
||||
<Badge count={show ? 25 : 0} />
|
||||
<Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
|
||||
<Badge count={show ? 4 : 0} className="site-badge-count-4" />
|
||||
<Badge
|
||||
className="site-badge-count-109"
|
||||
count={show ? 109 : 0}
|
||||
@ -44,18 +38,3 @@ const Demo = () => {
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
|
||||
```css
|
||||
.site-badge-count-4 .ant-badge-count {
|
||||
color: #999;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 1px #d9d9d9 inset;
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-badge-count-4 .ant-badge-count {
|
||||
background-color: #141414;
|
||||
box-shadow: 0 0 0 1px #434343 inset;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 5
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 自定义位置偏移
|
||||
en-US: Offset
|
||||
@ -14,14 +14,12 @@ title:
|
||||
Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Avatar } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Badge count={5} offset={[10, 10]}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
</>,
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -14,23 +14,23 @@ title:
|
||||
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Avatar } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Badge count={99}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={100}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={99} overflowCount={10}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={1000} overflowCount={999}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 15
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 缎带
|
||||
en-US: Ribbon
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 9
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 大小
|
||||
en-US: Size
|
||||
@ -14,15 +14,15 @@ title:
|
||||
Set size of numeral Badge.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Avatar } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Badge size="default" count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge size="small" count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>,
|
||||
mountNode,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 6
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 状态点
|
||||
en-US: Status
|
||||
@ -17,7 +17,7 @@ Standalone badge with status.
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Badge status="success" />
|
||||
<Badge status="error" />
|
||||
<Badge status="default" />
|
||||
@ -33,7 +33,7 @@ ReactDOM.render(
|
||||
<Badge status="processing" text="Processing" />
|
||||
<br />
|
||||
<Badge status="warning" text="Warning" />
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -15,39 +15,17 @@ debug: true
|
||||
The badge will display `title` when hovered over, instead of `count`.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Avatar } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Badge count={5} title="Custom hover text">
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={-5} title="Negative">
|
||||
<a href="#" className="head-example" />
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
<style>
|
||||
.ant-badge:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
|
||||
margin-right: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.head-example {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 2px;
|
||||
background: #eee;
|
||||
display: inline-block;
|
||||
}
|
||||
[data-theme="dark"] .head-example {
|
||||
background: rgba(255,255,255,.12);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -58,16 +58,16 @@ const Badge: CompoundedComponent = ({
|
||||
const prefixCls = getPrefixCls('badge', customizePrefixCls);
|
||||
|
||||
// ================================ Misc ================================
|
||||
const numberedDisplayCount = ((count as number) > (overflowCount as number)
|
||||
? `${overflowCount}+`
|
||||
: count) as string | number | null;
|
||||
const numberedDisplayCount = (
|
||||
(count as number) > (overflowCount as number) ? `${overflowCount}+` : count
|
||||
) as string | number | null;
|
||||
|
||||
const hasStatus =
|
||||
(status !== null && status !== undefined) || (color !== null && color !== undefined);
|
||||
|
||||
const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;
|
||||
|
||||
const showAsDot = (dot && !isZero) || hasStatus;
|
||||
const showAsDot = dot && !isZero;
|
||||
|
||||
const mergedCount = showAsDot ? '' : numberedDisplayCount;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user