ivyDesign

Appearance

Progress 进度条 ​

常规用法 ​

通过设置value属性的值来设置进度

html
<ivy-progress value="70"></ivy-progress>

设置进度条的颜色 ​

通过 CSS 变量--ivy-progress-color 来设置进度条的颜色

html
<ivy-progress value="70"></ivy-progress>
<ivy-progress
  value="70"
  color="red"
  style="--ivy-progress-color: red"
></ivy-progress>

设置进度条的粗细 ​

通过 CSS 变量 --ivy-progress-stroke-width 来设置进度条的大小-默认:8px

html
<ivy-progress
  value="70"
  style="--ivy-progress-stroke-width: 24px"
></ivy-progress>
<ivy-progress
  value="70"
  style="--ivy-progress-stroke-width: 15px"
></ivy-progress>

显示描述文字 ​

通过设置 show-text 属性来显示描述文字

html
<ivy-progress value="70" show-text></ivy-progress>

格式化描述文字 ​

通过设置 formatter 属性来设置格式化描述文字，格式 {value}px

html
<ivy-progress value="70" show-text formatter="{value}px"></ivy-progress>

可用的 CSS 变量 ​

点击打开
css
:host {
  --ivy-progress-track-color: #ebeef5; /**进度条轨道的颜色 */
  --ivy-progress-stroke-width: 8px; /**进度条大小 */
  --ivy-progress-color: var(--ivy-primary-color, #409eff); /**进度条颜色 */
  --ivy-progress-text-size: 12px; /**进度条描述文字的大小 */
  --ivy-progress-text-color: var(--ivy-text-color-primary, #303133);/**进度条描述文字的颜色 */

Props ​

属性名描述类型可选值默认值
value进度值number-0
showText显示描述文字boolean--
formatter格式化描述文字-{value}是必须的string-{value}%