@mui/material#Fade JavaScript Examples

The following examples show how to use @mui/material#Fade. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TransitionSnackbar.jsx    From matx-react with MIT License 6 votes vote down vote up 
export default function TransitionsSnackbar() {
  const [state, setState] = React.useState({
    open: false,
    Transition: Fade,
  });

  const handleClick = (Transition) => () => {
    setState({ open: true, Transition });
  };

  function handleClose() {
    setState({ ...state, open: false });
  }

  return (
    <div>
      <Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
      <Button onClick={handleClick(Fade)}>Fade Transition</Button>
      <Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
      <Snackbar
        open={state.open}
        onClose={handleClose}
        TransitionComponent={state.Transition}
        ContentProps={{ "aria-describedby": "message-id" }}
        message={<span id="message-id">I love snacks</span>}
      />
    </div>
  );
}
Example #2
Source File: TopBar.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up 
render() {
    const { classes, t, profile, title, onAdd, fetching, settings, license } = this.props;
    const { menuAnchorEl } = this.state;
    const licenseVisible = this.context.includes(SYSTEM_ADMIN_WRITE);
  
    return (
      <AppBar position="fixed" className={classes.root}>
        <Toolbar className={classes.root}>
          <Hidden lgUp>
            <IconButton color="inherit" onClick={this.handleMenuToggle} size="large">
              <Burger />
            </IconButton>
          </Hidden>
          {this.links.map((link, idx) =>
            <Tooltip
              placement="bottom"
              title={t(link.title) + (!config[link.key] ? ` (${t("Not configured")})` : '')} key={idx}
            >
              <span>
                <IconButton
                  href={config[link.key]}
                  disabled={!config[link.key]}
                  target="_blank"
                  className={classes.iconButton}
                  size="large">
                  <link.icon />
                </IconButton>
              </span>
            </Tooltip>
          )}
          {title && <Typography className={classes.title} variant="h6">{title}</Typography>}
          <div className={classes.flexEndContainer}>
            <Box className={classes.profileButton} onClick={this.handleMenuOpen('menuAnchorEl')}>
              <Typography className={classes.username}>{profile.Profile.user.username}</Typography>
              <AccountCircleIcon className={classes.profileIcon}></AccountCircleIcon>
            </Box>
            {licenseVisible && <LicenseIcon
              activated={license.product && license.product !== "Community"}
              handleNavigation={this.handleNavigation}
            />}
            <img
              src={settings.language === 'en-US' ? german : english}
              alt=""
              width={35}
              height={44}
              className={classes.flag}
              onClick={this.handleLangChange}
            />
            <Menu
              id="simple-menu"
              anchorEl={menuAnchorEl}
              keepMounted
              open={Boolean(menuAnchorEl)}
              onClose={this.handleMenuClose('menuAnchorEl')}
            >
              <MenuItem onClick={this.handleNavigation('settings')}>
                {t('Settings')}
              </MenuItem>
              <MenuItem onClick={this.handleNavigation('changePassword')}>
                {t('Change password')}
              </MenuItem>
              <MenuItem onClick={this.handleLogout}>
                {t('Logout')}
              </MenuItem>
            </Menu>
          </div>
          {onAdd && <div className={classes.divider}></div>}
          {onAdd && <Button onClick={onAdd} color="inherit" className={classes.add}>
            <Add />{t('Add')}
          </Button>}
        </Toolbar>
        <Fade
          in={fetching}
          style={{
            transitionDelay: '500ms',
          }}
        >
          <LinearProgress variant="indeterminate" color="primary"/>
        </Fade>
      </AppBar>
    );
  }