Overlay 弹层

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

用于弹层类的工具类集合.

开发指南

Overlay提供了一系列的组件的集合用于创建弹层组件。其中包含：

Gateway

Gateway的作用是将节点渲染到指定的容器中。正常情况下React使用当前节点所在的父节点作为容器，但是Gateway可以将其包含的节点渲染到另外的节点中。

Gateway只有一个配置项就是container, 它可以接受字符串和函数。

// 将span渲染到id为container的节点中
<Gateway container="container">
    <span>123</span>
</Gateway>

实际上也可以传入container为函数，返回节点的ref.

<div ref="container"></div>
<Gateway container={() => this.refs.container}>
    <span>123</span>
</Gateway>

Overlay

Overlay利用了Gateway提供的能力，可以在页面中弹出一个浮层，封装了动画和定位及一些可用性的功能。

Overlay被设计为无状态的组件，其本身并不控制自己的显示和隐藏的状态。

注意: 类似的canCloseby*的配置也需要配合onRequestClose才能关闭Overlay

安全节点

弹层同时提供点击文档中的节点隐藏该弹层的功能，但是由于React内部维护了一个事件队列，且并未提供针对document的事件绑定方式，所以在点击任何一个节点都会触发document的click，即便手动阻止冒泡也不行， Overlay采用了一个安全节点的设置来避免这个问题.

定位

• align由空格隔开的字符串表示，例如 tl bl. 其中tl代表目标元素的左上方，bl代表基准元素的左下方，所以tl bl的意思是目标元素的左上方对齐基准元素左下方。其中定位的可选值有 tl, tc, tr, cl, cc, cr, bl, bc, br.

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

说明 t为top的缩写，b为bottom的缩写，c为center的缩写，l为left的缩写，r为right的缩写.

下面的例子演示了如何将弹层定位到页面的右上角

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

Popup

接收某个节点，弹出一个浮层, 这个浮层默认情况下使用这个节点作为定位的参照对象

API

弹层

Overlay.Gateway

Overlay.Popup

Overlay.Position

代码示例

遮罩

带有遮罩的弹出层

查看源码在线预览

import { Overlay } from "@icedesign/base";

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      visible: false
    };
  }
  render() {
    return (
      <span>
        <button onClick={this.onClick.bind(this)} ref="target">
          Open
        </button>
        <Overlay
          visible={this.state.visible}
          hasMask
          disableScroll
          align="cc cc"
          safeNode={() => this.refs.target}
          onRequestClose={this.onClose.bind(this)}
        >
          <span className="overlay-demo">Hello World From Overlay!</span>
        </Overlay>
      </span>
    );
  }
  onClick() {
    this.setState({ visible: true });
  }
  onClose = reason => {
    console.log("onRequestClose emit!, reason: ", reason);
    this.setState({
      visible: false
    });
  };
}

ReactDOM.render(<App />, mountNode);

.overlay-demo {
    border: 1px solid #999;
    padding: 10px;
    width: 300px;
    height: 100px;
    background: #fff;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
}

受控

演示了Popup受控的示例,可以在内部控制Popup的显示和隐藏

查看源码在线预览

import { Overlay } from "@icedesign/base";

const Popup = Overlay.Popup;

class App extends React.Component {
  state = {
    visible: false
  };
  render() {
    return (
      <Popup
        trigger={<button>Open</button>}
        visible={this.state.visible}
        triggerType="click"
        onVisibleChange={this.onVisibleChange}
      >
        <div className="overlay-demo">
          <button onClick={this.onClose}>Close</button>
          <p>Hello World From Popup!</p>
        </div>
      </Popup>
    );
  }
  onClose = () => {
    this.setState({
      visible: false
    });
  };
  onVisibleChange = visible => {
    this.setState({
      visible
    });
  };
}

ReactDOM.render(<App />, mountNode);

.overlay-demo {
    border: 1px solid #999;
    padding: 10px;
    width: 300px;
    height: 100px;
    background: #fff;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
}

Gateway

Gateway 的基本用法

查看源码在线预览

import { Overlay } from "@icedesign/base";

const { Gateway } = Overlay;

