UML

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 长怎样：

How to use

Portal 的作用是让元件脱离原本的 DOM 结构，子元件可以传送到父元件以外的任意地方，可以把它想像成一个元素的「传送门」，要传送到的地方叫 container。

没有 container 的情况下，子元素会 render 到与 root 同层的位置。

有给的话 Element 会 render 到 container 之下，接下来直接看看 Materiel-UI 的范例 ，相信就会清楚很多了。

Popper

看到 Popper 时，大家可能会好奇 Popper 跟 Portal 的差别在哪？

Portal 是单纯在实现「传送」这个功能，是一个没有样式，单纯能把子元素传送出去的元件。

Popper 则是去包装 Portal，在 Portal 提供了「传送」这个功能之後，进一步地去定位元素要出现的位置（anchorEl ），就像图中是能让 Popper 出现在 Toggle Popper 这个按钮下面。

这边要做的处理是「确保 Popper children 能有正常显示的空间」，出现要的位置、与锚定的 Element 要保持多少距离等等。

没有给 anchorEl 的话，预设锚定 Element 是 body ， Popper 会出现在左上方（因为没有东西可以定位）。

有给的话 锚定 Element 就会是给定的那个 Element， Popper 会根据该 Element 定位在他的上下左右。

Popover

Popover 是有「标题」与「内容」版的 Popper，是在 Popper 的基础上，给定常用样式的 UI 元件。

虽然看起来没什麽，但如果专案中有很多 Popover 的使用情境的话，切出来绝对是不吃亏的。

如果真的要省通常也是会省掉 Popper ，而不是 Popover ，监於 Material-UI、Ant Design 和 Chakra-UI 都有 Popover，但只有 Material-UI 特别拆了 Popper 这一层来判断。

How to use

Popconfirm

从 Popover 再往前走一步，把 children 包成「确认」和「取消」这两个按钮，主要使用情境就像是附图那样，通常是在使用者想做一些重要的操作（如：取消）时，能再确认一次。

需要注意的是元件分类的部分，Popconfirm 与 Popper 和 Popover 不一样，会被归类到 Feedback ，主要是让使用者做某些动作时，有一个「确认」的回馈，而不像前两者一样只是在展示资讯。

那 Poper 和 Popover 的分类就看各个系统怎麽去理解了，可以是 Utils、Data Display 或其他自己定义出来的种类。

How to use

Tooltip

Tooltip 的功能就跟名字一样，是一种 「提示」，可以在文字或是按钮上显示额外的资讯，通常是在滑鼠 Hover 上去的时候触发，让你点击前可以更知道关於这个按钮的功能，或是显示文字的别种资讯（中文字显示英文翻译 或是 字数过长 ellipsis 的时候显示剩余文字 等等）。

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 介绍。

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 唷！）

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。

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 结构，但背後的机制跟所想提供的功能完全不一样，至於怎麽不一样的就先卖个关子啦！

那就明天见啦！