update docs for dialog and lighttip

yued-fe · Apr 15, 2024 · d054606 · d054606
1 parent eef4270
commit d054606
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 18 deletions.
diff --git a/edge/about.use.html b/edge/about.use.html
@@ -56,14 +56,14 @@ <h5>CSS独立引入</h5>
             <p>使用 import 语法：</p>
             <pre>import 'lu2/theme/edge/css/common/ui/Drop.css';</pre>
             <h5>CSS完整引入<sup class="red">推荐</sup></h5>
-            <p>LuLu UI 内置两个合集CSS，一个是 form.css，包含所有表单控件样式，适合用在演示页面中。</p>
-            <pre>&lt;link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/form.css"&gt;</pre>
-            <p>或者：</p>
-            <pre>import 'lu2/theme/edge/css/common/form.css';</pre>
-            <p>还有一个是 ui.css，包含所有组件样式，推荐用在正式项目中。</p>
+            <p>对于CSS资源，推荐在公共入口处一次性完整引入。</p>
             <pre>&lt;link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui.css"&gt;</pre>
             <p>或者：</p>
             <pre>import 'lu2/theme/edge/css/common/ui.css';</pre>
+            <p>LuLu UI 还提供了一个名为 form.css 的样式合集，包含所有表单控件样式，适合用在演示页面中。</p>
+            <pre>&lt;link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/form.css"&gt;</pre>
+            <p>或者：</p>
+            <pre>import 'lu2/theme/edge/css/common/form.css';</pre>
             <h5>JS独立引入</h5>
             <p>独立引入适用于轻量级的小页面，或者只想使用某一组件场景。使用示意：</p>
             <pre>&lt;script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/Drop.js"&gt;&lt;/script&gt;</pre>
@@ -85,7 +85,7 @@ <h5>JS完整引入</h5>
             </ul>
 
             <h5>兼容 Safari 浏览器</h5>
-            <p>由于 Safari 浏览器目前还不支持内置自定义元素，因此，对于部分 UI 组件，如果需要兼容 Safari 浏览器，还需要引入下面这段 JS：</p>
+            <p>由于 Safari 浏览器目前还不支持内置自定义元素，因此，对于部分 UI 组件，如果需要兼容 Safari 浏览器，还需要引入下面这段 JS，建议在全局入口处引用：</p>
             <pre>&lt;script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/safari-polyfill.js"&gt;&lt;/script&gt;</pre>
 
             <h4>资源概览</h4>

diff --git a/edge/apis.dialog.html b/edge/apis.dialog.html
@@ -149,6 +149,13 @@ <h3>弹框的显示、隐藏</h3>
             </ol>
             <p>其中showModal()方法是模态显示，层级顶级，覆盖元素无法被点击。如果希望其他的显示方法也采用模态显示，可以添加modal属性。</p>
             <pre>&lt;dialog modal is="ui-dialog"&gt;&lt;/dialog&gt;</pre>
+            <dialog id="modal" modal is="ui-dialog">
+                <p>&emsp;&emsp;模态对话框吗？</p>
+            </dialog>
+            <p>例如，点击下面按钮，设置某<code>&lt;dialog&gt;</code>元素的open为true，看看是不是模态对话框？</p>
+            <p>
+                <button class="ui-button" onclick="modal.open = true;">modal属性测试</button>
+            </p>
             <p>弹框隐藏有4种方法，分别是：</p>
             <ol>
                 <li>dialog.open = false;</li>

diff --git a/edge/apis.lighttip.html b/edge/apis.lighttip.html
@@ -128,7 +128,7 @@ <h4>动态插入提示元素</h4>
 
             <p>但是上面2种动态创建的方法还是有些啰嗦，因此，本组件还提供了显示轻提示的快捷语法。</p>
 
-            <h3>LightTip快捷语法</h3>
+            <h3>LightTip构造语法</h3>
 
             <p>本组件会在全局暴露一个名为LightTip的类，可以用来生成轻提示效果，语法非常灵活，例如：</p>
             <pre>new LightTip('成功提示', 'success');
@@ -146,7 +146,6 @@ <h3>LightTip快捷语法</h3>
 
             <p class="tips">推荐使用 document.loading = true / false 语法控制全局loading效果，详见“<a href="apis.loading.html">Loading效果</a>”。</p>
 
-            <h3>语法和参数</h3>
             <h4>语法</h4>
             <pre>new LightTip(content, options);
 new LightTip(content, time?, type?);</pre>
@@ -181,11 +180,11 @@ <h4>参数</h4>
 
             <h3>LightTip静态方法</h3>
             <p>LightTip类上还有几个静态方法，方便开发者快捷使用，使用示意如下：</p>
-            <pre>import lightTip from './LightTip.js';
-lightTip.success('成功');
-lightTip.error('失败');
-lightTip.loading('正在加载中...');
-lightTip.custom('自定义', {
+            <pre>import message from './LightTip.js';
+message.success('成功');
+message.error('失败');
+message.loading('正在加载中...');
+message.custom('自定义', {
     type: 'warning'
 });</pre>
 
@@ -197,16 +196,35 @@ <h3>LightTip静态方法</h3>
             </p>
 
             <h4>静态方法语法</h4>
-            <pre>lightTip.success(content, time);
-lightTip.error(content, time);
-lightTip.loading(content);</pre>
-            <pre>lightTip.custom(content, {
+            <pre>message.success(content, time);
+message.error(content, time);
+message.loading(content);</pre>
+            <pre>message.custom(content, {
     type: 'warning',
     time: 4000
 });
 <span class="green">// 或</span>
-lightTip.custom(content, type, time);
+message.custom(content, type, time);
 </pre>
+
+            <h3>顶层显示</h3>
+            <p>模态对话框显示的时候显示轻提示会被覆盖，因为模态对话框的层级顶层，此时，可以将请提示元素append到对话框元素中，使用示意：</p>
+            <pre>&lt;dialog id="modal" is="ui-dialog"&gt;
+    &lt;button id="b7" class="ui-button" type="primary"&gt;显示轻提示&lt;/button&gt;
+&lt;/dialog&gt;</pre>
+<pre>b7.addEventListener('click', function () {
+    modal.append(message.success('操作成功'));
+});</pre>
+
+            <dialog id="modal" is="ui-dialog">
+                <p align="center">
+                    <button id="b7" class="ui-button" data-type="primary">显示轻提示</button>
+                </p>
+            </dialog>
+            <p>
+                <button class="ui-button" onclick="modal.showModal();">显示模态对话框</button>
+            </p>
+
             <div class="contributors">
                 <svg>
                     <use xlink:href="#icon-persons"></use>
@@ -318,6 +336,7 @@ <h6 class="contributors-h">本页贡献者：</h6>
 </body>
 </html>
 <script type="module">
+    import 'https://unpkg.com/lu2/theme/edge/js/common/ui/Dialog.js';
     import lightTip from 'https://unpkg.com/lu2/theme/edge/js/common/ui/LightTip.js';
 
     b1.addEventListener('click', function () {
@@ -368,4 +387,8 @@ <h6 class="contributors-h">本页贡献者：</h6>
     b6.addEventListener('click', function () {
         lightTip.loading('正在加载中...');
     });
+
+    b7.addEventListener('click', function () {
+        modal.append(lightTip.success('操作成功'));
+    });
 </script>