【问题标题】:Progress bar with 'text-inside' attribute CSS带有'text-inside'属性CSS的进度条
【发布时间】:2021-09-20 19:52:23
【问题描述】:

有人可以帮助我处理Element UI 库的以下progress 元素: Element UI - Progress link

我试图达到这个结果: 将值放在每个条的末尾

目前,有这个: 使用以下代码:

HTML:

<el-progress :text-inside="true" :percentage="item.value" color="#6A7EC7" :stroke- 
width="12"></el-progress>

CSS:

.el-progress-bar__outer {
    background-color: transparent;
  }

我尝试将文本 div 设置为 relative,如下所示:

  >>> .el-progress-bar__innerText {
      color: $color-tremor-black;
      position: relative;
      left: 30px;
  }

但是当值接近结尾时,文本被剪切。

我错过了什么?需要做什么?

谢谢。

【问题讨论】:

    标签: html css element-ui


    【解决方案1】:

    我决定删除这个组件并使用 div 和 CSS 构建我自己的进度条。 像下面这样:

    HTML

    <div class="newProgress">
      <div class="progressBar" :style="{width:`${item.value}%`}"></div>
      <span class="newProgressValue">{{item.value}}%</span>
    </div>
    

    CSS

    .newProgress {
      display: flex;
      flex-direction: row;
      width: 400px;
    }
    
    .progressBar {
      width: 80%;
      margin: 3px 0px 0px 10px;
      background: #6A7EC7;
      border: 1px solid #6A7EC7;
      height: 12px;
      border-radius: 50px;
    }
    .newProgressValue {
      padding-left: 5px;
      font-size: $font-size-small-plus;
    }
    

    我找不到有关Element UI 库及其样式的信息。

    【讨论】:

      猜你喜欢
      • 2011-11-03
      • 2019-01-20
      • 2019-07-11
      • 1970-01-01
      • 2023-03-03
      • 1970-01-01
      • 2018-01-23
      • 1970-01-01
      相关资源
      最近更新 更多