Fix Progress component strokeWidth issues.

uiwjs · Oct 29, 2017 · 834ff2e · 834ff2e
1 parent fd72d36
commit 834ff2e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/docs/md/cn/progress.md b/docs/md/cn/progress.md
@@ -8,13 +8,35 @@ Progress 进度条
 <!--DemoStart--> 
 ```js
 render() {
+  const sty = {marginBottom:10}
   return (
     <div style={{maxWidth:400}}>
-      <Progress percent={30} />
-      <Progress percent={50} status="active" />
-      <Progress percent={70} status="exception" />
-      <Progress percent={100} />
-      <Progress percent={50} showText={false} />
+      <Progress style={sty} percent={30} />
+      <Progress style={sty} percent={50} status="active" />
+      <Progress style={sty} percent={70} status="exception" />
+      <Progress style={sty} percent={100} />
+      <Progress style={sty} percent={50} showText={false} />
+    </div>
+  )
+}
+```
+<!--End-->
+
+### 进度条大小设置
+
+设置参数`strokeWidth`即可
+
+<!--DemoStart--> 
+```js
+render() {
+  const sty = {marginBottom:15}
+  return (
+    <div style={{maxWidth:400}}>
+      <Progress style={sty} strokeWidth={14} percent={30} />
+      <Progress style={sty} strokeWidth={14} percent={50} status="active" />
+      <Progress style={sty} strokeWidth={14} percent={70} status="exception" />
+      <Progress style={sty} strokeWidth={14} percent={100} />
+      <Progress style={sty} strokeWidth={14} percent={50} showText={false} />
     </div>
   )
 }
@@ -30,4 +52,5 @@ render() {
 | percent | 百分比 | Number | `0` |
 | showText | 是否显示进度条文字内容 | Boolean | `true` |
 | type | 类型 | Enum{'`line`', '`circle`'} | `line` |
+| strokeWidth | 进度条线的宽度 | Number | `6` |
 | status | 状态，可选：`success` `exception` `active` | Enum{'`success`', '`exception`'} | - |
diff --git a/src/progress/Progress.js b/src/progress/Progress.js
@@ -4,7 +4,7 @@ import Icon from '../icon/';
 
 export default class Progress extends Component {
   render() {
-    const { prefixCls, type, className, showText, percent, strokeWidth, status, ...other } = this.props;
+    const { prefixCls, type, className, showText, percent, strokeWidth, status, ...resetProps } = this.props;
     const cls = this.classNames(prefixCls, className, {
       [`${prefixCls}-${type}`]: type,
       [`${prefixCls}-show-text`]: showText,
@@ -38,7 +38,7 @@ export default class Progress extends Component {
       )
     }
     return (
-      <div className={cls}>{progress} {progressInfo}</div>
+      <div {...resetProps} className={cls}>{progress} {progressInfo}</div>
     )
   }
 }

diff --git a/src/progress/style/index.less b/src/progress/style/index.less
@@ -10,7 +10,7 @@
   &-bar{
     display: inline-block;
     width: 100%;
-    height: 6px;
+    vertical-align: middle;
   }
   &-status-active{
     .@{w-progress-prefix}-bg{