tags: iThome 鐵人賽 30天

都裝完MUI了，當然要來實際應用啦，今天就來把Header變成MUI的形狀吧。

Header: App Bar

因為我要做的影片標記系統沒有要實作登入的關係，所以目前規劃的Header只有三種功能

• Logo: 作為回首頁的作用
• Search Bar: 搜尋已匯入的影片
• Add Button: 新增影片入內的按鈕

那就話不多說，開始動工吧！

因為會用到@mui/icons-material，所以記得先安裝

npm i @mui/icons-material

Title

先變出了一個Title，之後會設計讓Title導向首頁

import React from 'react'
import { AppBar, Box, Toolbar, IconButton, Typography, } from '@mui/material'
import MenuIcon from '@mui/icons-material/Menu'

const Header = (props) => {

  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <Typography
            variant="h6"
            noWrap
            component="div"
          >
            {props.title}
          </Typography>
          
        </Toolbar>
      </AppBar>
    </Box >
  )

}

export default Header

Add Button

再來要新增一個+的按鈕

按鈕可以到這裡去尋找喔！

我找到的是這個

import AddIcon from '@mui/icons-material/Add'

來把它加進去

import React from 'react'
import { AppBar, Box, Toolbar, IconButton, Typography, Button } from '@mui/material'
import AddIcon from '@mui/icons-material/Add';

const Header = (props) => {

  return (
    <Box color="inherit" sx={{ flexGrow: 1 }}>
      <AppBar position="static" sx={{backgroundColor: "#000"}}>
        <Toolbar>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ flexGrow: 1 }}
          >
            {props.title}
          </Typography>
          <Button variant="contained" color="success" startIcon={<AddIcon />}>
            新增影片
          </Button>
        </Toolbar>
      </AppBar>
    </Box >
  )

}

export default Header

還順便偷偷改成了黑色系XD，看起來有沒有更有格調了呢？哈哈

Search Bar

Search Bar比較困難了一點，我們參照現有的MUI App Bar的範例來製作吧。

撿現成的不好嗎？當然好，真香XD

import React from 'react'
import { AppBar, Box, Toolbar, IconButton, Typography, Button, InputBase } from '@mui/material'
import AddIcon from '@mui/icons-material/Add'
import { styled, alpha } from '@mui/material/styles'
import SearchIcon from '@mui/icons-material/Search'

const Search = styled('div')(({ theme }) => ({
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: alpha(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: alpha(theme.palette.common.white, 0.25),
  },
  marginRight: theme.spacing(2),
  marginLeft: 0,
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    marginLeft: theme.spacing(3),
    width: 'auto',
  },
}));

const SearchIconWrapper = styled('div')(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: '100%',
  position: 'absolute',
  pointerEvents: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: 'inherit',
  '& .MuiInputBase-input': {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('md')]: {
      width: '20ch',
    },
  },
}));

const Header = (props) => {

  return (
    <Box color="inherit" sx={{ flexGrow: 1 }}>
      <AppBar position="static" sx={{ backgroundColor: "#000" }}>
        <Toolbar>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ flexGrow: 1 }}
          >
            {props.title}
          </Typography>
          <Search>
            <SearchIconWrapper>
              <SearchIcon />
            </SearchIconWrapper>
            <StyledInputBase
              placeholder="Search…"
              inputProps={{ 'aria-label': 'search' }}
            />
          </Search>
          <Box sx={{ flexGrow: 1 }} />
          <Button variant="contained" color="success" startIcon={<AddIcon />}>
            新增影片
          </Button>
        </Toolbar>
      </AppBar>
    </Box >
  )
}

export default Header

然後就大功告成啦！是不是看起來還不錯看阿~今天就先到這裡啦！感謝收看~

後記

不知不覺地就已經過了15天了，但是還有15天的路要走阿，覺得好久?。但是為了完賽也只能繼續努力啦，當然也有很多觀念沒有講齊和講完，之後再繼續慢慢補充吧！(希望啦 哈哈

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)