progress demo

components/progress/demo/line.md

@@ -0,0 +1,14 @@
+# Line 用法
+
+- order: 0
+
+Progress Line用法
+
+---
+
+````jsx
+var Line = antd.Progress.Line;
+
+React.render(
+  <Line perscent="30" />, document.getElementById('components-progress-demo-line'));
+````

components/progress/index.jsx

@@ -0,0 +1,87 @@
+'use strict';
+
+var Progressline = require('rc-progress').Line;
+var Progresscircle = require('rc-progress').Circle;
+var React = require('react');
+
+var Line = React.createClass({
+  getDefaultProps: function(){
+    return {
+      width: "100px",
+      percent: 0,
+      strokeWidth: 1,
+      status: "normal"
+    }
+  },
+  render() {
+    var style = {
+      "width": this.props.width
+    }
+    var progressInfo
+    if(this.props.status==='normal'){
+      progressInfo = (
+        <i className="anticon anticon-check-circle"></i>
+      )
+    }else {
+      progressInfo = (
+        <span className="ant-progress-line-text">{this.props.percent}%</span>
+      )
+    }
+
+    var statusColorMap = {
+      "normal": "#3FC7FA",
+      "exception": "#FE8C6A"
+    };
+    return (
+      <div className="ant-progress-line-wrap" style={style}>
+        <Progressline percent={this.props.percent} strokeWidth={this.props.strokeWidth} strokeColor={statusColorMap[this.props.status]} />
+        {progressInfo}
+      </div>
+    );
+  }
+});
+
+var Circle = React.createClass({
+  getDefaultProps: function(){
+    return {
+      width: "100px",
+      percent: 0,
+      strokeWidth: 1,
+      status: "normal"
+    }
+  },
+  render() {
+    var style = {
+      "width": this.props.width,
+      "height": this.props.width
+    }
+    var progressInfo
+    if(this.props.status==='normal'){
+      progressInfo = (
+        <i className="anticon anticon-check-circle"></i>
+      )
+    }else {
+      progressInfo = (
+        <span className="ant-progress-line-text">{this.props.percent}%</span>
+      )
+    }
+
+    var statusColorMap = {
+      "normal": "#3FC7FA",
+      "exception": "#FE8C6A"
+    };
+    return (
+      <div className="ant-progress-circle-wrap" style={style}>
+        <Progresscircle percent={this.props.percent} strokeWidth={this.props.strokeWidth} strokeColor={statusColorMap[this.props.status]} />
+        {progressInfo}
+      </div>
+    );
+  }
+});
+
+module.exports = {
+  Line: Line,
+  Circle: Circle
+};
+
+

components/progress/index.md

@@ -5,29 +5,21 @@
 
 ---
 
-## 何时使用
+## 使用
 
-当你再次和我说起 青春时的故事
-我正在下着雨的无锡 乞讨着生活的权利
-前一天早晨 我睁开眼已是江南
-他们说柔软的地方 总会发生柔软的事
-那年的舞台上 说谎的人一直歌唱
-大不列颠的广场上 有没有鸽子飞翔
-青春和瞎子一起 变成了哑巴
-今天扯平了我们的当年 分食了理想
+`<Line perscent="30" />`
+
+`<Circle perscent="30" />`
+
+## 属性参数
+
+| 参数     | 说明           | 类型     | 默认值       |
+|----------|----------------|----------|--------------|
+| perscent    | 百分比           | number   | 0           |
+| status   | 状态，有两个值normal、exception | string   | normal |
+| strokeWidth | 进度条线宽度，单位是进度条画布宽度的百分比 | number | 1           |
+| width | 进度条画布宽度，这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | string | null |
 
 
-## 为什么使用
 
-你可知道你的名字解释了我的一生
-碎了满天的往事如烟 与世无争
-当你装满行李 回到故乡
-我的余生 却再也没有北方
-
-有一天我又梦见 那个装满乐器的教室
-你还站在门口 一脸羞涩的表情
-你说这么多年你还没找到 让你心动的男人
-我说去他妈的爱情 都是过眼云烟的东西
-
-我的余生 都用来寻找北方
 

site/templates/layout.html

@@ -11,7 +11,7 @@
   <link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
   <link rel="stylesheet" href="/static/normalize.css">
   <link rel="stylesheet" href="/static/style.css">
-  <link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
+  <!--<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">-->
   <link rel="stylesheet" href="/static/tomorrow.css">
   {% block styles %}{% endblock %}
   <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>