element-ui的Progress进度条，当前状态样色和背景色的设置

我需要的样式是当前状态是白色，背景色是一个带点透明的颜色。
官网里只给了一个color属性，无法达到我的要求。
需求：

于是F12查看一下，发现

el-progress-bar__outer表示进度条的背景色，el-progress-bar__inner表示当前状态的颜色，我们只需要设置这两个class的背景颜色就可以了。不过直接设置好像不起作用，百度后得知需要获得盛放它的外部元素对象，然后利用“>>>” 进行赋值，其他组件也适用
我的代码：

/* 当前状态颜色 */
.progressBar >>> .el-progress-bar__outer {background-color: rgba(255, 255, 255, 0.2);
}
/* 进度条的背景色 */
.progressBar >>> .el-progress-bar__inner {background-color: #fff;
}

element-ui的Progress进度条，当前状态样色和背景色的设置相关推荐

linux dd 进度条,Progress 进度条 – DDProgressHUD
DDProgressHUD Progress 进度条,UIActivityIndicatorView 小菊花,弹窗,状态显示,高度自定义 DDProgressHUD的介绍提供了四种类型的展示: 显示 ...
html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
微信小程序进度条样式_微信小程序组件progress进度条解读和分析
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
elementui进度条如何设置_ElementUI之Progress进度条底色设置
ElementUI中Progress进度条组件官网给了如下属性: 这里的color很好理解就是显示实际进度的颜色(个人觉得叫背景色不太好).但是官网并没有给出设置底色的属性,只给了一个默认的颜色,F1 ...
直播平台搭建源码，uniapp progress进度条
直播平台搭建源码,uniapp progress进度条 .progress-container {height: 20rpx;display: flex;flex-direction: row;ali ...
微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
【Flutter】仿 Element 样式 Progress 进度条
先看下整体效果依赖在 pubspec.yaml 中依赖 ele_progress:^version 最新版本号在 pub 中查看:ele_progress 地址:https://pub.dev/p ...
python之Rich库使用入门(打印彩色字体，表单，进度条与状态动画，高级数据类型)
文章目录前言一.Rich是什么? 二.安装与导入Rich 1.Rich安装 2.导入rich库(快速使用打印功能) 三.Console类的使用 1.官方推荐的构造与导入方式 2.Console的构 ...
Flutter进度条Flutter圆形进度条Flutter条形进度条Flutter Progress进度条LinearProgressIndicator
更多文章请查看 flutter从入门到精通 Flutter Progress 1 条形无固定值进度条 //LinearProgressIndicator不具备设置高度的选项,可以使用SizedBox ...

element-ui的Progress进度条，当前状态样色和背景色的设置

element-ui的Progress进度条，当前状态样色和背景色的设置相关推荐

最新文章

热门文章