mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(progress): add dynamic presentation (#2226)

Browse Source 
* docs(progress): add dynamic presentation

* docs(progress): add dynamic presentation for language

* docs(progress): add dynamic presentation template for language
This commit is contained in:
云游君 2021-06-17 11:33:26 +08:00 committed by GitHub
parent 7b58b4d3ff
commit 3e471d7aa1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 160 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
website/docs/en-US/progress.md
View File

@ -49,6 +49,7 @@ You can use `color` attr to set the progress bar color. it accepts color string,
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -61,6 +62,7 @@ You can use `color` attr to set the progress bar color. it accepts color string,
data() {
return {
percentage: 20,
percentage2: 0,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
@ -93,6 +95,11 @@ You can use `color` attr to set the progress bar color. it accepts color string,
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
@ -119,6 +126,7 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<el-progress type="dashboard" :percentage="percentage2" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -131,6 +139,7 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
data() {
return {
percentage: 10,
percentage2: 0,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
@ -153,6 +162,11 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
@ -206,22 +220,22 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --- | ---- | ---- | ---- | ---- |
| **percentage** | percentage, **required** | number | 0-100 | 0 |
| type | the type of progress bar | string | line/circle/dashboard | line |
| 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 |
| status | the current status of progress bar | string | success/exception/warning | — |
| indeterminate | set indeterminate progress | boolean | - | false |
| duration | control the animation duration of indeterminate progress | number | - | 3 |
| color | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
| width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | custom text format | function(percentage) | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | ------------------------------------------------------------------------------------- | --------------------- | ------------------------- | ------- |
| **percentage** | percentage, **required** | number | 0-100 | 0 |
| type | the type of progress bar | string | line/circle/dashboard | line |
| 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 |
| status | the current status of progress bar | string | success/exception/warning | — |
| indeterminate | set indeterminate progress | boolean | - | false |
| duration | control the animation duration of indeterminate progress | number | - | 3 |
| color | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
| width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | custom text format | function(percentage) | — | — |
### Slots
| Name | Description |
|------|--------|
| Name | Description |
| ------- | ----------------------------------------------- |
| default | Customized content, parameter is { percentage } |

46
website/docs/es/progress.md
View File

@ -48,6 +48,7 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -60,6 +61,7 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
data() {
return {
percentage: 20,
percentage2: 0,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
@ -92,6 +94,11 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
@ -116,6 +123,7 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<el-progress type="dashboard" :percentage="percentage2" :color="colors"></el-progress>
<div>
<el-button-group>
@ -129,6 +137,7 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
data() {
return {
percentage: 10,
percentage2: 0,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
@ -151,6 +160,11 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
@ -204,22 +218,22 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
:::
### Atributos
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
| ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
| percentage | porcentaje, requerido | number | 0-100 | 0 |
| type | tipo de barra de progreso | string | line/circle/dashboard | line |
| 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 |
| status | estado actual de la barra de progreso | string | success/exception/warning | — |
| indeterminate | set indeterminate progress | boolean | - | false |
| duration | control the animation duration of indeterminate progress | number | - | 3 |
| 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 |
| show-text | mostrar porcentaje | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | personalizar el formato de texto estableciendo format | function(percentage) | — | — |
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
| -------------- | ------------------------------------------------------------------------------------------- | --------------------- | ------------------------- | ----------- |
| percentage | porcentaje, requerido | number | 0-100 | 0 |
| type | tipo de barra de progreso | string | line/circle/dashboard | line |
| 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 |
| status | estado actual de la barra de progreso | string | success/exception/warning | — |
| indeterminate | set indeterminate progress | boolean | - | false |
| duration | control the animation duration of indeterminate progress | number | - | 3 |
| 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 |
| show-text | mostrar porcentaje | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | personalizar el formato de texto estableciendo format | function(percentage) | — | — |
### Slot
| name | Description |
|------|--------|
| name | Description |
| ------- | ----------------------------------------------- |
| default | Customized content, parameter is { percentage } |

46
website/docs/fr-FR/progress.md
View File

@ -49,6 +49,7 @@ Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -61,6 +62,7 @@ Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de
data() {
return {
percentage: 20,
percentage2: 0,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
@ -93,6 +95,11 @@ Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
@ -119,6 +126,7 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<el-progress type="dashboard" :percentage="percentage2" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -131,6 +139,7 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
data() {
return {
percentage: 10,
percentage2: 0,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
@ -153,6 +162,11 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
@ -207,22 +221,22 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| --- | ---- | ---- | ---- | ---- |
| **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 |
| type | Le type de barre. | string | line/circle/dashboard | line |
| 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 |
| status | Le statut actuel de la progression. | string | success/exception/text | — |
| indeterminate | set indeterminate progress | boolean | - | false |
| duration | control the animation duration of indeterminate progress | number | - | 3 |
| 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 |
| show-text | Si le pourcentage doit être affiché. | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | Vous pouvez personnaliser le format du texte en définissant le format | function(percentage) | — | — |
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| -------------- | ------------------------------------------------------------------------------------------ | --------------------- | ---------------------- | ------ |
| **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 |
| type | Le type de barre. | string | line/circle/dashboard | line |
| 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 |
| status | Le statut actuel de la progression. | string | success/exception/text | — |
| indeterminate | set indeterminate progress | boolean | - | false |
| duration | control the animation duration of indeterminate progress | number | - | 3 |
| 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 |
| show-text | Si le pourcentage doit être affiché. | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | Vous pouvez personnaliser le format du texte en définissant le format | function(percentage) | — | — |
### Slot
| name | Description |
|------|--------|
| name | Description |
| ------- | ----------------------------------------------- |
| default | Customized content, parameter is { percentage } |

46
website/docs/jp/progress.md
View File

@ -49,6 +49,7 @@
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -61,6 +62,7 @@
data() {
return {
percentage: 20,
percentage2: 0,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
@ -93,6 +95,11 @@
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
@ -119,6 +126,7 @@
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<el-progress type="dashboard" :percentage="percentage2" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -131,6 +139,7 @@
data() {
return {
percentage: 10,
percentage2: 0,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
@ -153,6 +162,11 @@
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
@ -206,22 +220,22 @@
:::
### 属性
| Attribute | Description | Type | Accepted Values | Default |
| --- | ---- | ---- | ---- | ---- |
| **percentage** | パーセンテージ、 **required** | number | 0-100 | 0 |
| type | プログレスバーの種類 | string | line/circle/dashboard | line |
| stroke-width | プログレスバーの幅 | number | — | 6 |
| text-inside | パーセントをプログレスバーの中に配置するかどうか、`type`が 'line'の場合のみ動作します。 | boolean | — | false |
| status | プログレスバーの現在の状態 | string | success/exception/warning | — |
| indeterminate | 操作にかかる時間を示しません | boolean | - | false |
| duration | indeterminateのプログレスバーのアニメーション期間 | number | - | 3 |
| color | プログレスバーの背景色を指定します。`status` プロップをオーバーライドします。 | string/function/array | — | '' |
| width | サークルプログレスバーのキャンバス幅 | number | — | 126 |
| show-text | パーセンテージ表示の有無 | boolean | — | true |
| stroke-linecap | 終点でのサークル/ダッシュボード型の形状 | string | butt/round/square | round |
| format | カスタムテキスト形式 | function(percentage) | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| -------------- | --------------------------------------------------------------------------------------- | --------------------- | ------------------------- | ------- |
| **percentage** | パーセンテージ、 **required** | number | 0-100 | 0 |
| type | プログレスバーの種類 | string | line/circle/dashboard | line |
| stroke-width | プログレスバーの幅 | number | — | 6 |
| text-inside | パーセントをプログレスバーの中に配置するかどうか、`type`が 'line'の場合のみ動作します。 | boolean | — | false |
| status | プログレスバーの現在の状態 | string | success/exception/warning | — |
| indeterminate | 操作にかかる時間を示しません | boolean | - | false |
| duration | indeterminateのプログレスバーのアニメーション期間 | number | - | 3 |
| color | プログレスバーの背景色を指定します。`status` プロップをオーバーライドします。 | string/function/array | — | '' |
| width | サークルプログレスバーのキャンバス幅 | number | — | 126 |
| show-text | パーセンテージ表示の有無 | boolean | — | true |
| stroke-linecap | 終点でのサークル/ダッシュボード型の形状 | string | butt/round/square | round |
| format | カスタムテキスト形式 | function(percentage) | — | — |
### Slot
| name | Description |
|------|--------|
| name | Description |
| ------- | ----------------------------------------------- |
| default | Customized content, parameter is { percentage } |

57
website/docs/zh-CN/progress.md
View File

@ -23,6 +23,7 @@
};
</script>
```
:::
### 百分比内显
@ -37,6 +38,7 @@
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
```
:::
### 自定义颜色
@ -51,6 +53,8 @@
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
<el-progress :percentage="percentage" :color="customColors"></el-progress>
<el-progress :percentage="percentage2" :color="customColors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -63,6 +67,7 @@
data() {
return {
percentage: 20,
percentage2: 0,
customColor: '#409eff',
customColors: [
{color: '#f56c6c', percentage: 20},
@ -95,10 +100,16 @@
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
```
:::
### 环形进度条
@ -114,6 +125,7 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
```
:::
### 仪表盘形进度条
@ -121,8 +133,8 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
:::demo 通过 `type` 属性来指定使用仪表盘形进度条。
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<el-progress type="dashboard" :percentage="percentage2" :color="colors"></el-progress>
<div>
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease"></el-button>
@ -135,6 +147,7 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
data() {
return {
percentage: 10,
percentage2: 0,
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
@ -157,10 +170,16 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
this.percentage = 0;
}
}
},
mounted() {
setInterval(() => {
this.percentage2 = (this.percentage2 % 100) + 10
}, 500)
}
}
</script>
```
:::
### 自定义内容
@ -184,6 +203,7 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
</template>
</el-progress>
```
:::
### 动画进度条
@ -207,25 +227,28 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
};
</script>
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 进度条类型 | string | line/circle/dashboard | line |
| stroke-width | 进度条的宽度，单位 px | number | — | 6 |
| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
| status | 进度条当前状态 | string | success/exception/warning | — |
| indeterminate | 是否为动画进度条 | boolean | - | false |
| duration | 控制动画进度条速度 | number | - | 3 |
| color | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 |
| show-text | 是否显示进度条文字内容 | boolean | — | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
| format | 指定进度条文字内容 | function(percentage) | — | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | ------------------------------------------------------------- | --------------------- | ------------------------- | ------ |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 进度条类型 | string | line/circle/dashboard | line |
| stroke-width | 进度条的宽度，单位 px | number | — | 6 |
| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
| status | 进度条当前状态 | string | success/exception/warning | — |
| indeterminate | 是否为动画进度条 | boolean | - | false |
| duration | 控制动画进度条速度 | number | - | 3 |
| color | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 |
| show-text | 是否显示进度条文字内容 | boolean | — | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
| format | 指定进度条文字内容 | function(percentage) | — | — |
### Slot
| name | 说明 |
|------|--------|
| name | 说明 |
| ------- | --------------------------------- |
| default | 自定义内容，参数为 { percentage } |