UNPKG

zent

Version:

一套前端设计语言和基于React的实现

55 lines (39 loc) • 2.79 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
--- title: Portal path: component/portal group: Others --- ## Portal Portal widget ### Guides Portal provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ### API | Property | Description | Type | Required | Default | Alternative | | --------- | ----------------- | ---------- | ----------- | -------- | -------------------- | | children | Only supports one child | string | No | | | | selector | DOM node to render child | string or DOM Element | No | `'body'` | legal CSS selector or certain DOM node | | visible | Whether to render child | bool | No | `true` | | | layer | The layer curtain tag name | string | No | `div` | | | useLayerForClickAway | Whether to use a layer for click away from `Portal` | boolean | No | false | | | closeOnClickOutside | Close portal when click outside of portal | bool | No | `false` | `true` | | closeOnESC | Close portal when pressing ESC | bool | No | `false` | `true` | | blockPageScroll | Block page scroll when portal is open | bool | No | `false` | `true` | | onClose | Callback when portal closes | (e: event) => void | No | | | | onLayerReady | The hook when layer is ready | (node: HTMLElement) => void | No | | | | className | The layer class name | string | No | | | | style | The layer style | object | No | | | | css | (Deprecated, use style instead) Extra css style. such as, `{ 'margin-left': '10px' }` | object | No | `{}` | | There's a `contains` method on `Portal` instance which can be used to check if a DOM node is a decedent of the portal. This method works with nested portals. ### Principle - The widget is mainly used to insert it's `child` to given DOM node, and it is removed from DOM when component is unmounted. - A certain degree of repaint occurs when any props are modified, and `children`, `selector`'s change will trigger component `unmount` to `mount`; when other props is modified, only existing DOM node attributes update. ## PurePortal Pure portal widget。 ### Guides Portal behaves like React 16 Portal，which will overwrite all content inside its container. ### PurePortal-API | Property | Description | Type | Required | Default | Alternative | | --------- | ----------------- | ---------- | ----------- | -------- | -------------------- | | children | Only supports one child | string | No | | | | selector | DOM node to render child | string or DOM Element | No | `'body'` | legal CSS selector or certain DOM node | | append | Should append content to the container, if false, the container will be cleaned | bool | No | false | |