class App extends React.Component {
  render() {
    return (
      <div>
        <span ref="container" />
        <Gateway container={() => this.refs.container}>
          <span>Hello World from gateway.</span>
        </Gateway>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

弹层嵌套

弹层嵌套的时候，使用container属性将容器渲染到第一个弹层的节点内部。

查看源码在线预览

import { Overlay } from "@icedesign/base";

const Popup = Overlay.Popup;

class App extends React.Component {
  state = {
    visible: false,
    overlayVisible: false
  };
  render() {
    return (
      <Popup
        trigger={<button>Open</button>}
        triggerType="click"
        visible={this.state.visible}
        onVisibleChange={this.onVisibleChange}
      >
        <div className="overlay-demo">
          <Popup
            triggerType="click"
            trigger={<button>Open overlay</button>}
            container={trigger => trigger && trigger.parentNode}
            visible={this.state.overlayVisible}
            onVisibleChange={this.onOverlayVisibleChange}
          >
            <div className="overlay-demo" onClick={this.hideOverlay}>
              Click me will close this overlay, but popup will not close.
            </div>
          </Popup>
          <p>Hello World From Popup!</p>
        </div>
      </Popup>
    );
  }
  hideOverlay = () => {
    this.setState({
      overlayVisible: false
    });
  };
  showOverlay = () => {
    this.setState({
      overlayVisible: true
    });
  };
  onVisibleChange = visible => {
    this.setState({
      visible
    });
  };
  onOverlayVisibleChange = overlayVisible => {
    this.setState({
      overlayVisible
    });
  };
}

ReactDOM.render(<App />, mountNode);

.overlay-demo {
    border: 1px solid #999;
    padding: 10px;
    width: 300px;
    height: 100px;
    background: #fff;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
}

弹出层

弹出一个浮层

查看源码在线预览

import { Overlay } from "@icedesign/base";

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      visible: false
    };
  }
  render() {
    return (
      <span>
        <button onClick={this.onClick.bind(this)} ref="target">
          Toggle visible
        </button>
        <Overlay
          visible={this.state.visible}
          target={() => this.refs.target}
          safeNode={() => this.refs.target}
          onRequestClose={this.onClose.bind(this)}
        >
          <span className="overlay-demo">Hello World From Overlay!</span>
        </Overlay>
      </span>
    );
  }
  onClick() {
    this.setState({ visible: !this.state.visible });
  }
  onClose = () => {
    this.setState({
      visible: false
    });
  };
}

ReactDOM.render(<App />, mountNode);

.overlay-demo {
    border: 1px solid #999;
    padding: 10px;
    width: 300px;
    height: 100px;
    background: #fff;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
}

触发的弹层

使用Popup弹出一个浮层

查看源码在线预览

import { Overlay } from "@icedesign/base";

const Popup = Overlay.Popup;
const afterClose = () => {
  console.log("close");
};
const trigger = <button>Open</button>;
ReactDOM.render(
  <Popup trigger={trigger} triggerType="click" afterClose={afterClose}>
    <div className="overlay-demo">Hello World From Popup!</div>
  </Popup>,
  mountNode
);

.overlay-demo {
    border: 1px solid #999;
    padding: 10px;
    width: 300px;
    height: 100px;
    background: #fff;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
}

跟随滚动

演示弹层如何跟随滚动

查看源码在线预览

import { Overlay } from "@icedesign/base";

const Popup = Overlay.Popup;

class App extends React.Component {
  render() {
    return (
      <div className="scroll-container" ref="scroll">
        <Popup
          trigger={<button>Open</button>}
          container={() => this.refs.scroll}
          triggerType="click"
        >
          <div className="overlay-demo">
            <p>Hello World From Popup!</p>
          </div>
        </Popup>
        <div style={{ height: "300px" }} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

.overlay-demo {
    border: 1px solid #999;
    padding: 10px;
    width: 300px;
    height: 100px;
    background: #fff;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
}
.scroll-container {
    position: relative;
    height: 150px;
    border: 1px solid #999;
    padding: 10px;
    overflow: auto;
}

相关区块

暂无相关区块