Browse Source

fix: chang api name

DaiQiangReal 1 year ago
parent
commit
dd6b212102
3 changed files with 17 additions and 15 deletions
  1. 1 1
      content/show/badge/index-en-US.md
  2. 11 11
      content/show/badge/index.md
  3. 5 3
      packages/semi-ui/badge/index.tsx

+ 1 - 1
content/show/badge/index-en-US.md

@@ -285,7 +285,7 @@ import { Badge } from '@douyinfe/semi-ui';
 | dot            | Displayed as a little dot.                                                            | boolean    | false      |
 | overflowCount  | Cap number value                                                                      | number     | -          |
 | position       | Badge position, optional `left Top`, `left Bottom`, `right Top`, `right Bottom`       | string     | `rightTop` |
-| style          | style                                                                                 | CSSProperties     | -          |
+| countStyle          | style of content                                                                      | CSSProperties     | -          |
 | theme          | Badge theme, one of `solid`, `light`, `inverted`                                      | string     | `solid`    |
 | type           | Badge type, one of `primary`, `secondary`, `tertiary`, `danger`, `warning`,`success`, | string     | `primary`  |
 

+ 11 - 11
content/show/badge/index.md

@@ -274,17 +274,17 @@ import { Badge } from '@douyinfe/semi-ui';
 
 ## API参考
 
-| 属性             | 说明        | 类型   | 默认值 |
-|----------------|-------------|-----------------|---|
-| children       | 徽章的 base | ReactNode | 无 | 
-| className      | 外侧 className | string | - |
-| count          | 展示的内容 | ReactNode  | 无 |
-| countClassName | 内容区域 className |  string | 无 |
-| dot            | 不展示数字,显示小圆点 | boolean  | false |
-| overflowCount  | 最大的展示数字值 | number | 无 |
-| position       | 徽章位置,可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom` | string | `rightTop` |
-| style          | 徽章的样式 | CSSProperties | 无 | 
-| theme          | 徽章主题,可选 `solid`、 `light`、 `inverted` | string | `solid` |
+| 属性             | 说明                                                                         | 类型   | 默认值 |
+|----------------|----------------------------------------------------------------------------|-----------------|---|
+| children       | 徽章的 base                                                                   | ReactNode | 无 | 
+| className      | 外侧 className                                                               | string | - |
+| count          | 展示的内容                                                                      | ReactNode  | 无 |
+| countClassName | 内容区域 className                                                             |  string | 无 |
+| dot            | 不展示数字,显示小圆点                                                                | boolean  | false |
+| overflowCount  | 最大的展示数字值                                                                   | number | 无 |
+| position       | 徽章位置,可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom`                 | string | `rightTop` |
+| countStyle     | 徽章内容的样式                                                                    | CSSProperties | 无 | 
+| theme          | 徽章主题,可选 `solid`、 `light`、 `inverted`                                       | string | `solid` |
 | type           | 徽章类型,可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning`、 `success` | string | `primary` |
 
 ## 文案规范

+ 5 - 3
packages/semi-ui/badge/index.tsx

@@ -25,7 +25,8 @@ export interface BadgeProps {
     onMouseLeave?: (e: React.MouseEvent) => any;
     onClick?: (e: React.MouseEvent) => any;
     children?: React.ReactNode;
-    countClassName?: string
+    countClassName?: string;
+    countStyle?: React.CSSProperties;
 
 }
 
@@ -45,6 +46,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         onMouseEnter: PropTypes.func,
         onMouseLeave: PropTypes.func,
         countClassName: PropTypes.string,
+        countStyle: PropTypes.object,
     };
 
     static defaultProps = {
@@ -63,7 +65,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         const { direction } = this.context;
         // DefaultPosition here, static can't get this
         const defaultPosition = direction === 'rtl' ? 'leftTop' : 'rightTop';
-        const { count, dot, type, countClassName, theme, position = defaultPosition, overflowCount, style, children, className, ...rest } = this.props;
+        const { count, dot, type, countClassName,countStyle, theme, position = defaultPosition, overflowCount, style, children, className, ...rest } = this.props;
         const custom = count && !(isNumber(count) || isString(count));
         const showBadge = count !== null && typeof count !== 'undefined';
         const wrapper = cls(countClassName, {
@@ -84,7 +86,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         return (
             <span className={cls(prefixCls, className)} {...rest}>
                 {children}
-                <span className={wrapper} style={style} x-semi-prop="count">
+                <span className={wrapper} style={style || countStyle} x-semi-prop="count">
                     {dot ? null : content}
                 </span>
             </span>