Day 20 - UML x Component — Independent （下）

13th鐵人賽 uml javascript react frontend

parkerhiphop027

2021-10-05 01:09:08

1088 瀏覽

分享至

今天終於來到 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>