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 @@
使用 import 语法:
import 'lu2/theme/edge/css/common/ui/Drop.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';
独立引入适用于轻量级的小页面,或者只想使用某一组件场景。使用示意:
<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/Drop.js"></script>@@ -85,7 +85,7 @@
由于 Safari 浏览器目前还不支持内置自定义元素,因此,对于部分 UI 组件,如果需要兼容 Safari 浏览器,还需要引入下面这段 JS:
+由于 Safari 浏览器目前还不支持内置自定义元素,因此,对于部分 UI 组件,如果需要兼容 Safari 浏览器,还需要引入下面这段 JS,建议在全局入口处引用:
<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/safari-polyfill.js"></script>
其中showModal()方法是模态显示,层级顶级,覆盖元素无法被点击。如果希望其他的显示方法也采用模态显示,可以添加modal属性。
<dialog modal is="ui-dialog"></dialog>+ +
例如,点击下面按钮,设置某<dialog>
元素的open为true,看看是不是模态对话框?
+ +
弹框隐藏有4种方法,分别是:
但是上面2种动态创建的方法还是有些啰嗦,因此,本组件还提供了显示轻提示的快捷语法。
-本组件会在全局暴露一个名为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('操作成功')); +});+ + ++ +
+