Question

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

我正在寻找类似的东西：

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

感谢您的帮助！

Answer 1

据我所知，没有任何一个组件可以在材料中实现这一目标。但是，您可以使用CircularProgress轻松实现自己的工作。

假设您正在使用material-ui v1，这是一个粗略的例子。首先，我创建一个接受LoadingButton道具的loading - 如果该道具是true，我会显示CircularProgress指标。它还接受done道具 - 如果这是真的，按钮会清除进度指示器并成为显示成功的复选标记。

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);

您可以使用LoadingButton，如以下示例所示，该示例使用state在按钮上设置适当的道具。

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;

您当然可以调整样式和功能以满足您的确切需求。

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

1 个答案: