Material UI in React [ Day 17 ] Surfaces App Bar (应用栏)

App Bar

和 bootstrap 的 .navbar 做的是一样的，当然也可以透过其他方式写，官方文件中会应用到 toolbar 的组件，在预设的情况就只是一个 dispalay="flex" 的 div，而 app bar 作为外层预设的情况为 position="fixed":

<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" className={classes.title}>
      News
    </Typography>
    <Button color="inherit">Login</Button>
  </Toolbar>
</AppBar>

另外官网有提供加入搜寻栏位的作法，这里我就不再示范了，因 为其实这边的作法不一定要参照他的方法，如果只是塞 input + 搜寻按钮，用不着用 InputBase，直接用原生 input tag + makeStyle 改写就可以了。
也可以结合前面的 menu 来做 navbar 上面的下拉选单。

// in export function
// 这里为了示范登入和未登入的状态而写，但正常因由後端给的 data 带入判定
const [auth, setAuth] = React.useState(true);
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);

const handleChange = (event) => {
  setAuth(event.target.checked);
};

const handleMenu = (event) => {
  setAnchorEl(event.currentTarget);
};

const handleClose = () => {
  setAnchorEl(null);
};

// in return
<div className={classes.root}>
  <FormGroup>
    <FormControlLabel
      control={<Switch checked={auth} onChange={handleChange} aria-label="login switch" />}
      label={auth ? 'Logout' : 'Login'}
    />
  </FormGroup>
  <AppBar position="static">
    <Toolbar>
      <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
        <MenuIcon />
      </IconButton>
      <Typography variant="h6" className={classes.title}>
        Photos
      </Typography>
      {auth && (
        <div>
          <IconButton
            aria-label="account of current user"
            aria-controls="menu-appbar"
            aria-haspopup="true"
            onClick={handleMenu}
            color="inherit"
          >
            <AccountCircle />
          </IconButton>
          <Menu
            id="menu-appbar"
            anchorEl={anchorEl}
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            keepMounted
            transformOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            open={open}
            onClose={handleClose}
          >
            <MenuItem onClick={handleClose}>Profile</MenuItem>
            <MenuItem onClick={handleClose}>My account</MenuItem>
          </Menu>
        </div>
      )}
    </Toolbar>
  </AppBar>
</div>

Toolbar 的 variant="dense" 只有在桌面模式下才会有用。

Scrolling 滚动

这里会用到 useScrollTrigger()

import useScrollTrigger from '@material-ui/core/useScrollTrigger';

隐藏应用栏

向下滚动会隐藏应用栏，这样一来会留有更多的空间进行阅读。

// in export function
const trigger = useScrollTrigger(false);

<div>
  <Slide appear={false} direction="down" in={!trigger}>
    <AppBar>
      <Toolbar>
        首页
      </Toolbar>
    </AppBar>
  </Slide>
  <div style={{height: '125vh',maginTop: '5rem'}}>
    内容
  </div>
</div>

也可以用这个方法来做置顶按钮，详细范例。

那麽今天的讲解就到这边，有了这些概念就能整合明天要讲解的 Drawer 组件了。