今天终於来到 UML 的最後一篇了，要来接着把没介绍到的常见 UI 元件介绍完，那就废话不罗唆直接进入正题！

Table

网页中的大魔王 Table，作为呈现列表型的各种资料很方便的 UI 元件，延伸功能有 排序、编辑、删除和分页等等功能，设计起来其实非常复杂。

而要丢下去 Table 的资料格式设计也是可以因应情境弄到很复杂，最常见的就是像范例这样把 columns 跟 dataSource 分别丢下去，而 column 能透过 key 去比对到该栏要取的资料。

但因为 Table 通常是接 API 回来的资料，你真的想要 render 出来的资料可能不是在第一层，甚至可能埋很深，这时候跟後端沟通好资料格式就很重要了。

其实 Table 还可以讲很多，但这边只是一个概述 API 而已，细节就待之後有机会再写了！

<Table columns={columns} dataSource={data} />

Badge

Badge 是依附在元件上的标签，通常是作为显示通知数量来使用。

Accordion / Collapse

Accordion 可以收合资讯的 UI 元件，常见在 FAQ 的使用，那它也有另外一个名字 Collapse。
而在 Material-UI 这边是有透过实作 Accodion 的容器，在里面透过 AccordionSummary 放标题，AccordionDetails 放展开要呈现的内容。

<>
  <Accordion>
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />
    >
      <Typography>Accordion 1</Typography>
    </AccordionSummary>
    <AccordionDetails>
      <Typography>
        Lorem ipsum dolor sit amet ... lobortis eget.
      </Typography>
    </AccordionDetails>
  </Accordion>
  <Accordion>
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
    >
      <Typography>Accordion 2</Typography>
    </AccordionSummary>
    <AccordionDetails>
      <Typography>
        Lorem ipsum dolor sit amet ... lobortis eget.
      </Typography>
    </AccordionDetails>
  </Accordion>
</>

Slider

Slider 就是在一条线上可以滑动任意的点，透过设定最大跟最小值来决定端点，常见应用像是调节音量、播放速度或温度计等等地方。

原生的 input 有 type="range" 可以使用，但考量到弹性问题，还是挺常都用 div 去手刻的， Material 和 Ant Design 都是这样做。

<Slider min={0} max={100} disabled={disabled} />
<Slider range defaultValue={[20, 50]} disabled={disabled} />

Progress

Progress 就是让使用者知道现在的「进度」，算是在处理资料视觉化的 UI 元件，主要有「条状」和「环状」的呈现方式，可透过 type 来区分。

<>
  <Progress percent={30} />
  <Progress percent={50} status="active" />
  <Progress percent={70} status="exception" />
  <Progress percent={100} />
  <Progress percent={50} showInfo={false} />
</>

<>
  <Progress type="circle" percent={75} />
  <Progress type="circle" percent={70} status="exception" />
  <Progress type="circle" percent={100} />
</>

Skeleton

Skeleton 其实可以理解成 UI 元件的 placeholder，是让这些区块在资料还没进来时能有在载入的感觉，也不会等资料进来後又跑版，通常是灰底，并且会有左至右的动画。

使用方式可以根据资料的类型（variant）和区块的大小来放 Skeleton，像范例就是有 text、circle 和 rect 三种 placeholder。

<Skeleton variant="text" />
<Skeleton variant="circle" width={40} height={40} />
<Skeleton variant="rect" width={210} height={118} />

使用起来的情境会像这样：

Tag

Tag 是用来分类或标记的标签元件，除了单独使用之外，也很常作为 Select 的多选选项 或是 与 Input 整合成 InputTag。

<Tag>Tag 1</Tag>
<Tag>
  <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
</Tag>
<Tag closable onClose={log}>
  Tag 2
</Tag>
<Tag closable onClose={preventDefault}>
  Prevent Default
</Tag>

小结

UML 系列终於也完结啦，这系列把网页中的 UI 元件都介绍七八成了，有了这些知识相信没介绍到的读者们也不用花太多时间去理解了，主要介绍的就是三个方向 — 「元件本身」、「如何使用（ＡＰＩ）」和「使用情境」。

在 Design System 篇知道该怎麽做 Web 最底层的设置（Color、Spacing、Motion ...）和底层的 UI 元件（Typography、Icon、Transition）。

而在 UML 篇是希望让大家知道遇到 UI 元件时的开发顺序，在一开始就把层级都切好，才不用写到後面很难去扩充或是要再回头去拆分 UI 元件，甚至是在合作开发时不小心重工了，这时候要选择用谁的，或是怎麽去整合就会很麻烦。

最後的 Day 19 和今天的主要就是顺便讲解一下其他的 UI 元件，视情况补充一些资讯、可能踩雷的地方和API 怎麽开等等。

以上的观念都清楚之後，明天开始终於要进入到期待已久的开发环节了，会实作的就是像 Day 01 说的是 UML 这边介绍到的介面和几个我认为很有趣的 UI 元件（ Tabs、Pagination），那就明天见罗！