Material UI in React [ Day 20] Feedback

今天会对 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 的部分，但由於篇幅组件比较多，所以可能会分成几集来讲解，另外也祝大家中秋佳节愉快。