如何解决如何使用结构 UI 在进度条中显示进度完成百分比?
我正在使用流畅的 UI 来显示进度条。
我提到的链接: https://developer.microsoft.com/en-us/fluentui#/controls/web/progressindicator
我在使用 react 在进度条中显示百分比时遇到了困难。有人可以对此提出建议吗。
谢谢,
解决方法
如果您只想显示百分比数字,那么我所做的就是将百分比添加到 <p>
标签中,并使用用于增加进度条的百分比数字来显示百分比数字。
由于数字按照 docs
从 0 增加到 1,我们可以做的是将输出乘以 100 并取其 Math.floor
。
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'))
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。