css 如何创建一个类似 Jmeter 的ANTD进度条

ttp71kqs 于 2023-02-17 发布在其他

关注(0)|答案(1)|浏览(138)

我想使用antd库创建一个这样的进度条，以显示来自API的百分比值

我像这样设计进度条，但是当我应用透明笔划颜色时，它显示的是正常进度条，而不是像

这样显示相对div
当我向它添加颜色时，它会显示添加的颜色

下面是我的代码

<div className="w-full mt-2">
    <div className="flex flex-row relative">
      <div className="w-full py-2 bg-sliderGreenS rounded-l-lg"></div>
      <div className="w-full py-2 bg-sliderYellowS rounded-l-lg -ml-3"></div>
      <div className="w-full py-2 bg-sliderOrangeS rounded-l-lg -ml-3"></div>
      <div className="w-full py-2 bg-sliderRedS rounded-lg -ml-3"></div>

      <Progress
        className="w-full absolute -mt-1.5"
        percent={100}
        showInfo={false}
        strokeWidth={17}
        success={{
          percent: x,
          strokeColor: "transparent",
        }}
        strokeColor="rgba(0,0,0,0.5)"
      />
    </div>

我想改变它的第一个附件图片。我用顺风和ANTD包为这个

css

来源：https://stackoverflow.com/questions/75442388/how-to-create-a-antd-progress-bar-like-a-meter

1条答案

按热度按时间

8e2ybdfx1#

经过一些工作，我得到了一个答案，我没有使用ANTD的进度条，而是使用了一些定制的div来使用绝对和相对行为创建视图。

<div className="w-full mt-2">
    <div className="flex flex-row relative">
      <div className="w-full py-2 bg-sliderGreenS rounded-l-lg"></div>
      <div className="w-full py-2 bg-sliderYellowS rounded-l-lg -ml-3"></div>
      <div className="w-full py-2 bg-sliderOrangeS rounded-l-lg -ml-3"></div>
      <div className="w-full py-2 bg-sliderRedS rounded-lg -ml-3"></div>
      <div
        className={`bg-[rgba(0,0,0,0.8)] absolute right-0 z-10 py-2 ${
          value >= 1 ? "rounded-r-lg" : "rounded-lg"
        } text-end`}
        style={{
          width: `${(100 - value)}%`,
        }}
      ></div>
    </div>
    <div
      className={`${value ===0 ? "text-start -pl-5" : "text-end"}`}
      style={{
        width: `${value===100? value : value+2}%`,
      }}
    >
      <div class="pt-2 flex justify-end">
        <div className="triangle-up"></div>
      </div>
      <div className={`text-sm`}>
      {value}
      </div>
    
    </div>
  </div>

value是要显示为百分比的金额。
最后的结果是这样的

赞(0）回复(0）举报 2023-02-17

我来回答

css 如何创建一个类似 Jmeter 的ANTD进度条

1条答案

相关问题

热门标签

最新问答