wangxueliang
7 years ago
parent
0d6a7a0a0f
commit
2cee6f9bef
@ -0,0 +1,48 @@
|
||||
<cn>
|
||||
#### 进度圈动态展示
|
||||
会动的进度条才是好进度条。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Dynamic circular progress bar
|
||||
A dynamic progress bar is better.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-progress type="circle" :percent="percent" />
|
||||
<a-button-group>
|
||||
<a-button @click="decline" icon="minus" />
|
||||
<a-button @click="increase" icon="plus" />
|
||||
</a-button-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
percent: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
increase() {
|
||||
let percent = this.percent + 10;
|
||||
if (percent > 100) {
|
||||
percent = 100;
|
||||
}
|
||||
this.percent = percent
|
||||
},
|
||||
decline() {
|
||||
let percent = this.percent - 10;
|
||||
if (percent < 0) {
|
||||
percent = 0;
|
||||
}
|
||||
this.percent = percent
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
<cn>
|
||||
#### 小型进度圈
|
||||
小一号的圈形进度。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Mini size circular progress bar
|
||||
A smaller circular progress bar.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-progress type="circle" :percent="30" :width="80" />
|
||||
<a-progress type="circle" :percent="70" :width="80" status="exception" />
|
||||
<a-progress type="circle" :percent="100" :width="80" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.ant-progress-circle-wrap,
|
||||
.ant-progress-line-wrap {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
<cn>
|
||||
#### 进度圈
|
||||
圈形的进度。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Circular progress bar
|
||||
A circular progress bar.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-progress type="circle" :percent="75" />
|
||||
<a-progress type="circle" :percent="70" status="exception" />
|
||||
<a-progress type="circle" :percent="100" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.ant-progress-circle-wrap,
|
||||
.ant-progress-line-wrap {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
<cn>
|
||||
#### 仪表盘
|
||||
By setting `type=dashboard`, you can get a dashboard style of progress easily.
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Dashboard
|
||||
A standard progress bar.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-progress type="dashboard" :percent="75" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@ -0,0 +1,47 @@
|
||||
<cn>
|
||||
#### 动态展示
|
||||
会动的进度条才是好进度条。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Dynamic
|
||||
A dynamic progress bar is better.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-progress :percent="percent" />
|
||||
<a-button-group>
|
||||
<a-button @click="decline" icon="minus" />
|
||||
<a-button @click="increase" icon="plus" />
|
||||
</a-button-group>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
percent: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
increase() {
|
||||
let percent = this.percent + 10;
|
||||
if (percent > 100) {
|
||||
percent = 100;
|
||||
}
|
||||
this.percent = percent
|
||||
},
|
||||
decline() {
|
||||
let percent = this.percent - 10;
|
||||
if (percent < 0) {
|
||||
percent = 0;
|
||||
}
|
||||
this.percent = percent
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
<cn>
|
||||
#### 自定义文字格式
|
||||
`format` 属性指定格式。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Custom text format
|
||||
You can custom text format by setting `format`.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-progress type="circle" :percent="75" :format="percent => `${percent} Days`"/>
|
||||
<a-progress type="circle" :percent="100" :format="() => 'Done'" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
div.ant-progress-circle,
|
||||
div.ant-progress-line {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,22 @@
|
||||
<cn>
|
||||
#### 小型进度条
|
||||
适合放在较狭窄的区域内。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Mini size progress bar
|
||||
Appropriate for a narrow area.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div style="width: 170px">
|
||||
<a-progress :percent="30" size="small" />
|
||||
<a-progress :percent="50" size="small" status="active" />
|
||||
<a-progress :percent="70" size="small" status="exception" />
|
||||
<a-progress :percent="100" size="small" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
<cn>
|
||||
#### 进度条
|
||||
标准的进度条。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Progress bar
|
||||
A standard progress bar.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-progress :percent="30" />
|
||||
<a-progress :percent="50" status="active" />
|
||||
<a-progress :percent="70" status="exception" />
|
||||
<a-progress :percent="100" />
|
||||
<a-progress :percent="50" :showInfo="false" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
<cn>
|
||||
#### 分段进度条
|
||||
标准的进度条。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Progress bar with success segment
|
||||
A standard progress bar.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-tooltip title="3 done / 3 in progress / 4 to do">
|
||||
<a-progress :percent="60" :successPercent="30" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
```
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| format | template function of the content | function(percent) | `percent => percent + '%'` |
|
||||
| gapDegree `(type=circle)` | the gap degree of half circle, 0 ~ 360 | number | 0 |
|
||||
| gapPosition `(type=circle)` | the gap position, options: `top` `bottom` `left` `right` | string | `top` |
|
||||
| percent | to set the completion percentage | number | 0 |
|
||||
| showInfo | whether to display the progress value and the status icon | boolean | true |
|
||||
| status | to set the status of the Progress, options: `success` `exception` `active` | string | - |
|
||||
| strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10 |
|
||||
| strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 |
|
||||
| type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
|
||||
| width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 120 |
|
||||
| successPercent | segmented success percent, works when `type="line"` | number | 0 |
|
||||
@ -0,0 +1,5 @@
|
||||
import Progress from './progress'
|
||||
|
||||
export { ProgressProps } from './progress'
|
||||
|
||||
export default Progress
|
||||
@ -0,0 +1,15 @@
|
||||
## API
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| format | 内容的模板函数 | function(percent) | `percent => percent + '%'` |
|
||||
| gapDegree `(type=circle)` | 圆形进度条缺口角度，可取值 0 ~ 360 | number | 0 |
|
||||
| gapPosition `(type=circle)` | 圆形进度条缺口位置 | Enum{ 'top', 'bottom', 'left', 'right' } | `top` |
|
||||
| percent | 百分比 | number | 0 |
|
||||
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
|
||||
| status | 状态，可选：`success` `exception` `active` | string | - |
|
||||
| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
|
||||
| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| type | 类型，可选 `line` `circle` `dashboard` | string | line |
|
||||
| width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 120 |
|
||||
| successPercent | 已完成的分段百分比，`type="line"` 时有效 | number | 0 |
|
||||
@ -0,0 +1,135 @@
|
||||
import classNames from 'classnames'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import { getOptionProps, initDefaultProps } from '../_util/props-util'
|
||||
import Icon from '../icon'
|
||||
import { Circle } from '../vc-progress'
|
||||
|
||||
function addUnit (num, unit) {
|
||||
const unitType = unit || 'px'
|
||||
return num ? num + unitType : null
|
||||
}
|
||||
const statusColorMap = {
|
||||
normal: '#108ee9',
|
||||
exception: '#ff5500',
|
||||
success: '#87d068',
|
||||
}
|
||||
|
||||
export const ProgressProps = {
|
||||
prefixCls: PropTypes.string,
|
||||
type: PropTypes.oneOf(['line', 'circle', 'dashboard']),
|
||||
percent: PropTypes.number,
|
||||
successPercent: PropTypes.number,
|
||||
format: PropTypes.func,
|
||||
status: PropTypes.oneOf(['success', 'active', 'exception']),
|
||||
showInfo: PropTypes.bool,
|
||||
strokeWidth: PropTypes.number,
|
||||
trailColor: PropTypes.string,
|
||||
width: PropTypes.number,
|
||||
gapDegree: PropTypes.number,
|
||||
gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
|
||||
size: PropTypes.oneOf(['default', 'small']),
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Progress',
|
||||
props: initDefaultProps(ProgressProps, {
|
||||
type: 'line',
|
||||
percent: 0,
|
||||
showInfo: true,
|
||||
trailColor: '#f3f3f3',
|
||||
prefixCls: 'ant-progress',
|
||||
size: 'default',
|
||||
}),
|
||||
|
||||
render () {
|
||||
const {
|
||||
prefixCls, percent = 0, status, format, trailColor, size, successPercent,
|
||||
type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition,
|
||||
} = getOptionProps(this)
|
||||
const progressStatus = parseInt(percent.toString(), 10) >= 100 && !(status)
|
||||
? 'success' : (status || 'normal')
|
||||
let progressInfo
|
||||
let progress
|
||||
const textFormatter = format || (percentNumber => `${percentNumber}%`)
|
||||
|
||||
if (showInfo) {
|
||||
let text
|
||||
const iconType = (type === 'circle' || type === 'dashboard') ? '' : '-circle'
|
||||
if (progressStatus === 'exception') {
|
||||
text = format ? textFormatter(percent) : <Icon type={`cross${iconType}`} />
|
||||
} else if (progressStatus === 'success') {
|
||||
text = format ? textFormatter(percent) : <Icon type={`check${iconType}`} />
|
||||
} else {
|
||||
text = textFormatter(percent)
|
||||
}
|
||||
progressInfo = <span class={`${prefixCls}-text`}>{text}</span>
|
||||
}
|
||||
|
||||
if (type === 'line') {
|
||||
const percentStyle = {
|
||||
width: `${percent}%`,
|
||||
height: addUnit(strokeWidth) || (size === 'small' ? '6px' : '8px'),
|
||||
}
|
||||
const successPercentStyle = {
|
||||
width: `${successPercent}%`,
|
||||
height: addUnit(strokeWidth) || (size === 'small' ? '6px' : '8px'),
|
||||
}
|
||||
const successSegment = successPercent !== undefined
|
||||
? <div class={`${prefixCls}-success-bg`} style={successPercentStyle} />
|
||||
: null
|
||||
progress = (
|
||||
<div>
|
||||
<div class={`${prefixCls}-outer`}>
|
||||
<div class={`${prefixCls}-inner`}>
|
||||
<div class={`${prefixCls}-bg`} style={percentStyle} />
|
||||
{successSegment}
|
||||
</div>
|
||||
</div>
|
||||
{progressInfo}
|
||||
</div>
|
||||
)
|
||||
} else if (type === 'circle' || type === 'dashboard') {
|
||||
const circleSize = width || 120
|
||||
const circleStyle = {
|
||||
width: addUnit(circleSize),
|
||||
height: addUnit(circleSize),
|
||||
fontSize: addUnit(circleSize * 0.15 + 6),
|
||||
}
|
||||
const circleWidth = strokeWidth || 6
|
||||
const gapPos = gapPosition || type === 'dashboard' && 'bottom' || 'top'
|
||||
const gapDeg = gapDegree || (type === 'dashboard' && 75)
|
||||
progress = (
|
||||
<div class={`${prefixCls}-inner`} style={circleStyle}>
|
||||
<Circle
|
||||
percent={percent}
|
||||
strokeWidth={circleWidth}
|
||||
trailWidth={circleWidth}
|
||||
strokeColor={statusColorMap[progressStatus]}
|
||||
trailColor={trailColor}
|
||||
prefixCls={prefixCls}
|
||||
gapDegree={gapDeg || 0}
|
||||
gapPosition={gapPos}
|
||||
/>
|
||||
{progressInfo}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const classString = classNames(prefixCls, {
|
||||
[`${prefixCls}-${type === 'dashboard' && 'circle' || type}`]: true,
|
||||
[`${prefixCls}-status-${progressStatus}`]: true,
|
||||
[`${prefixCls}-show-info`]: showInfo,
|
||||
[`${prefixCls}-${size}`]: size,
|
||||
})
|
||||
|
||||
const progressProps = {
|
||||
on: this.$listeners,
|
||||
class: classString,
|
||||
}
|
||||
return (
|
||||
<div {...progressProps}>
|
||||
{progress}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
@ -0,0 +1,167 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@progress-prefix-cls: ~"@{ant-prefix}-progress";
|
||||
|
||||
.@{progress-prefix-cls} {
|
||||
.reset-component;
|
||||
display: inline-block;
|
||||
|
||||
&-line {
|
||||
width: 100%;
|
||||
font-size: @font-size-base;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-small&-line,
|
||||
&-small&-line &-text .@{iconfont-css-prefix} {
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
|
||||
&-outer {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
.@{progress-prefix-cls}-show-info & {
|
||||
padding-right: ~"calc(2em + 8px)";
|
||||
margin-right: ~"calc(-2em - 8px)";
|
||||
}
|
||||
}
|
||||
|
||||
&-inner {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: @progress-remaining-color;
|
||||
border-radius: 100px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-circle-trail {
|
||||
stroke: @progress-remaining-color;
|
||||
}
|
||||
|
||||
&-circle-path {
|
||||
stroke: @progress-default-color;
|
||||
animation: ~"@{ant-prefix}-progress-appear" .3s;
|
||||
}
|
||||
|
||||
&-success-bg,
|
||||
&-bg {
|
||||
border-radius: 100px;
|
||||
background-color: @progress-default-color;
|
||||
transition: all .4s @ease-out-circ 0s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-success-bg {
|
||||
background-color: @success-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-text {
|
||||
word-break: normal;
|
||||
width: 2em;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
color: @text-color-secondary;
|
||||
line-height: 1;
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-status-active {
|
||||
.@{progress-prefix-cls}-bg:before {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @component-background;
|
||||
border-radius: 10px;
|
||||
animation: ~"@{ant-prefix}-progress-active" 2.4s @ease-out-quint infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&-status-exception {
|
||||
.@{progress-prefix-cls}-bg {
|
||||
background-color: @error-color;
|
||||
}
|
||||
.@{progress-prefix-cls}-text {
|
||||
color: @error-color;
|
||||
}
|
||||
.@{progress-prefix-cls}-circle-path {
|
||||
stroke: @error-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-status-success {
|
||||
.@{progress-prefix-cls}-bg {
|
||||
background-color: @success-color;
|
||||
}
|
||||
.@{progress-prefix-cls}-text {
|
||||
color: @success-color;
|
||||
}
|
||||
.@{progress-prefix-cls}-circle-path {
|
||||
stroke: @success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-circle &-inner {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&-circle &-text {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
margin: 0;
|
||||
color: @text-color;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 14 / 12em;
|
||||
}
|
||||
}
|
||||
|
||||
&-circle&-status-exception {
|
||||
.@{progress-prefix-cls}-text {
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
&-circle&-status-success {
|
||||
.@{progress-prefix-cls}-text {
|
||||
color: @success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ~"@{ant-prefix}-progress-active" {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
width: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.5;
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue