## 简介

弹层属于复合组件，提供了一系列组件用于创建弹层，其中包含：

Overlay 可以在页面中弹出一个浮层，封装了定位，动画及其他一些可用性的功能。Overlay 被设计为无状态的组件，其本身并不控制自己显示和隐藏的状态。

注意: 类似 canCloseby\* 的配置也需要配合 onRequestClose 才能关闭弹层。

#### 安全节点

Overlay 提供了点击弹层外文档中节点隐藏该弹层的功能，如果想让某个节点点击后不隐藏弹层（如：触发弹层打开的节点），请将该节点传入 safeNode 属性。

#### 定位

`align` 的值可以是由空格隔开的字符串，如 `tl` `bl`，其中 `tl` 代表目标元素的左上方，`bl` 代表基准元素的左下方，所以 tl bl 的意思是目标元素的左上方对齐基准元素左下方。其中定位的可选值有 `tl`, `tc`, `tr`, `cl`, `cc`, `cr`, `bl`, `bc`, `br`。`t`为 `top` 的缩写，`b` 为 `bottom` 的缩写，`c` 为 `center` 的缩写，`l` 为 `left` 的缩写，`r` 为 `right` 的缩写.

`align` 支持的 `Boolean` 值仅为 `false`，在设置为 `false` 时，不使用 JS 定位，这样你可以根据你的需要传入 `style` 或者 `className` 进行 CSS 定位。

rtl情况下会自动翻转 `r(right)`与 `l(left)`, 例如 `rtl`状态下`tl bl`与 非`rtl`状态下`tr br`等效 下面的例子演示了如何将弹层定位到页面的右上角：

```javascript
<Overlay visible align="tr tr"><span>123</span></Overlay>
```

#### Popup

Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹出一个浮层，这个浮层默认情况下使用这个节点作为定位的参照对象。

## 示例

### 基本

```tsx
```

### 遮罩

```tsx
```

### 触发的弹层

```tsx
```

### 触发的弹层受控显示隐藏

```tsx
```

### 弹层嵌套

```tsx
```

### 弹层跟随滚动

```tsx
```

### 对齐

```tsx
```

## API

```tsx
```