From a0fd6085da330978ad8a6219c6db87ff0486b756 Mon Sep 17 00:00:00 2001 From: p_zxxuzhang Date: Thu, 8 Jun 2023 10:24:20 +0800 Subject: [PATCH] Update docs --- edge/about.design.html | 2 +- edge/apis.datalist.html | 12 ++++++++---- edge/apis.dialog.html | 16 ++++++++++++++-- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/edge/about.design.html b/edge/about.design.html index 1ff6d75..a66ad43 100644 --- a/edge/about.design.html +++ b/edge/about.design.html @@ -67,7 +67,7 @@

面向设计开发

所以，LuLu UI是没有版本的概念的，只有一条核心线自己往前走。当新项目过来需要使用的时候，完全拷贝LuLu UI到项目开发目录中，然后根据当前项目的设计风格，对HTML和JS进行结构上的调整，是放心大胆的调整。

因此，LuLu UI组件不是传统的大而全，而是走极简轻便灵活方向，表现为模块低耦合，层级扁平；API非常少，尤其一些基本组件，直接就没有API。

LuLu UI没有版本概念，只有主题，目前有morden、peak, pure和edge四个主题，寓意为“现代”、“巅峰”、“纯粹”和“边缘”。

-

本文档对应的是edge版本，不兼容IE浏览器，Safari浏览器需要引入safari-polyfill。

+

本文档对应的是edge版本，不兼容IE浏览器，Safari浏览器需要引入safari-polyfill。

基于HTML开发

相对于其他UI框架，LuLu UI技术栈更偏向HTML和CSS，以便更友好地还原设计和增强体验。

具体而言，LuLu UI基于HTML开发，实现前端开发分离，具体可参考“顺势而为，HTML发展与UI组件设计进化”。

diff --git a/edge/apis.datalist.html b/edge/apis.datalist.html index 3b8df1f..9aab1e2 100644 --- a/edge/apis.datalist.html +++ b/edge/apis.datalist.html @@ -338,10 +338,10 @@
其他说明

2. Ajax autocomplate功能

- + 
<form>
-    <input class="ui-input" type="search" id="s2" name="kw" placeholder="输入字母">
+    <input class="ui-input" type="search" id="s2" is="ui-datalist" placeholder="输入字母">
     <button type="submit" class="ui-button" data-type="primary">搜索</button>
 </form>
// 列表内容不转义，支持HTML显示
@@ -350,8 +350,9 @@ 
2. Ajax autocomplate功能

 s2.params.data = {
     url: '/search',
     data: {
-        userid: 1
+        userid: 1,
     },
+    name: 'kw',
     success() {
         console.log('success callback successed!');
     }
@@ -368,7 +369,9 @@ 
参数

                 
url

                 
字符串。必需。请求后端数据的地址。注意，IE9浏览器不支持跨域的URL地址。

                 
data

-                
纯对象。可选。请求后端数据时发送的数据。其中输入框数据发送是组件内置的，默认使用<input>元素的name属性值作为字段发送数据，如果缺省，使用字符k代替。

+                
纯对象。可选。请求后端数据时发送的数据。其中输入框数据发送是组件内置的，无需额外设置。

+                
name

+                
字符串。可选。搜索内容对应的字段名称，如果不设置，使用<input>元素的name属性值，如果name属性值也没设置，使用字符k代替。

                 
success

                 
函数。可选。成功回调，支持一个参数，为后端返回的JSON数据。

                 
error

@@ -883,6 +886,7 @@ 
带搜索的下拉列表

         data: {
             userid: 1
         },
+        name: 'kw',
         success() {
             console.log('success callback successed!');
         }
diff --git a/edge/apis.dialog.html b/edge/apis.dialog.html
index 25508ee..03afe82 100644
--- a/edge/apis.dialog.html
+++ b/edge/apis.dialog.html
@@ -196,10 +196,22 @@ 
弹框内容设置

 
             
1. 直接显示

             
需要显示的内容内容直接放在<dialog>元素中，例如：

-            
<dialog id="dialog2" is="ui-dialog" title="我是标题">Hello, LuLu UI!</dialog>

+            
<dialog id="dialog2" is="ui-dialog" title="我是标题">
+    <select is="ui-select" style="width: 150px">
+        <option value="1">选项1</option>
+        <option value="2">选项2</option>
+        <option value="3">选项3</option>
+    </select>            
+</dialog>

             
此时弹框直接显示已有内容，例如：

             
dialog2.show();

-            Hello, LuLu UI!
+            
+                
+            
             
测试：

             
其中，<dialog>元素上的title属性值会作为弹框的标题显示。此title属性是一次性的，也就是后期再使用dialog.title修改title属性是无效的，请使用dialog.params.title进行标题的修改。