LuLu UI Edge版中文文档 » 静态控件之文本框

安装与调用

如果只是单纯的静态展示，可以直接引入：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Overlay/index.css">

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Overlay/index.js"></script>

<script type="module">
    import 'https://qidian.gtimg.com/lulu/hope/ui/Overlay/index.js';
</script>

基本效果

在页面中引入下面这段 HTML，就可以有覆盖层效果。

<ui-overlay open></ui-overlay>

<button id="b0" type="primary" is="ui-button"
    >载入 &lt;overlay&gt; 元素
</button>

b0.addEventListener('click', function () {
    document.body.insertAdjacentHTML('beforeend', '<ui-overlay mode="remove" open></ui-overlay>');
});

覆盖层基本效果不依赖与 JS，但是，站在实际开发的角度，推荐引入对应的组件 JS，让 <ui-overlay> 元素变成真正的自定义元素，以支持各种行为和方法。

这些行为包括点击覆盖层会自动隐藏，如果希望点击覆盖层不会隐藏，则可以使用 mode 属性进行重置。

<ui-overlay mode="custom" open></ui-overlay>

然后开发人员自己对覆盖层通过 open 属性进行隐藏设置。

overlay.removeAttribute('open');
// 或者
overlay.open = false;

样式设置

改变透明度

覆盖层默认采用了 40% 透明度的黑色，如果希望改变透明度值，可以使用 opacity 属性进行设置。

<ui-overlay opacity=".7" open></ui-overlay>

改变覆盖颜色

可以使用 color 属性重置覆盖层的颜色，此时 opacity 属性会失效。

<ui-overlay color="#f00a" open></ui-overlay>

淡入淡出

设置 fade 属性可以让覆盖层有淡入淡出效果。

<ui-overlay fade></ui-overlay>

滚动锁定

设置 touch="none" 可以让触摸覆盖层的时候，背后的内容不会发生滚动。

<ui-overlay touch="none"></ui-overlay>

装载内容

<ui-overlay> 支持载入内容，默认水平垂直对齐。

<ui-overlay open>
    <!-- 这里显示嵌入内容 -->           
</ui-overlay>

<button id="b4" type="primary" is="ui-button">嵌入内容</button>

<ui-overlay id="lay">
    <div class="wrap">
        <ui-loading></ui-loading>
    </div>
</ui-overlay>

.wrap {
    width: 4rem; height: 4rem;
    background-color: #fff;
    display: grid;
    place-items: center;
    border-radius: var(--ui-radius);
}

b4.addEventListener('click', function () {
    lay.open = true;
});

Overlay 语法

可以使用下面的语法直接创建 <ui-overlay> 元素到页面中。

let overlay = new Overlay(options);

new Overlay({
    opacity: '80%'
});

其中 options 是可选参数，支持的参数值见下表。

可以看到，Overlay 实例方法默认开启的动画支持，以及元素隐藏采用的是移除节点实现的，这个是和默认的 <ui-overlay> 元素元素是有区别的。

属性和方法

<ui-overlay> 元素支持的属性和上面的 new Overlay(options) 中的可选参数是一致的，区别在于部分属性的默认值。

支持的 HTML 属性

<ui-overlay opacity=".7" mode="remove" touch="none" fade open></ui-overlay>

支持的方法

支持 show()、hide() 和 remove() 三个方法。