diff --git a/components/badge/demo/99plus.md b/components/badge/demo/99plus.md new file mode 100644 index 0000000000000000000000000000000000000000..331b95e47b4645d06fab6508aee1c92e4c8536de --- /dev/null +++ b/components/badge/demo/99plus.md @@ -0,0 +1,20 @@ +# 大数字 + +- order: 1 + +超过 99 的会显示为 `99+`。 + +--- + +````jsx +var Badge = antd.Badge; + +React.render(
+ + + + + + +
, document.getElementById('components-badge-demo-99plus')); +```` diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md new file mode 100644 index 0000000000000000000000000000000000000000..0ba2d3d5cfab59b4f87bf791ec002b13144875f6 --- /dev/null +++ b/components/badge/demo/basic.md @@ -0,0 +1,30 @@ +# 基本 + +- order: 0 + +简单的徽章展示。 + +--- + +````jsx +var Badge = antd.Badge; + +React.render( + + + +, document.getElementById('components-badge-demo-basic')); +```` + + diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md new file mode 100644 index 0000000000000000000000000000000000000000..7d1e8b7bd79e54093b0b5d214a5e132ce71cbc9e --- /dev/null +++ b/components/badge/demo/dot.md @@ -0,0 +1,26 @@ +# 讨嫌的小红点 + +- order: 3 + +没有具体的数字。 + +--- + +````jsx +var Badge = antd.Badge; + +React.render( + + + +, document.getElementById('components-badge-demo-dot')); +```` + + diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md new file mode 100644 index 0000000000000000000000000000000000000000..61f723b4ea08463280f3c87071d6407ac691c4d4 --- /dev/null +++ b/components/badge/demo/link.md @@ -0,0 +1,19 @@ +# 可点击 + +- order: 2 + +用 a 标签进行包裹即可。 + +--- + +````jsx +var Badge = antd.Badge; + +React.render( + + + + + +, document.getElementById('components-badge-demo-link')); +```` diff --git a/components/badge/index.jsx b/components/badge/index.jsx new file mode 100644 index 0000000000000000000000000000000000000000..13e87653709d936530ad6b89b4a9f84553d82a3e --- /dev/null +++ b/components/badge/index.jsx @@ -0,0 +1,41 @@ +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 + {this.props.children} + + ; + } + let count = this.state.count; + if (!count) { + return cloneElement(this.props.children); + } else { + count = count >= 100 ? '99+' : count; + return ( + + {this.props.children} + {count} + + ); + } + } +} + +AntBadge.defaultProps = { + prefixCls: prefixCls, + count: null, + dot: false +}; + +export default AntBadge; diff --git a/components/badge/index.md b/components/badge/index.md new file mode 100644 index 0000000000000000000000000000000000000000..e00e945aa4ec49f6e9d8ed1e175e4714008b00f7 --- /dev/null +++ b/components/badge/index.md @@ -0,0 +1,20 @@ +# Badge + +- category: Components +- chinese: 徽标数字 +- type: 展示 + +--- + +图标右上角的徽标数字。 + +## 何时使用 + +一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数。 + +## API + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|----------------|----------------------------------|------------|---------|--------| +| count | 展示的数字,大于 99 时显示为 99+ | Number | | | +| dot | 不展示数字,只有一个小红点 | boolean | | false | diff --git a/index.js b/index.js index 0862816482443a613e3deed7ac2176d31392721f..dbae9fb45ec478afb90016db128276516d04b6dc 100644 --- a/index.js +++ b/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') }; diff --git a/style/components/badge.less b/style/components/badge.less new file mode 100644 index 0000000000000000000000000000000000000000..7a03e120611f45812f81b524fc2173d9f237bb91 --- /dev/null +++ b/style/components/badge.less @@ -0,0 +1,46 @@ +@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; + } +} diff --git a/style/components/index.less b/style/components/index.less index 5e29d83d7bf911b5e5dac40d2751a98aba09aeab..12d0b7e02da01259af4030957863ba1cc4ebf404 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -32,3 +32,4 @@ @import "upload"; @import "menu"; @import "affix"; +@import "badge";