Material UI in React [Day 22] Data Display (part 2) 分隔线 & 列表

今天会接续昨天未讲解的部分往下...

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 的组件。