mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
夏奈 2015-06-15 16:16:51 +08:00
parent 9b5c224234
commit 331443419c
4 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/progress/demo/circle.md
View File

@ -11,9 +11,9 @@ var Circle = antd.Progress.Circle;
React.render( React.render(
<div> <div>
<Circle percent="30" width="150" /> <Circle percent="30" />
<Circle percent="70" width="150" status="exception" /> <Circle percent="70" status="exception" />
<Circle percent="100" width="150" /> <Circle percent="100" />
</div> </div>
, document.getElementById('components-progress-demo-circle')); , document.getElementById('components-progress-demo-circle'));
```` ````

6
components/progress/demo/line.md
View File

@ -11,9 +11,9 @@ var Line = antd.Progress.Line;
React.render( React.render(
<div> <div>
<Line percent="30" width="300" strokeWidth="3" /> <Line percent="30" />
<Line percent="70" width="300" strokeWidth="3" status="exception" /> <Line percent="70" status="exception" />
<Line percent="100" width="300" strokeWidth="3" /> <Line percent="100" />
</div> </div>
, document.getElementById('components-progress-demo-line')); , document.getElementById('components-progress-demo-line'));
```` ````

24
components/progress/index.jsx
View File

@ -7,8 +7,9 @@ var React = require('react');
var Line = React.createClass({ var Line = React.createClass({
getDefaultProps: function () { getDefaultProps: function () {
return { return {
width: 300,
percent: 0, percent: 0,
strokeWidth: 4, strokeWidth: 3,
status: 'normal' // exception status: 'normal' // exception
}; };
}, },
@ -26,8 +27,9 @@ var Line = React.createClass({
var style = { var style = {
'width': this.props.width 'width': this.props.width
}; };
var wrapStyle = { var fontSize = (this.props.width / 100 * this.props.strokeWidth);
'font-size': this.props.width / 100 * this.props.strokeWidth var iconStyle = {
'font-size': (fontSize < 14) ? 14 : fontSize
}; };
var textStyle = { var textStyle = {
'color': statusColorMap[this.props.status] 'color': statusColorMap[this.props.status]
@ -36,13 +38,14 @@ var Line = React.createClass({
if (this.props.status === 'exception') { if (this.props.status === 'exception') {
progressInfo = ( progressInfo = (
<span style={textStyle} className='ant-progress-line-text'> <span style={textStyle} className='ant-progress-line-text'>
<i className='anticon anticon-exclamation-round'></i> <i style={iconStyle} className='anticon anticon-exclamation-round'></i>
</span> </span>
); );
} else if(this.props.status === 'success'){ } else if(this.props.status === 'success'){
progressInfo = ( progressInfo = (
<span style={textStyle} className='ant-progress-line-text'> <span style={textStyle} className='ant-progress-line-text'>
<i className='anticon anticon-check-round'></i> <i style={iconStyle} className='anticon anticon-check-round'></i>
</span> </span>
); );
}else { }else {
@ -52,7 +55,7 @@ var Line = React.createClass({
} }
return ( return (
<div className='ant-progress-line-wrap' style={wrapStyle}> <div className='ant-progress-line-wrap' >
<div className='ant-progress-line-inner' style={style}> <div className='ant-progress-line-inner' style={style}>
<Progressline percent={this.props.percent} strokeWidth={this.props.strokeWidth} <Progressline percent={this.props.percent} strokeWidth={this.props.strokeWidth}
strokeColor={statusColorMap[this.props.status]} trailColor="#e9e9e9" /> strokeColor={statusColorMap[this.props.status]} trailColor="#e9e9e9" />
@ -66,6 +69,7 @@ var Line = React.createClass({
var Circle = React.createClass({ var Circle = React.createClass({
getDefaultProps: function () { getDefaultProps: function () {
return { return {
width: 150,
percent: 0, percent: 0,
strokeWidth: 4, strokeWidth: 4,
status: 'normal' // exception status: 'normal' // exception
@ -87,7 +91,7 @@ var Circle = React.createClass({
'height': this.props.width 'height': this.props.width
}; };
var wrapStyle = { var wrapStyle = {
'font-size': this.props.width * 0.3 'font-size': this.props.width * 0.2
}; };
var textStyle = { var textStyle = {
'color': statusColorMap[this.props.status] 'color': statusColorMap[this.props.status]
@ -99,6 +103,12 @@ var Circle = React.createClass({
<i className='anticon anticon-exclamation'></i> <i className='anticon anticon-exclamation'></i>
</span> </span>
); );
}else if(this.props.status === 'suucess'){
progressInfo = (
<span style={textStyle} className='ant-progress-circle-text'>
<i className="anticon anticon-check"></i>
</span>
);
}else { }else {
progressInfo = ( progressInfo = (
<span className="ant-progress-circle-text">{this.props.percent}%</span> <span className="ant-progress-circle-text">{this.props.percent}%</span>

10
style/components/progress.less
View File

@ -5,6 +5,10 @@
&-circle-wrap { &-circle-wrap {
display: inline-block; display: inline-block;
} }
&-line-wrap {
font-size: 12px;
}
&-line-inner { &-line-inner {
display: inline-block; display: inline-block;
@ -20,7 +24,7 @@
line-height: 1; line-height: 1;
.anticon { .anticon {
font-size: 1.5em; font-size: 1.2em;
} }
} }
@ -35,11 +39,11 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
top: 33%; top: 38%;
left: 0; left: 0;
.anticon { .anticon {
font-size: 1em; font-size: 14/12em;
} }
} }
} }