Fade

Fade - 图1

  1. import React from 'react';
  2. import { Button, Fade } from 'reactstrap';
  3. export default class Example extends React.Component {
  4. constructor(props) {
  5. super(props);
  6. this.state = { fadeIn: true };
  7. this.toggle = this.toggle.bind(this);
  8. }
  9. render() {
  10. return (
  11. <div>
  12. <Button color="primary" onClick={this.toggle}>Toggle Fade</Button>
  13. <Fade in={this.state.fadeIn} tag="h5" className="mt-3">
  14. This content will fade in and out as the button is pressed
  15. </Fade>
  16. </div>
  17. );
  18. }
  19. toggle() {
  20. this.setState({
  21. fadeIn: !this.state.fadeIn
  22. });
  23. }
  24. };

Properties

  1. Fade.propTypes = {
  2. // Controls if the fade is currently showing or not (default: true)
  3. in: PropTypes.bool,
  4. // All of these match react-transition-group/Transition props
  5. mountOnEnter: PropTypes.bool,
  6. unmountOnExit: PropTypes.bool,
  7. appear: PropTypes.bool, // (default: true)
  8. enter: PropTypes.bool, // (default: true)
  9. exit: PropTypes.bool, // (default: true)
  10. timeout: PropTypes.oneOfType([ // (default: 150)
  11. PropTypes.number,
  12. PropTypes.shape({
  13. enter: PropTypes.number,
  14. exit: PropTypes.number,
  15. }).isRequired,
  16. ]),
  17. addEndListener: PropTypes.func,
  18. onEnter: PropTypes.func,
  19. onEntering: PropTypes.func,
  20. onEntered: PropTypes.func,
  21. onExit: PropTypes.func,
  22. onExiting: PropTypes.func,
  23. onExited: PropTypes.func,
  24. // The component(s) that should be faded
  25. children: PropTypes.oneOfType([
  26. PropTypes.arrayOf(PropTypes.node),
  27. PropTypes.node
  28. ]),
  29. // Pass in a component or primitive component name to override the default element
  30. // (default: 'div')
  31. tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  32. // Class always applied to the Fade element (default: 'fade')
  33. baseClass: PropTypes.string,
  34. // Class applied to transition the Fade element in (default: 'show')
  35. baseClassActive: PropTypes.string,
  36. // Other classes that should always be applied
  37. className: PropTypes.string,
  38. cssModule: PropTypes.object,
  39. // Any other props provided will be applied to the element created (specified by tag)
  40. }