iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

關於 UI 元件你所該知道的事系列 第 14

Day 14 - UML x Interface — Portal

https://ithelp.ithome.com.tw/upload/images/20210929/20120754XPylV2fIpb.png

UML

https://ithelp.ithome.com.tw/upload/images/20210929/20120754ZWMCUKgyJ2.png

Portal 是什麼?

開始之前,先說一下 Portal 其實是 React 比較常用的 Pattern,因此非 React 使用者可以斟酌一下怎麼去理解這個 Interface。

Vue 是在第三版之後才實現了這個功能,在此之前都是以 Dialogs 這個元件來滿足下面會提到的 Portal、Popper、Popconfirm 的使用情境。

而 Angular 則是原本的 template 語法就已經能滿足 Portal 所需要的功能,因而不會特別去實作 Portal 和 Popper,它在 Material 上會跟 Vue 一樣實作 Dialogs ,而在 Ant Design 則是有去實作 Popconfirm。

由於「傳送」這個功能可以用在很多地方,因此 Portal 也可以是一個 interface ,透過 UML 來看 Portal 相關的依賴關係大概會長這樣,當然要不要照這種方式去建構這些元件也是很看使用情境的,那以下會來簡單介紹一下各個 Component。

進入正題

先來看看 Portal 長怎樣:
https://ithelp.ithome.com.tw/upload/images/20210929/2012075445ZOETCwM9.png
https://ithelp.ithome.com.tw/upload/images/20210929/20120754OG9mTKoUf9.png

How to use
https://ithelp.ithome.com.tw/upload/images/20210929/20120754L1Rl1lp6Jc.png

Portal 的作用是讓元件脫離原本的 DOM 結構,子元件可以傳送到父元件以外的任意地方,可以把它想像成一個元素的「傳送門」,要傳送到的地方叫 container。

沒有 container 的情況下,子元素會 render 到與 root 同層的位置。

有給的話 Element 會 render 到 container 之下,接下來直接看看 Materiel-UI 的範例 ,相信就會清楚很多了。

Popper

https://ithelp.ithome.com.tw/upload/images/20210929/20120754LsF4r4jVAb.png

看到 Popper 時,大家可能會好奇 Popper 跟 Portal 的差別在哪?

Portal 是單純在實現「傳送」這個功能,是一個沒有樣式,單純能把子元素傳送出去的元件。

Popper 則是去包裝 Portal,在 Portal 提供了「傳送」這個功能之後,進一步地去定位元素要出現的位置(anchorEl ),就像圖中是能讓 Popper 出現在 Toggle Popper 這個按鈕下面。

這邊要做的處理是「確保 Popper children 能有正常顯示的空間」,出現要的位置、與錨定的 Element 要保持多少距離等等。

沒有給 anchorEl 的話,預設錨定 Element 是 body , Popper 會出現在左上方(因為沒有東西可以定位)。

有給的話 錨定 Element 就會是給定的那個 Element, Popper 會根據該 Element 定位在他的上下左右。

https://ithelp.ithome.com.tw/upload/images/20210929/20120754VtgXD8vBXB.png

Popover

Popover 是有「標題」與「內容」版的 Popper,是在 Popper 的基礎上,給定常用樣式的 UI 元件。

雖然看起來沒什麼,但如果專案中有很多 Popover 的使用情境的話,切出來絕對是不吃虧的。

如果真的要省通常也是會省掉 Popper ,而不是 Popover ,鑑於 Material-UI、Ant Design 和 Chakra-UI 都有 Popover,但只有 Material-UI 特別拆了 Popper 這一層來判斷。

https://ithelp.ithome.com.tw/upload/images/20210929/20120754B39aEg3HUW.png

How to use

https://ithelp.ithome.com.tw/upload/images/20210929/20120754VsVwkSlrtK.png

Popconfirm

從 Popover 再往前走一步,把 children 包成「確認」和「取消」這兩個按鈕,主要使用情境就像是附圖那樣,通常是在使用者想做一些重要的操作(如:取消)時,能再確認一次。

需要注意的是元件分類的部分,Popconfirm 與 Popper 和 Popover 不一樣,會被歸類到 Feedback ,主要是讓使用者做某些動作時,有一個「確認」的回饋,而不像前兩者一樣只是在展示資訊。

那 Poper 和 Popover 的分類就看各個系統怎麼去理解了,可以是 Utils、Data Display 或其他自己定義出來的種類。

https://ithelp.ithome.com.tw/upload/images/20210929/201207549al9igD7HV.png

How to use
https://ithelp.ithome.com.tw/upload/images/20210929/20120754CfflnpyOrS.png

Tooltip

