iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

從 React 開始,讓你的ui material 起來系列 第 7

[Day 7] 網頁的開頭 App Bar

基本上 每個網頁的開頭 都有個App Bar 用來登入登出 提示 搜索等等

以IT幫而言 雖然沒有置於最頂 是在廣告之後的第二列 滾動後廣告消失

App Bar置頂


Day 6
開始 加上 App Bar

先來解析 App Bar 元件

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

主要 position 這個屬性 來定義bar的位置
其他都是一些附屬元件
可參照想要使用的元件塞入
https://ithelp.ithome.com.tw/upload/images/20210907/20098345M9FdZPmJ21.png
這樣簡易的 APP Bar就做完了
Day 7


上一篇
[Day 6] Button
下一篇
[Day 8] 常用的卡片 Card
系列文
從 React 開始,讓你的ui material 起來15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言