今天會對 Feedback 的部分做講解，因為都比較簡單的應用就會一起講。

Progress

進度指示器，表示未指定的等待時間或顯示進程的長度，動畫使用 CSS，而不是 JavaScript，通知用戶正在進行的進程的狀態，例如加載應用程序、提交表單或保存更新。

Circular

就是我們常見的轉圈 Loading。

<CircularProgress />
<CircularProgress color="secondary" />

也可以透過 variant="determinate" 定義他的完成度，也可以透過自訂 function 調整他的動畫。

// in export function
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
  const timer = setInterval(() => {
    setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
  }, 800);
  return () => {
    clearInterval(timer);
  };
}, []);

// in return
<CircularProgress variant="determinate" value={25} />
<CircularProgress variant="determinate" value={50} />
<CircularProgress variant="determinate" value={75} />
<CircularProgress variant="determinate" value={100} />
<CircularProgress variant="determinate" value={progress} />

另外也可以透過css position 來調整排版，使進度顯示的部分包在外層，詳細的範例請至官方文件內查看。

Linear

這種是條狀式的進度條，一樣可以透過 variant="determinate" 定義他的完成度。

<LinearProgress />
<LinearProgress color="secondary" />
<LinearProgress variant="determinate" value={progress} />

基本的操作邏輯都是一樣的，詳細的範例請至官方文件內查看。

Dialog

對話框和 bootstrap 裡的 madol 是一樣的，它出現在應用程序內容的前面，用於提供關鍵信息或要求做出決定。
對話框在出現時會禁用所有應用程序功能，並且會一直顯示在屏幕上，直到確認、取消或執行所需的操作。
首先要有觸發對話框的按鈕:

<Button variant="outlined" color="primary">
  打開
</Button>

設定開關:

// in export function
const [ dialog, setDialog ] = React.useState(false);
const dialogOpen = () => {
    setDialog(true);
};
const dialogClose = () => {
    setDialog(false);
};

綁定 Button 並設定對話框內容:

<Button variant="outlined" color="primary" onClick={dialogOpen}>
  打開
</Button>
<Dialog onClose={dialogClose} open={dialog}>
  <DialogTitle>示範提醒</DialogTitle>
  <DialogContent>
    這裡可以放各種你想要的內容...
    <TextField label="可以是輸入框等等..."/>
  </DialogContent>
  <DialogActions>
    <Button onClick={dialogClose} color="primary">
      取消
    </Button>
    <Button onClick={dialogClose} color="primary" autoFocus>
      確定
    </Button>
  </DialogActions>
</Dialog>

可以通過將 maxWidth 與 fullWidth 結合使用來設置對話框的最大寬度，其他衍生的範例請至官方文件中查詢。

Snackbar

Snackbars 通知用戶應用程序已經執行或將執行的過程，通常用來顯示表單送出成功與否之類的訊息。

<Snackbar
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="Note archived"
  action={
    <React.Fragment>
      <Button color="secondary" size="small" onClick={handleClose}>
        UNDO
      </Button>
      <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
        <CloseIcon fontSize="small" />
      </IconButton>
    </React.Fragment>
  }
/>

anchorOrigin 可以調整彈出顯示時的位置，autoHideDuration 指的是沿時自動關閉的時間，message 則是顯示的文字訊息，也可以結合他們家 lab 的 alert 套件使用:

<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="success">
    This is a success message!
  </Alert>
</Snackbar>

其他有關 css 動畫調整的部分也請至官方文件內查看。

Backdrop

背景向用戶發出應用程序內狀態更改的信號，可用於創建加載器、對話框等。以最簡單的形式，背景組件將在應用程序上添加一個變暗的圖層。

// in export function
const [open, setOpen] = React.useState(false);
const handleClose = () => {
  setOpen(false);
};
const handleToggle = () => {
  setOpen(!open);
};

// in return
<Button variant="outlined" color="primary" onClick={handleToggle}>
  Show backdrop
</Button>
<Backdrop open={open} onClick={handleClose}>
  <CircularProgress color="inherit" />
</Backdrop>

那麼以上就是今天的全部內容了，一些比較複雜的操作我建議還是去查看他的官網會比較清楚，我這裡貼的話會無法辨識 JSX 的語法，也比較難看得清楚，明天應該會接續講解 Data Display 的部分，但由於篇幅組件比較多，所以可能會分成幾集來講解，另外也祝大家中秋佳節愉快。