0

我正在尝试添加Progress BarReact 应用程序。

我正在使用语义 CSS： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

从文档（https://semantic-ui.com/modules/progress.html#/definition），我发现以下示例代码但无法添加/更改进度

<div class="ui green progress">
    <div class="bar"></div>
</div>

我尝试了什么：

<div class="ui green progress" dataValue="1" dataTotal="100" id="progress">
    <div class="bar"></div>
</div>

但它显示为以前的（没有变化）。

如何value在 ReactJS 的进度条中添加/更改进度（将来可能会增加/减少）？

添加一个value足以继续

提前致谢

4

1 回答 1

0

根据您提供的链接，您使用的是标准SemanticUI（自 2018 年以来未更新）。

在这种情况下，您需要遵循 Progress Bar 对象的使用页面以按照语义 UI 的需要使用它。所有示例都使用 jQuery，因为它是 Semantic UI 的先决条件。

例如，您可以更新data-percent

<div class="ui progress" data-percent="74" id="example">
  <div class="bar"></div>
  <div class="label">74% Funded</div>
</div>

然后打电话

$('#example').progress();

或者你可以直接通过 JS 更新

$('#example').progress({
  percent: 22
});

另一个解决方案，因为您使用的是 React，所以转移到Semantic UI React，它具有进度条的正确实现，并且总体上最适合 React。

于 2021-12-05T15:00:44.297 回答