reactjs - 如何使用fabric UI在进度条中显示进度完成百分比？

Question

我正在使用流利的 UI 来显示进度条。

我引用的链接： https ://developer.microsoft.com/en-us/fluentui#/controls/web/progressindicator

我在使用反应显示进度条中的百分比时遇到了困难。有人可以就此提出建议。

谢谢，

标签： reactjsfluent-uifluentui-react

Answer 1

如果您只想显示百分比数字，那么我所做的就是将百分比添加到<p>标签并使用用于增加进度条的百分比数字来显示百分比数字。

由于数字从 0 增加到 1 docs，我们可以做的是将输出乘以100并取其中Math.floor的一个。

Codepen - 演示

const { ProgressIndicator, Fabric: FabricComponent, initializeIcons } = window.Fabric;

// Initialize icons in case this example uses them
initializeIcons();

const intervalDelay = 100;
const intervalIncrement = 0.01;

const ProgressIndicatorBasicExample: React.FunctionComponent = () => {
  const [percentComplete, setPercentComplete] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setPercentComplete((intervalIncrement + percentComplete) % 1);
    }, intervalDelay);
    return () => {
      clearInterval(id);
    };
  });

  return (
    <>
      <ProgressIndicator label="Example title" description="Example description" 
      percentComplete={percentComplete} />
      <p>{Math.floor(percentComplete * 100)}%</p>
    </>
  );
};

const ProgressIndicatorBasicExampleWrapper = () => <FabricComponent><ProgressIndicatorBasicExample /></FabricComponent>;
ReactDOM.render(<ProgressIndicatorBasicExampleWrapper />, document.getElementById('content'))