diff --git a/edge/about.use.html b/edge/about.use.html index 0203896..0aa9026 100644 --- a/edge/about.use.html +++ b/edge/about.use.html @@ -56,14 +56,14 @@
CSS独立引入

使用 import 语法:

import 'lu2/theme/edge/css/common/ui/Drop.css';
CSS完整引入推荐
-

LuLu UI 内置两个合集CSS,一个是 form.css,包含所有表单控件样式,适合用在演示页面中。

-
<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/form.css">
-

或者:

-
import 'lu2/theme/edge/css/common/form.css';
-

还有一个是 ui.css,包含所有组件样式,推荐用在正式项目中。

+

对于CSS资源,推荐在公共入口处一次性完整引入。

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui.css">

或者:

import 'lu2/theme/edge/css/common/ui.css';
+

LuLu UI 还提供了一个名为 form.css 的样式合集,包含所有表单控件样式,适合用在演示页面中。

+
<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/form.css">
+

或者:

+
import 'lu2/theme/edge/css/common/form.css';
JS独立引入

独立引入适用于轻量级的小页面,或者只想使用某一组件场景。使用示意:

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/Drop.js"></script>
@@ -85,7 +85,7 @@
JS完整引入
兼容 Safari 浏览器
-

由于 Safari 浏览器目前还不支持内置自定义元素,因此,对于部分 UI 组件,如果需要兼容 Safari 浏览器,还需要引入下面这段 JS:

+

由于 Safari 浏览器目前还不支持内置自定义元素,因此,对于部分 UI 组件,如果需要兼容 Safari 浏览器,还需要引入下面这段 JS,建议在全局入口处引用:

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/safari-polyfill.js"></script>

资源概览

diff --git a/edge/apis.dialog.html b/edge/apis.dialog.html index 1899a32..a44bbcd 100644 --- a/edge/apis.dialog.html +++ b/edge/apis.dialog.html @@ -149,6 +149,13 @@

弹框的显示、隐藏

其中showModal()方法是模态显示,层级顶级,覆盖元素无法被点击。如果希望其他的显示方法也采用模态显示,可以添加modal属性。

<dialog modal is="ui-dialog"></dialog>
+ +

  模态对话框吗?

+
+

例如,点击下面按钮,设置某<dialog>元素的open为true,看看是不是模态对话框?

+

+ +

弹框隐藏有4种方法,分别是:

  1. dialog.open = false;
  2. diff --git a/edge/apis.lighttip.html b/edge/apis.lighttip.html index be4156e..7dc8c7e 100644 --- a/edge/apis.lighttip.html +++ b/edge/apis.lighttip.html @@ -128,7 +128,7 @@

    动态插入提示元素

    但是上面2种动态创建的方法还是有些啰嗦,因此,本组件还提供了显示轻提示的快捷语法。

    -

    LightTip快捷语法

    +

    LightTip构造语法

    本组件会在全局暴露一个名为LightTip的类,可以用来生成轻提示效果,语法非常灵活,例如:

    new LightTip('成功提示', 'success');
    @@ -146,7 +146,6 @@ 

    LightTip快捷语法

    推荐使用 document.loading = true / false 语法控制全局loading效果,详见“Loading效果”。

    -

    语法和参数

    语法

    new LightTip(content, options);
     new LightTip(content, time?, type?);
    @@ -181,11 +180,11 @@

    参数

    LightTip静态方法

    LightTip类上还有几个静态方法,方便开发者快捷使用,使用示意如下:

    -
    import lightTip from './LightTip.js';
    -lightTip.success('成功');
    -lightTip.error('失败');
    -lightTip.loading('正在加载中...');
    -lightTip.custom('自定义', {
    +            
    import message from './LightTip.js';
    +message.success('成功');
    +message.error('失败');
    +message.loading('正在加载中...');
    +message.custom('自定义', {
         type: 'warning'
     });
    @@ -197,16 +196,35 @@

    LightTip静态方法

    静态方法语法

    -
    lightTip.success(content, time);
    -lightTip.error(content, time);
    -lightTip.loading(content);
    -
    lightTip.custom(content, {
    +            
    message.success(content, time);
    +message.error(content, time);
    +message.loading(content);
    +
    message.custom(content, {
         type: 'warning',
         time: 4000
     });
     // 或
    -lightTip.custom(content, type, time);
    +message.custom(content, type, time);
     
    + +

    顶层显示

    +

    模态对话框显示的时候显示轻提示会被覆盖,因为模态对话框的层级顶层,此时,可以将请提示元素append到对话框元素中,使用示意:

    +
    <dialog id="modal" is="ui-dialog">
    +    <button id="b7" class="ui-button" type="primary">显示轻提示</button>
    +</dialog>
    +
    b7.addEventListener('click', function () {
    +    modal.append(message.success('操作成功'));
    +});
    + + +

    + +

    +
    +

    + +

    +
    @@ -318,6 +336,7 @@
    本页贡献者:
    \ No newline at end of file