Tooltip 的功能就跟名字一樣,是一種 「提示」,可以在文字或是按鈕上顯示額外的資訊,通常是在滑鼠 Hover 上去的時候觸發,讓你點擊前可以更知道關於這個按鈕的功能,或是顯示文字的別種資訊(中文字顯示英文翻譯 或是 字數過長 ellipsis 的時候顯示剩餘文字 等等)。

https://ithelp.ithome.com.tw/upload/images/20210929/20120754Qh7rVDRC5K.png

How to use

// Material-UI Example
<Tooltip title="Delete">
  <IconButton aria-label="delete">
    <DeleteIcon />
  </IconButton>
</Tooltip>
<Tooltip title="Add" aria-label="add">
  <AddIcon />
</Tooltip>
<Tooltip title="Add" aria-label="add">
  <AddIcon />
</Tooltip>

// Ant Design Example
<Tooltip title="prompt text">
  <span>Tooltip will show on mouse enter.</span>
</Tooltip>

Dropdown

Dropdown 就是一個下拉式選單,它顯示出來的選單也可以是透過 Popper 的方式來脫離原本的 DOM 結構,浮在頁面之上。

而打開跑出來的「選單」也是一個獨立的 UI 元件 - Menu ,但對於它的介紹會放到 Independent 的 UML 介紹。

https://ithelp.ithome.com.tw/upload/images/20210929/20120754v8ybJaaoK0.png
How to use

<Dropdown
	menu={menu}
	popperProps={popperProps}
>
	Hover me
</Dropdown>

Overlay

Overlay 就是一層蓋在網頁上的暗色背景,在我們打開 Modal 或是 選單的時候,背景會變色並且不讓使用者進行互動,讓使用者專注在跳出來的那個區塊,可能是輸入帳密的 Modal 或是點開左右的選單。
而因為是要蓋在整個頁面之上,因此也會需要脫離原先的 DOM,透過 Portal 去傳送。
它的樣式會在下面的 Drawer 給大家看!

How to use

<Overlay>
	重點操作區塊
</Overlay>

Drawer

Drawer 就像是抽屜一樣打開一個側邊的選單,比較常見的應用是平板或手機版的 Header,而 Drawer 裏可以是一些表單欄位,也可以單純呈現一些資訊。

(左側那塊黑色濾鏡就是 Overlay 唷!)

https://ithelp.ithome.com.tw/upload/images/20210929/201207542uB2GteITA.png

How to use

<>
  <Button type="primary" onClick={showDrawer}>
    Open
  </Button>
  <Drawer
    title="Basic Drawer"
    placement="right"
    closable={false}
    onClose={onClose}
    visible={visible}
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </Drawer>
</>

Modal

Modal 就是一個彈出的框框,讓使用者可以在不跳轉到新頁面的時候「確認資訊」、「填資訊」等等。

在 Material-UI 的 Modal 則是被當作 Dialog、Drawer、Menu 和 Popover 的底層(因此它們的 UML 也會跟上述不太一樣),Modal 跟 Dialog 就像上述的 Popper 跟 Popover 一樣,Modal 是純粹實作有 Overlay 的彈出框功能,而 Dialog 則是有樣式的 Modal,多數時候它們會建議你直接使用 Dialog 而不是底層的 Modal。

我自己是比較喜歡 Ant Design 的作法,而沒有特別去做 Dialog ,都只用 Modal 去組,想怎麼採用或實作都還是看需求。

因為今天的內容也挺多了就不再特別去講 Dialog 了,有興趣的可以去看 Material-UI — Dialog 或 Chakra-UI — Alert Dialog

https://ithelp.ithome.com.tw/upload/images/20210929/20120754SKmIA4sF0w.png

How to use

// Material-UI
<button type="button" onClick={handleOpen}>
  Open Modal
</button>
<Modal
  open={open}
  onClose={handleClose}>
  {body}
</Modal>

// Chakra-UI

小結

今天的內容可能會有讀者覺得元件切得太細了,這是因為這些是我參考各個元件庫之後,才統整出來的一個系列,所以一般都會稍微取捨一些比較少用到的情境,有些會讓使用者要用時再自己去組,像是 Popper、Popover 和 Popconfirm 這三個幾乎不會同時都被實作出來,至少就 Material-UI、Ant Design 和 Chakra-UI 是都只實作部分。

那今天的重點是在講元件間的依賴關係,所以程式碼只是大概寫一下怎麼用而已,沒有要在這邊深入去講解實作,實作會在 UML 環節介紹完之後才開始,請大家敬請期待囉!

明天要講的是很容易跟 Portal 搞混的 Notifier ,雖然都會脫離本身的 DOM 結構,但背後的機制跟所想提供的功能完全不一樣,至於怎麼不一樣的就先賣個關子啦!

那就明天見啦!


上一篇
Day 13 - UML x Interface — Transition
下一篇
Day 15 - UML x Interface — Notifier
系列文
關於 UI 元件你所該知道的事30

尚未有邦友留言

立即登入留言