如何在 React 中使用 Material-ui 框架制作动画按钮？

Question

我正在使用material-ui框架进行反应，我想知道如何使用此框架创建动画按钮？

我正在寻找类似的东西：

https://dialogs.github.io/dialog-web-components/#buttonnext

谢谢你的帮助！

Answer 1

在较新版本的 Material UI 中，您可以使用LoadingButton组件，它目前位于实验室包中。Button这只是带有prop的包装loading。您可以自定义loadingIndicator组件及其位置。请参阅下面的示例：

import LoadingButton from '@mui/lab/LoadingButton';

<LoadingButton loading={loading}>
  Text
</LoadingButton>

<LoadingButton
  endIcon={<SendIcon />}
  loading={loading}
  loadingPosition="end"
  variant="contained"
>
  Send
</LoadingButton>

Answer 2

To the best of my knowledge, there is no single component that accomplishes this out of the box in material-ui. However, you can implement your own easily using CircularProgress.

Assuming you are using material-ui v1, here's a rough example. First, I create a LoadingButton that accepts a loading prop - if that prop is true, I display a CircularProgress indicator. It also accepts a done prop - if that's true, the button clears the progress indicator and becomes a checkmark to show success.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import { CircularProgress } from 'material-ui/Progress';
import Check from 'material-ui-icons/Check';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
});

const LoadingButton = (props) => {
  const { classes, loading, done, ...other } = props;

  if (done) {
    return (
      <Button className={classes.button} {...other} disabled>
        <Check />
      </Button>
    );
  }
  else if (loading) {
    return (
      <Button className={classes.button} {...other}>
        <CircularProgress />
      </Button>
    );
  } else {
    return (
      <Button className={classes.button} {...other} />
    );
  }
}

LoadingButton.defaultProps = {
  loading: false,
  done: false,
  };

LoadingButton.propTypes = {
  classes: PropTypes.object.isRequired,
  loading: PropTypes.bool,
  done: PropTypes.bool,
};

export default withStyles(styles)(LoadingButton);

You can use the LoadingButton as shown in the following example, which uses state to set the appropriate prop on the button.

import React from 'react';
import LoadingButton from './LoadingButton';

class ControlledButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = { loading: false, finished: false };
  }

  render() {
    const { loading, finished } = this.state;

    const setLoading = !finished && loading;

    return (
      <div>
        <LoadingButton
          loading={setLoading}
          done={finished}
          onClick={() => {
            // Clicked, so show the progress dialog
            this.setState({ loading: true });

            // In a 1.5 seconds, end the progress to show that it's done
            setTimeout(() => { this.setState({ finished: true })}, 1500);
          }}
        >
          Click Me
        </LoadingButton>
      </div>
    );
  }
}

export default ControlledButton;

You can of course tweak the styling and functionality to meet your exact needs.