Skip to content

E
Element
Commit 6af04e87 authored by hetech's avatar hetech Committed by GitHub
Browse files
Options

Progress: add dashboard progress bar & add custom color (#11867)

parent 90448d67
Show whitespace changes
Inline Side-by-side
Showing with 746 additions and 86 deletions
examples/docs/en-US/progress.md
View file @ 6af04e87
...@@ -2,29 +2,100 @@ ...@@ -2,29 +2,100 @@
Progress is used to show the progress of current operation, and inform the user the current status. Progress is used to show the progress of current operation, and inform the user the current status.
### Linear progress bar (external percentage) ### Linear progress bar
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. :::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. You can custom text format by setting `format`.
```html ```html
<el-progress :percentage="0"></el-progress> <el-progress :percentage="50"></el-progress>
<el-progress :percentage="70"></el-progress> <el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="80" color="#8e71c7"></el-progress>
<el-progress :percentage="100" status="success"></el-progress> <el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress> <el-progress :percentage="50" status="exception"></el-progress>
<script>
export default {
methods: {
format(percentage) {
return percentage === 100 ? 'Full' : `${percentage}%`;
}
}
};
</script>
``` ```
::: :::
### Linear progress bar (internal percentage) ### Internal percentage
In this case the percentage takes no additional space. In this case the percentage takes no additional space.
:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar. :::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
```html ```html
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress> <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress> <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress> <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress> <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress> ```
:::
### Custom color
You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 20,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
customColorMethod(percentage) {
if (percentage < 30) {
return '#909399';
} else if (percentage < 70) {
return '#e6a23c';
} else {
return '#67c23a';
}
},
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
``` ```
::: :::
...@@ -34,20 +105,68 @@ In this case the percentage takes no additional space. ...@@ -34,20 +105,68 @@ In this case the percentage takes no additional space.
```html ```html
<el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress>
``` ```
::: :::
### Dashboard progress bar
You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
:::demo
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 10,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
```
:::
### Attributes ### Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
| --- | ---- | ---- | ---- | ---- | | --- | ---- | ---- | ---- | ---- |
| **percentage** | percentage, **required** | number | 0-100 | 0 | | **percentage** | percentage, **required** | number | 0-100 | 0 |
| type | the type of progress bar | string | line/circle | line | | type | the type of progress bar | string | line/circle/dashboard | line |
| stroke-width | the width of progress bar | number | — | 6 | | stroke-width | the width of progress bar | number | — | 6 |
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false | | text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
| status | the current status of progress bar | string | success/exception | — | | status | the current status of progress bar | string | success/exception/warning | — |
| color | background color of progress bar. Overrides `status` prop | string | — | — | | color | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
| width | the canvas width of circle progress bar | number | — | 126 | | width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true | | show-text | whether to show percentage | boolean | — | true |
examples/docs/es/progress.md
View file @ 6af04e87
## Progreso ## Progreso
Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta. Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
### Barra de progreso lineal (porcentage externo) ### Barra de progreso lineal
:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`. You can custom text format by setting `format`.
:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
```html ```html
<el-progress :percentage="0"></el-progress> <el-progress :percentage="50"></el-progress>
<el-progress :percentage="70"></el-progress> <el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="80" color="#8e71c7"></el-progress>
<el-progress :percentage="100" status="success"></el-progress> <el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress> <el-progress :percentage="50" status="exception"></el-progress>
<script>
export default {
methods: {
format(percentage) {
return percentage === 100 ? 'Full' : `${percentage}%`;
}
}
};
</script>
``` ```
::: :::
### Barra de progreso lineal (porcentage interno) ### Pporcentage interno
En este caso el porcentage no toma espacio adicional. En este caso el porcentage no toma espacio adicional.
:::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma. :::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
```html ```html
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress> <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress> <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress> <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress> <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress> ```
:::
### Custom color
You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 20,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
customColorMethod(percentage) {
if (percentage < 30) {
return '#909399';
} else if (percentage < 70) {
return '#e6a23c';
} else {
return '#67c23a';
}
},
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
``` ```
::: :::
...@@ -32,20 +104,67 @@ En este caso el porcentage no toma espacio adicional. ...@@ -32,20 +104,67 @@ En este caso el porcentage no toma espacio adicional.
```html ```html
<el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress>
``` ```
::: :::
### Dashboard progress bar
:::demo You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 10,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
```
:::
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto | | Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
| ------------ | ---------------------------------------- | ------- | ----------------- | ----------- | | ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
| percentage | porcentaje, requerido | number | 0-100 | 0 | | percentage | porcentaje, requerido | number | 0-100 | 0 |
| type | tipo de barra de progreso | string | line/circle | line | | type | tipo de barra de progreso | string | line/circle/dashboard | line |
| stroke-width | ancho de la barra de progreso | number | — | 6 | | stroke-width | ancho de la barra de progreso | number | — | 6 |
| text-inside | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false | | text-inside | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false |
| status | estado actual de la barra de progreso | string | success/exception | — | | status | estado actual de la barra de progreso | string | success/exception/warning | — |
| color | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string | — | — | | color | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' |
| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 | | width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
| show-text | mostrar porcentaje | boolean | — | true | | show-text | mostrar porcentaje | boolean | — | true |
examples/docs/fr-FR/progress.md
View file @ 6af04e87
...@@ -2,29 +2,100 @@ ...@@ -2,29 +2,100 @@
Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel. Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.
### Barre de progression linéaire (pourcentage externe) ### Barre de progression linéaire
:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. :::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. You can custom text format by setting `format`.
```html ```html
<el-progress :percentage="0"></el-progress> <el-progress :percentage="50"></el-progress>
<el-progress :percentage="70"></el-progress> <el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="80" color="#8e71c7"></el-progress>
<el-progress :percentage="100" status="success"></el-progress> <el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress> <el-progress :percentage="50" status="exception"></el-progress>
<script>
export default {
methods: {
format(percentage) {
return percentage === 100 ? 'Full' : `${percentage}%`;
}
}
};
</script>
``` ```
::: :::
### Barre de progression linéaire (pourcentage interne) ### Pourcentage interne
Dans ce cas le pourcentage ne prends pas de place en plus. Dans ce cas le pourcentage ne prends pas de place en plus.
:::demo L'attribut `stroke-width` détermine le `width` de la barre de progression. Utilisez `text-inside` mettre la description à l'intérieur de la barre. :::demo L'attribut `stroke-width` détermine le `width` de la barre de progression. Utilisez `text-inside` mettre la description à l'intérieur de la barre.
```html ```html
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress> <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress> <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress> <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress> <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress> ```
:::
### Custom color
You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 20,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
customColorMethod(percentage) {
if (percentage < 30) {
return '#909399';
} else if (percentage < 70) {
return '#e6a23c';
} else {
return '#67c23a';
}
},
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
``` ```
::: :::
...@@ -34,10 +105,57 @@ Dans ce cas le pourcentage ne prends pas de place en plus. ...@@ -34,10 +105,57 @@ Dans ce cas le pourcentage ne prends pas de place en plus.
```html ```html
<el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress>
<el-progress type="circle" :percentage="100" status="text">Terminé</el-progress> ```
:::
### Dashboard progress bar
You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
:::demo
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 10,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
``` ```
::: :::
...@@ -46,10 +164,10 @@ Dans ce cas le pourcentage ne prends pas de place en plus. ...@@ -46,10 +164,10 @@ Dans ce cas le pourcentage ne prends pas de place en plus.
| Attribut | Description | Type | Valeurs acceptées | Défaut | | Attribut | Description | Type | Valeurs acceptées | Défaut |
| --- | ---- | ---- | ---- | ---- | | --- | ---- | ---- | ---- | ---- |
| **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 | | **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 |
| type | Le type de barre. | string | line/circle | line | | type | Le type de barre. | string | line/circle/dashboard | line |
| stroke-width | La largeur de la barre. | number | — | 6 | | stroke-width | La largeur de la barre. | number | — | 6 |
| text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false | | text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false |
| status | Le statut actuel de la progression. | string | success/exception/text | — | | status | Le statut actuel de la progression. | string | success/exception/text | — |
| color | La couleur de fon de la barre. Écrase `status`. | string | — | — | | color | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
| width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 | | width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
| show-text | Si le pourcentage doit être affiché. | boolean | — | true | | show-text | Si le pourcentage doit être affiché. | boolean | — | true |
examples/docs/zh-CN/progress.md
View file @ 6af04e87
...@@ -2,55 +2,175 @@ ...@@ -2,55 +2,175 @@
用于展示操作进度，告知用户当前状态和预期。 用于展示操作进度，告知用户当前状态和预期。
### 线形进度条 — 百分比外显 ### 线形进度条
:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。 :::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。通过 `format` 属性来指定进度条文字内容。
```html ```html
<el-progress :percentage="0"></el-progress> <el-progress :percentage="50"></el-progress>
<el-progress :percentage="70"></el-progress> <el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="80" color="#8e71c7"></el-progress>
<el-progress :percentage="100" status="success"></el-progress> <el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress> <el-progress :percentage="50" status="exception"></el-progress>
<script>
export default {
methods: {
format(percentage) {
return percentage === 100 ? '满' : `${percentage}%`;
}
}
};
</script>
``` ```
::: :::
### 线形进度条 — 百分比内显 ### 百分比内显
百分比不占用额外控件，适用于文件上传等场景。 百分比不占用额外控件，适用于文件上传等场景。
:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。 :::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。
```html ```html
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress> <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress> <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress> <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress> <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress> ```
:::
### 自定义颜色
可以通过 `color` 设置进度条的颜色，`color` 可以接受颜色字符串，函数和数组。
:::demo
```html
<el-progress :percentage="percentage" :color="customColor"></el-progress>
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 20,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
customColorMethod(percentage) {
if (percentage < 30) {
return '#909399';
} else if (percentage < 70) {
return '#e6a23c';
} else {
return '#67c23a';
}
},
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
``` ```
::: :::
### 环形进度条 ### 环形进度条
:::demo Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。 Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
:::demo
```html ```html
<el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress>
``` ```
::: :::
### 仪表盘形进度条
:::demo 通过 `type` 属性来指定使用仪表盘形进度条。
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
<el-button icon="el-icon-plus" @click="increase"></el-button>
</el-button-group>
</div>
<script>
export default {
data() {
return {
percentage: 10,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
}
}
}
</script>
```
:::
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 | | **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 进度条类型 | string | line/circle | line | | type | 进度条类型 | string | line/circle/dashboard | line |
| stroke-width | 进度条的宽度，单位 px | number | — | 6 | | stroke-width | 进度条的宽度，单位 px | number | — | 6 |
| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false | | text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
| status | 进度条当前状态 | string | success/exception | — | | status | 进度条当前状态 | string | success/exception/warning | — |
| color | 进度条背景色（会覆盖 status 状态颜色） | string | — | — | | color | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
| width | 环形进度条画布宽度（只在 type=circle 时可用） | number | | 126 | | width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 |
| show-text | 是否显示进度条文字内容 | boolean | — | true | | show-text | 是否显示进度条文字内容 | boolean | — | true |
packages/progress/src/progress.vue
View file @ 6af04e87
...@@ -17,14 +17,27 @@ ...@@ -17,14 +17,27 @@
<div class="el-progress-bar" v-if="type === 'line'"> <div class="el-progress-bar" v-if="type === 'line'">
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}"> <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
<div class="el-progress-bar__inner" :style="barStyle"> <div class="el-progress-bar__inner" :style="barStyle">
<div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div> <div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else> <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path> <path
<path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path> class="el-progress-circle__track"
:d="trackPath"
stroke="#e5e9f2"
:stroke-width="relativeStrokeWidth"
fill="none"
:style="trailPathStyle"></path>
<path
class="el-progress-circle__path"
:d="trackPath"
:stroke="stroke"
fill="none"
stroke-linecap="round"
:stroke-width="percentage ? relativeStrokeWidth : 0"
:style="circlePathStyle"></path>
</svg> </svg>
</div> </div>
<div <div
...@@ -32,7 +45,7 @@ ...@@ -32,7 +45,7 @@
v-if="showText && !textInside" v-if="showText && !textInside"
:style="{fontSize: progressTextSize + 'px'}" :style="{fontSize: progressTextSize + 'px'}"
> >
<template v-if="!status">{{percentage}}%</template> <template v-if="!status">{{content}}</template>
<i v-else :class="iconClass"></i> <i v-else :class="iconClass"></i>
</div> </div>
</div> </div>
...@@ -44,7 +57,7 @@ ...@@ -44,7 +57,7 @@
type: { type: {
type: String, type: String,
default: 'line', default: 'line',
validator: val => ['line', 'circle'].indexOf(val) > -1 validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1
}, },
percentage: { percentage: {
type: Number, type: Number,
...@@ -53,7 +66,8 @@ ...@@ -53,7 +66,8 @@
validator: val => val >= 0 && val <= 100 validator: val => val >= 0 && val <= 100
}, },
status: { status: {
type: String type: String,
validator: val => ['success', 'exception', 'warning'].indexOf(val) > -1
}, },
strokeWidth: { strokeWidth: {
type: Number, type: Number,
...@@ -72,41 +86,65 @@ ...@@ -72,41 +86,65 @@
default: true default: true
}, },
color: { color: {
type: String, type: [String, Array, Function],
default: '' default: ''
} },
format: Function
}, },
computed: { computed: {
barStyle() { barStyle() {
const style = {}; const style = {};
style.width = this.percentage + '%'; style.width = this.percentage + '%';
style.backgroundColor = this.color; style.backgroundColor = this.getCurrentColor(this.percentage);
return style; return style;
}, },
relativeStrokeWidth() { relativeStrokeWidth() {
return (this.strokeWidth / this.width * 100).toFixed(1); return (this.strokeWidth / this.width * 100).toFixed(1);
}, },
radius() {
if (this.type === 'circle' || this.type === 'dashboard') {
return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
} else {
return 0;
}
},
trackPath() { trackPath() {
const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10); const radius = this.radius;
const isDashboard = this.type === 'dashboard';
return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`; return `
M 50 50
m 0 ${isDashboard ? '' : '-'}${radius}
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
`;
}, },
perimeter() { perimeter() {
const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2; return 2 * Math.PI * this.radius;
return 2 * Math.PI * radius; },
rate() {
return this.type === 'dashboard' ? 0.75 : 1;
},
strokeDashoffset() {
const offset = -1 * this.perimeter * (1 - this.rate) / 2;
return `${offset}px`;
},
trailPathStyle() {
return {
strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
strokeDashoffset: this.strokeDashoffset
};
}, },
circlePathStyle() { circlePathStyle() {
const perimeter = this.perimeter;
return { return {
strokeDasharray: `${perimeter}px,${perimeter}px`, strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px', strokeDashoffset: this.strokeDashoffset,
transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease' transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
}; };
}, },
stroke() { stroke() {
let ret; let ret;
if (this.color) { if (this.color) {
ret = this.color; ret = this.getCurrentColor(this.percentage);
} else { } else {
switch (this.status) { switch (this.status) {
case 'success': case 'success':
...@@ -115,6 +153,9 @@ ...@@ -115,6 +153,9 @@
case 'exception': case 'exception':
ret = '#ff4949'; ret = '#ff4949';
break; break;
case 'warning':
ret = '#e6a23c';
break;
default: default:
ret = '#20a0ff'; ret = '#20a0ff';
} }
...@@ -122,6 +163,9 @@ ...@@ -122,6 +163,9 @@
return ret; return ret;
}, },
iconClass() { iconClass() {
if (this.status === 'warning') {
return 'el-icon-warning';
}
if (this.type === 'line') { if (this.type === 'line') {
return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close'; return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
} else { } else {
...@@ -132,6 +176,47 @@ ...@@ -132,6 +176,47 @@
return this.type === 'line' return this.type === 'line'
? 12 + this.strokeWidth * 0.4 ? 12 + this.strokeWidth * 0.4
: this.width * 0.111111 + 2 ; : this.width * 0.111111 + 2 ;
},
content() {
if (typeof this.format === 'function') {
return this.format(this.percentage) || '';
} else {
return `${this.percentage}%`;
}
}
},
methods: {
getCurrentColor(percentage) {
if (typeof this.color === 'function') {
return this.color(percentage);
} else if (typeof this.color === 'string') {
return this.color;
} else {
return this.getLevelColor(percentage);
}
},
getLevelColor(percentage) {
const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage);
for (let i = 0; i < colorArray.length; i++) {
if (colorArray[i].percentage > percentage) {
return colorArray[i].color;
}
}
return colorArray[colorArray.length - 1].color;
},
getColorArray() {
const color = this.color;
const span = 100 / color.length;
return color.map((seriesColor, index) => {
if (typeof seriesColor === 'string') {
return {
color: seriesColor,
progress: (index + 1) * span
};
}
return seriesColor;
});
} }
} }
}; };
......
packages/theme-chalk/src/progress.scss
View file @ 6af04e87
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
} }
} }
@include m(circle) { @include m((circle,dashboard)) {
display: inline-block; display: inline-block;
.el-progress__text { .el-progress__text {
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
} }
} }
@include m(without-text) { @include m(without-text) {
.el-progress__text { .el-progress__text {
display: none; display: none;
...@@ -68,6 +69,16 @@ ...@@ -68,6 +69,16 @@
} }
} }
@include when(warning) {
.el-progress-bar__inner {
background-color: $--color-warning;
}
.el-progress__text {
color: $--color-warning;
}
}
@include when(exception) { @include when(exception) {
.el-progress-bar__inner { .el-progress-bar__inner {
background-color: $--color-danger; background-color: $--color-danger;
......
test/unit/specs/progress.spec.js
View file @ 6af04e87
import { createVue, destroyVM } from '../util'; import { createVue, destroyVM, waitImmediate } from '../util';
describe('Progress', () => { describe('Progress', () => {
let vm; let vm;
...@@ -78,6 +78,14 @@ describe('Progress', () => { ...@@ -78,6 +78,14 @@ describe('Progress', () => {
}, true); }, true);
expect(vm.$el.classList.contains('el-progress--circle')).to.be.true; expect(vm.$el.classList.contains('el-progress--circle')).to.be.true;
}); });
it('dashboard', () => {
vm = createVue({
template: `
<el-progress type="dashboard" :percentage="50"></el-progress>
`
}, true);
expect(vm.$el.classList.contains('el-progress--dashboard')).to.be.true;
});
it('width', () => { it('width', () => {
vm = createVue({ vm = createVue({
template: ` template: `
...@@ -103,4 +111,81 @@ describe('Progress', () => { ...@@ -103,4 +111,81 @@ describe('Progress', () => {
}, true); }, true);
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)'); expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
}); });
it('color is function', async() => {
vm = createVue({
template: `
<el-progress :percentage="percentage" :color="customColor"></el-progress>
`,
data() {
return {
percentage: 50
};
},
methods: {
customColor(percentage) {
if (percentage > 50) {
return '#13ce66';
} else {
return '#20a0ff';
}
},
increase() {
this.percentage = 60;
}
}
}, true);
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
vm.increase();
await waitImmediate();
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
});
it('color is array', async() => {
vm = createVue({
template: `
<el-progress :percentage="percentage" :color="colors"></el-progress>
`,
data() {
return {
percentage: 50,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#20a0ff', percentage: 60},
{color: '#13ce66', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage = 70;
}
}
}, true);
// #20a0ff
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
vm.increase();
await waitImmediate();
// #13ce66
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
});
it('format content', () => {
vm = createVue({
template: `
<el-progress :percentage="50" :format="format"></el-progress>
`,
methods: {
format(percentage) {
return `占比${percentage}%`;
}
}
}, true);
expect(vm.$el.querySelector('.el-progress__text').innerHTML).to.equal('占比50%');
});
}); });
types/progress.d.ts
View file @ 6af04e87
...@@ -21,11 +21,14 @@ export declare class ElProgress extends ElementUIComponent { ...@@ -21,11 +21,14 @@ export declare class ElProgress extends ElementUIComponent {
status: ProgressStatus status: ProgressStatus
/** Background color of progress bar. Overrides `status` prop */ /** Background color of progress bar. Overrides `status` prop */
color: string color: string | Function | Array<string | { color: string, percentage: number }>
/** The canvas width of circle progress bar */ /** The canvas width of circle progress bar */
width: number width: number
/** Whether to show percentage */ /** Whether to show percentage */
showText: boolean showText: boolean
/** Template function of the content */
format(percentage: number): string
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment