mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-30 11:16:12 +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

18
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>
@ -207,7 +221,7 @@ 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 |
@ -223,5 +237,5 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
### Slots
| Name | Description |
|------|--------|
| ------- | ----------------------------------------------- |
| default | Customized content, parameter is { percentage } |

18
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>
@ -205,7 +219,7 @@ 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 |
@ -221,5 +235,5 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
### Slot
| name | Description |
|------|--------|
| ------- | ----------------------------------------------- |
| default | Customized content, parameter is { percentage } |

18
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>
@ -208,7 +222,7 @@ 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 |
@ -224,5 +238,5 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
### Slot
| name | Description |
|------|--------|
| ------- | ----------------------------------------------- |
| default | Customized content, parameter is { percentage } |

18
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>
@ -207,7 +221,7 @@
### 属性
| Attribute | Description | Type | Accepted Values | Default |
| --- | ---- | ---- | ---- | ---- |
| -------------- | --------------------------------------------------------------------------------------- | --------------------- | ------------------------- | ------- |
| **percentage** | パーセンテージ、 **required** | number | 0-100 | 0 |
| type | プログレスバーの種類 | string | line/circle/dashboard | line |
| stroke-width | プログレスバーの幅 | number | — | 6 |
@ -223,5 +237,5 @@
### Slot
| name | Description |
|------|--------|
| ------- | ----------------------------------------------- |
| default | Customized content, parameter is { percentage } |

29
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,11 +227,13 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
};
</script>
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| -------------- | ------------------------------------------------------------- | --------------------- | ------------------------- | ------ |
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
| type | 进度条类型 | string | line/circle/dashboard | line |
| stroke-width | 进度条的宽度，单位 px | number | — | 6 |
@ -226,6 +248,7 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
| format | 指定进度条文字内容 | function(percentage) | — | — |
### Slot
| name | 说明 |
|------|--------|
| ------- | --------------------------------- |
| default | 自定义内容，参数为 { percentage } |