diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
new file mode 100644
index 0000000000..312581cab5
--- /dev/null
+++ b/components/badge/demo/status.md
@@ -0,0 +1,36 @@
+---
+order: 7
+title:
+ zh-CN: 状态点
+ en-US: Status
+---
+
+## zh-CN
+
+用于表示状态的小圆点。
+
+## en-US
+
+Standalone badge with status.
+
+````jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+ mountNode
+);
+````
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 9b40049c6a..560680cda6 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -28,3 +28,5 @@ Badge normally appears in proximity to notification or head picture with eye-cat
| count | Number to show in badge | Number | |
| overflowCount | Max count to show | Number | 99 |
| dot | whether to show red dot without number | Boolean | false |
+| status | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
+| text | If `status` is set, `text` is to set the text of status dot | String | '' |
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index e326905133..3864a63294 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -13,6 +13,8 @@ interface BadgeProps {
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
+ status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
+ text?: string;
}
export default class Badge extends React.Component {
@@ -21,6 +23,7 @@ export default class Badge extends React.Component {
count: null,
dot: false,
overflowCount: 99,
+ // status: 'default',
};
static propTypes = {
@@ -33,18 +36,25 @@ export default class Badge extends React.Component {
};
render() {
- let { count, prefixCls, overflowCount, className, style, children, dot } = this.props;
+ let { count, prefixCls, overflowCount, className, style, children, dot, status, text } = this.props;
+ const isDot = dot || status;
count = count > overflowCount ? `${overflowCount}+` : count;
// dot mode don't need count
- if (dot) {
+ if (isDot) {
count = '';
}
// null undefined "" "0" 0
- const hidden = (!count || count === '0') && !dot;
- const scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
+ const hidden = (!count || count === '0') && !isDot;
+ const scrollNumberCls = classNames({
+ [`${prefixCls}-dot`]: isDot,
+ [`${prefixCls}-count`]: !isDot,
+ [`${prefixCls}-status`]: status,
+ [`${prefixCls}-status-${status}`]: status,
+ [`${prefixCls}-status-with-text`]: text,
+ });
const badgeCls = classNames({
[className]: !!className,
[prefixCls]: true,
@@ -70,6 +80,10 @@ export default class Badge extends React.Component {
/>
}
+ {
+ hidden || !text ? null :
+ {text}
+ }
);
}
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index 4a93a7e40e..cae9f198f3 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -28,4 +28,6 @@ english: Badge
|----------------|----------------------------------|------------|---------|--------|
| count | 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏 | Number | | |
| overflowCount | 展示封顶的数字值 | Number | | 99 |
-| dot | 不展示数字,只有一个小红点 | boolean | | false |
+| dot | 不展示数字,只有一个小红点 | Boolean | | false |
+| status | 设置 Badge 为状态点 | Enum | 'success'、'processing'、'default'、'error'、'warning' | '' |
+| text | 在设置了 `status` 的前提下有效,设置状态点的文本 | String | | '' |
diff --git a/components/badge/style/index.less b/components/badge/style/index.less
index 84f4f114f4..af5bcb6d1a 100644
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -47,6 +47,38 @@
box-shadow: 0 0 0 1px #fff;
}
+ &-status {
+ width: 6px;
+ height: 6px;
+
+ &-success {
+ background-color: @success-color;
+ }
+ &-processing {
+ background-color: @primary-color;
+ animation: antStatusProcessing 1.2s infinite ease-in-out;
+ }
+ &-default {
+ background-color: @normal-color;
+ }
+ &-error {
+ background-color: @error-color;
+ }
+ &-warning {
+ background-color: @warning-color;
+ }
+
+ &-with-text {
+ top: 5px;
+ }
+
+ &-text {
+ color: @text-color;
+ font-size: @font-size-base;
+ margin-left: 8px; // 8 - (6 / 2) === 5
+ }
+ }
+
&-zoom-appear,
&-zoom-enter {
animation: antZoomBadgeIn .3s @ease-out-back;
@@ -66,6 +98,16 @@
}
}
+@keyframes antStatusProcessing {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+}
+
a & {
&-count:hover {
background: tint(@error-color, 20%);
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 8bf9f773df..8bd5980024 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -4,6 +4,7 @@
@success-color : #87d068;
@error-color : #f50;
@warning-color : #fa0;
+@normal-color : #d9d9d9;
// ------ Base & Require ------
@body-background : #fff;