Fade

Fade - 图1

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

Properties

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