今天會接續昨天未講解的部分往下...

Divider

其實他就是分隔線而已，跟 hr tag 是差不多的，文件上的範例其實大多我都用 border 來處理，當然也可以用上面的方式處理啦:

<List component="nav" className={classes.root} aria-label="mailbox folders">
  <ListItem button>
    <ListItemText primary="Inbox" />
  </ListItem>
  <Divider />
  <ListItem button divider>
    <ListItemText primary="Drafts" />
  </ListItem>
  <ListItem button>
    <ListItemText primary="Trash" />
  </ListItem>
  <Divider light />
  <ListItem button>
    <ListItemText primary="Spam" />
  </ListItem>
</List>

在列表中，應該確保將 Divider 呈現為 li tag 以匹配 HTML5 規範。

<List className={classes.root}>
  <ListItem>
    <ListItemAvatar>
      <Avatar>
        <ImageIcon />
      </Avatar>
    </ListItemAvatar>
    <ListItemText primary="Photos" secondary="Jan 9, 2014" />
  </ListItem>
  <Divider variant="inset" component="li" />
  <ListItem>
    <ListItemAvatar>
      <Avatar>
        <WorkIcon />
      </Avatar>
    </ListItemAvatar>
    <ListItemText primary="Work" secondary="Jan 7, 2014" />
  </ListItem>
  <Divider variant="inset" component="li" />
  <ListItem>
    <ListItemAvatar>
      <Avatar>
        <BeachAccessIcon />
      </Avatar>
    </ListItemAvatar>
    <ListItemText primary="Vacation" secondary="July 20, 2014" />
  </ListItem>
</List>

也可以透過 orientation="vertical" 的方式設置垂直的分隔線。

<Grid container alignItems="center">
  <FormatAlignLeftIcon />
  <FormatAlignCenterIcon />
  <FormatAlignRightIcon />
  <Divider orientation="vertical" flexItem />
  <FormatBoldIcon />
  <FormatItalicIcon />
  <FormatUnderlinedIcon />
</Grid>

Icons

這邊我是沒有再用他們家的 icons，所以有需要的話請到他們官方文件裡看詳細的規範。
或是到他的Icons 庫裡玩玩效果。

List

列表是一組連續的文本或圖像，它們由包含主要和補充操作的項目組成，這些操作由圖標和文本表示。這個組件就蠻好用的了，在上面 Divider 組件內有示範過了大概的邏輯:

<List component="nav" aria-label="main mailbox folders">
  <ListItem button>
    <ListItemIcon>
      <InboxIcon />
    </ListItemIcon>
    <ListItemText primary="Inbox" />
  </ListItem>
  <ListItem button>
    <ListItemIcon>
      <DraftsIcon />
    </ListItemIcon>
    <ListItemText primary="Drafts" />
  </ListItem>
</List>

如果要用Link的變體的話，通常還是會以react router為主，在 property 中下 component={Link} to="導向的url"。

Nested List

這裡會搭配 Collapse 組件使用，他和之前介紹過的 Accordion 用法一樣。

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

// in return
<List>
  <ListItem button onClick={handleClick}>
    <ListItemIcon>
      <InboxIcon />
    </ListItemIcon>
    <ListItemText primary="Inbox" />
    {open ? <ExpandLess /> : <ExpandMore />}
  </ListItem>
  <Collapse in={open} timeout="auto" unmountOnExit>
    <List component="div" disablePadding>
      <ListItem button className={classes.nested}>
        <ListItemIcon>
          <StarBorder />
        </ListItemIcon>
        <ListItemText primary="Starred" />
      </ListItem>
    </List>
  </Collapse>
</List>

其他應用的範例我就不再一一列舉了，各位可以到他的官方文件查看。

那麼今天的內容就到這裡了，明天會接續講解 Table 的組件。