Material UI in React [ Day 21 ] Data Display (part 1) 头像 & 标签

这个章节会从我们前面常常使用的 Typography 开始讲解。

Typography

他是一个整合文字的 tag，一次过多的字体大小和样式会破坏任何布局。排版比例具有一组有限的字体大小，可以与布局网格很好地配合使用，由於前面的章节已经讲解过了，我这边就不再赘述，详见官方文件。

Avatar

这就是一个快速生成头像的组件。

Image avatars

可以通过将标准 img props src 或 srcSet 传递给组件来创建图像头像。

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

Letter avatars

可以通过将字符串作为子项传递来创建包含简单字符的头像。

<Avatar>H</Avatar>
<Avatar className={classes.orange}>N</Avatar>
<Avatar className={classes.purple}>OP</Avatar>

Icon avatars

图标头像是通过将图标作为子项传递来创建的。

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar className={classes.pink}>
  <PageviewIcon />
</Avatar>
<Avatar className={classes.green}>
  <AssignmentIcon />
</Avatar>

Variants

透过修改 variants 属性可以以圆形以外的形状来显示头像。

<Avatar variant="square" className={classes.square}>
  N
</Avatar>
<Avatar variant="rounded" className={classes.rounded}>
  <AssignmentIcon />
</Avatar>

Grouped

AvatarGroup 可以以多个头像堆叠的方式呈现。

<AvatarGroup max={4}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

With badge

可以透过 badge 的方式显示使用者的状态，关於 badge 组件的用法後面还会再提及。

<Badge
  overlap="circular"
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'right',
  }}
  badgeContent={<SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />}
>
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
</Badge>

Badge

Badge 会在其子项的角洛区生成一个图示用於区分使用者的状态。
基本应用 color 属性与 Button 一样，badgeContent 的部分也可以塞其他组件。

<Badge badgeContent={4} color="primary">
  <MailIcon />
</Badge>
<Badge badgeContent={4} color="secondary">
  <MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
  <MailIcon />
</Badge>

另外如果传入 badgeContent 的数值为零的话，预设值为不显示，如果要显示的话要下 showZero。

<Badge color="secondary" badgeContent={0}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
  <MailIcon />
</Badge>

Maximum value

可以透过 max 属性来设定显示的最大值，预设值为 99。

<Badge badgeContent={99} {...defaultProps} />
<Badge badgeContent={100} {...defaultProps} />
<Badge badgeContent={1000} max={999} {...defaultProps} />

Dot

dot 属性将徽章更改为小圆点。这可以用作通知某些内容已更改而不提供计数。

<Badge color="secondary" variant="dot">
  <MailIcon />
</Badge>
<Badge color="secondary" variant="dot">
  <Typography>飞向宇宙</Typography>
</Badge>

alignment

您可以使用 anchorOrigin 来调整任何角落显示内容。

<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>
L
</Badge>

Chip

这个组件和 bootstrap 的 pills 是一样的意思，都是 border-radius: 50px，用法跟上述的 badge 很像。

<div>
  <Chip label="Basic" />
  <Chip label="Disabled" disabled />
  <Chip avatar={<Avatar>M</Avatar>} label="Clickable" onClick={handleClick} />
  <Chip
    avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
    label="Deletable"
    onDelete={handleDelete}
  />
  <Chip
    icon={<FaceIcon />}
    label="Clickable deletable"
    onClick={handleClick}
    onDelete={handleDelete}
  />
  <Chip
    label="Custom delete icon"
    onClick={handleClick}
    onDelete={handleDelete}
    deleteIcon={<DoneIcon />}
  />
  <Chip label="Clickable Link" component="a" href="#chip" clickable />
  <Chip
    avatar={<Avatar>M</Avatar>}
    label="Primary clickable"
    clickable
    color="primary"
    onDelete={handleDelete}
    deleteIcon={<DoneIcon />}
  />
  <Chip
    icon={<FaceIcon />}
    label="Primary clickable"
    clickable
    color="primary"
    onDelete={handleDelete}
    deleteIcon={<DoneIcon />}
  />
  <Chip label="Deletable primary" onDelete={handleDelete} color="primary" />
  <Chip
    icon={<FaceIcon />}
    label="Deletable secondary"
    onDelete={handleDelete}
    color="secondary"
  />
</div>

他也可以透过 variant="outlined"，来设定只有框线的效果。

<Chip label="Basic" variant="outlined" />

其他应用的话强烈建议进官方文件玩玩看。

那麽今天的内容就讲到这，明天会接续讲完其他剩余的内容，table 的部分可能会用其他比较好用的套件来讲解。