有没有办法使用material-ui 创建一个带有线性进度的按钮？

Question

我想创建一个带有内置线性进度条的按钮。类似这种体验，但使用 Material 组件： https://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/

我知道有一种方法可以集成<CircularProgress/>到按钮中，有没有办法集成<LinearProgress/>？它对我不起作用。

提前致谢。

Answer 1

就像这个CircularProgress例子一样，我猜你指的是this，它只是让 CSS 正确。

我已经分叉了该示例并添加了一个已集成的按钮，LinearProgress以便为您提供一个想法，该示例的相关代码是：

linearProgress: {
  position: "absolute",
  top: 0,
  width: "100%",
  height: "100%",
  opacity: 0.4,
  borderRadius: 4
}
...

<div className={classes.wrapper}>
  <Button
    variant="contained"
    color="primary"
    className={buttonClassname}
    disabled={loading}
    onClick={handleButtonClick}
  >
    Linear
  </Button>
  {loading && (
    <LinearProgress
      color="secondary"
      className={classes.linearProgress}
    />
  )}
  </div>