Merge pull request #229 from ant-design/component-badge

Add component badge

components/badge/demo/99plus.md

+# 大数字
+
+- order: 1
+
+超过 99 的会显示为 `99+`。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(<div>
+  <Badge count="99">
+    <a href="#" className="head-example"></a>
+  </Badge>
+  <Badge count="200">
+    <a href="#" className="head-example"></a>
+  </Badge>
+</div>, document.getElementById('components-badge-demo-99plus'));
+````

components/badge/demo/basic.md

+# 基本
+
+- order: 0
+
+简单的徽章展示。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
+  <Badge count="5">
+    <a href="#" className="head-example"></a>
+  </Badge>
+, document.getElementById('components-badge-demo-basic'));
+````
+
+<style>
+.ant-badge {
+  margin-right: 16px;
+}
+.head-example {
+  width: 42px;
+  height: 42px;
+  border-radius: 6px;
+  background: #eee;
+  display: inline-block;
+}
+</style>

components/badge/demo/dot.md

+# 讨嫌的小红点
+
+- order: 3
+
+没有具体的数字。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
+  <Badge dot={true}>
+    <i className="anticon anticon-notification"></i>
+  </Badge>
+, document.getElementById('components-badge-demo-dot'));
+````
+
+<style>
+.anticon-notification {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+}
+</style>

components/badge/demo/link.md

+# 可点击
+
+- order: 2
+
+用 a 标签进行包裹即可。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
+  <a href="#">
+    <Badge count="5">
+      <span className="head-example"></span>
+    </Badge>
+  </a>
+, document.getElementById('components-badge-demo-link'));
+````

components/badge/index.jsx

+import React, { cloneElement } from 'react';
+const prefixCls = 'ant-badge';
+
+class AntBadge extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      count: props.count
+    };
+  }
+
+  render() {
+    if (this.props.dot) {
+      return <span className={prefixCls} {...this.props}>
+        {this.props.children}
+        <sup className={prefixCls + '-dot'}></sup>
+      </span>;
+    }
+    let count = this.state.count;
+    if (!count) {
+      return cloneElement(this.props.children);
+    } else {
+      count = count >= 100 ? '99+' : count;
+      return (
+        <span className={prefixCls} title={this.state.count} {...this.props}>
+          {this.props.children}
+          <sup className={prefixCls + '-count'}>{count}</sup>
+        </span>
+      );
+    }
+  }
+}
+
+AntBadge.defaultProps = {
+  prefixCls: prefixCls,
+  count: null,
+  dot: false
+};
+
+export default AntBadge;

components/badge/index.md

+# Badge
+
+- category: Components
+- chinese: 徽标数字
+- type: 展示
+
+---
+
+图标右上角的徽标数字。
+
+## 何时使用
+
+一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数。
+
+## API
+
+| 参数           | 说明                             | 类型       |  可选值 | 默认值 |
+|----------------|----------------------------------|------------|---------|--------|
+| count          | 展示的数字，大于 99 时显示为 99+ | Number     |         |        |
+| dot            | 不展示数字，只有一个小红点       | boolean    |         | false  |

index.js

@@ -41,6 +41,7 @@ const antd = {
   Validation: require('./components/validation'),
   Tree: require('./components/tree'),
   Upload: require('./components/upload'),
+  Badge: require('./components/badge'),
   Menu: require('./components/menu')
 };
 

style/components/badge.less

+@badge-prefix-cls: ~"@{css-prefix}badge";
+
+.@{badge-prefix-cls} {
+  position: relative;
+  display: inline-block;
+
+  &-count {
+    position: absolute;
+    transform: translateX(-50%);
+    top: -10px;
+    height: 20px;
+    border-radius: 10px;
+    min-width: 20px;
+    background: @error-color;
+    color: #fff;
+    line-height: 20px;
+    text-align: center;
+    padding: 0 7px;
+    font-size: 12px;
+    white-space: nowrap;
+    transition: all 0.3s ease;
+    z-index: 10;
+    font-family: tahoma;
+    &:hover {
+      background: tint(@error-color, 20%);
+    }
+    &:active {
+      background: shade(@error-color, 5%);
+    }
+    a, a:hover {
+      color: #fff;
+    }
+  }
+
+  &-dot {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    height: 8px;
+    width: 8px;
+    border-radius: 100%;
+    background: @error-color;
+    transition: all 0.3s ease;
+    z-index: 10;
+  }
+}

style/components/index.less

@@ -32,3 +32,4 @@
 @import "upload";
 @import "menu";
 @import "affix";
+@import "badge";