mirror of https://github.com/ElemeFE/element
49 lines
1.8 KiB
Markdown
49 lines
1.8 KiB
Markdown
|
<style>
|
||
|
|
.demo-box.demo-progress {
|
||
|
|
.el-progress {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
## 基础使用
|
||
|
|
|
||
|
|
一个基础的进度条
|
||
|
|
|
||
|
|
<div class="demo-box demo-progress">
|
||
|
|
<el-progress :percentage="50" size="large"></el-progress>
|
||
|
|
<el-progress :percentage="50" type="green" size="large"></el-progress>
|
||
|
|
<el-progress :percentage="50"></el-progress>
|
||
|
|
<el-progress :percentage="50" type="green"></el-progress>
|
||
|
|
<el-progress :percentage="50" size="small"></el-progress>
|
||
|
|
<el-progress :percentage="50" type="green" size="small"></el-progress>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-progress :percentage="50" size="large"></el-progress>
|
||
|
|
<el-progress :percentage="50" type="green" size="large"></el-progress>
|
||
|
|
<el-progress :percentage="50"></el-progress>
|
||
|
|
<el-progress :percentage="50" type="green"></el-progress>
|
||
|
|
<el-progress :percentage="50" size="small"></el-progress>
|
||
|
|
<el-progress :percentage="50" type="green" size="small"></el-progress>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 带条纹效果
|
||
|
|
|
||
|
|
<div class="demo-box demo-progress">
|
||
|
|
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
|
||
|
|
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
|
||
|
|
<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
|
||
|
|
```
|
||
|
|
|
||
|
|
## API
|
||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||
|
|
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||
|
|
| percentage | 百分比 | number | | 0 |
|
||
|
|
| type | 类型 | string | blue,green,blue-stripe,green-stripe | blue |
|
||
|
|
| size | 尺寸 | string | large, small | |
|