有没有一种方法可以使用material-ui创建一个具有线性进度的按钮？

Question

我想创建一个带有内置线性进度条的按钮。像这样的经历，但是带有材料组件： 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>

Answer 2

类似这样的东西：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import LinearProgress from '@material-ui/core/LinearProgress'

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  button: {
    margin: theme.spacing(1),
  },
}))

export default function ContainedButtons() {
  const classes = useStyles()

  return (
    <div className={classes.root}>
      <Button variant="contained" className={classes.button}>
        <div>
          Demo
          <LinearProgress variant="determinate" value={75} />
        </div>
      </Button>
    </div>
  )
}