LuLu UI Edge版中文文档 » 使用与发布

教程

使用与发布

资源获取

Git地址:https://github.com/yued-fe/lulu

设计资源:LULU 提供 Figma UI 组件库设计资源文件,来帮助业务快速设计出高质量的产品原型。新窗口预览点我当前页预览点我,下载点我。使用过程有任何疑问或者需要帮助点我反馈问题

资源使用

本文档所有样式源代码均使用的是在线资源,但大家实际开发的时候,无论项目大小,建议下载并整合到本地项目资源中。因为线上的 LuLu 一直迭代,所以如果直接使用线上资源,可能会影响本地使用。

如果是多人合作的正式项目,应当获取完整 LuLu UI 资源。

如果是比较小型的项目,例如静态运营活动,可以按需下载需要的CSS和JS资源到本地,无需全部都下载到本地。

当然,如果目的是为了学习如何使用 LuLu,也是可以直接使用线上资源的。

资源引入

JS和CSS资源都支持独立引入和批量引入。

CSS独立引入

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

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

如果是在主流前端框架开发环境中,可以先安装 LuLu UI:

npm install lu2

使用 import 语法:

import 'lu2/theme/edge/css/common/ui/Drop.css';
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>

Edge 主题中的UI组件均采用原生的 import/export 语法,因此,在引用的时候需要设置type="module",当然,也可以在JavaScript代码中进行引用,例如:

<script type="module">
    import Drop from 'https://unpkg.com/lu2/theme/edge/js/common/ui/Drop.js';
</script>

如果是在主流前端框架开发环境中,可以使用 import 语法:

import 'lu2/theme/edge/js/common/ui/Drop.js';

支持动态引入:

import('lu2/theme/edge/js/common/ui/Drop.js');
JS完整引入

所有JS都整合在一个JS中。

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

完整引用的 all.js 并没有任何 export 暴露,因此:

  • type="module"不是必需的。
  • 可以使用暴露在全局的对象进行构造,类似 Dialog、LightTip 等。
兼容 Safari 浏览器

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

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

资源概览

基本目录结构如下:

js
 |--common
       |----ui
       |    |--Color.js
       |    |--Datalist.js
       |    |--DateTime.js
       |    |--Dialog.js
       |    |--Drop.js
       |    |--ErrorTip.js
       |    |--Follow.js
       |    |--Keyboard.js
       |    |--LightTip.js
       |    |--Loading.js
       |    |--Pagination.js
       |    |--Range.js
       |    |--Select.js
       |    |--Tab.js
       |    |--Tips.js
       |    |--Validate.js
       |
       |--comp
       |    |--Table.js
       |    |--Form.js
       |
       |--all.js         // build by running 'node run edge'

其中,ui 文件夹下为具体每一个小的 UI 组件;comp 文件夹为 components 缩写,指整合多个 UI 组件实现的常用解决方案。

各个JS具体作用参见下表:

JS文件名 说明 依赖文件
Color.js 颜色选择器。基于原生的 color 类型输入框生成。 Follow.js
Datalist.js 数据下拉。支持本地 Autocomplete,Ajax Autocomplete,支持邮箱@匹配等各种输入匹配。 Follow.js
DateTime.js 支持日期选择器,年份选择器,月份选择器,时间选择器以及日期范围和月范围选择器。 Follow.js
Dialog.js 弹框。带有黑色半透明遮罩的弹框。内置 alert 和 confirm 等常用提示弹框。 Loading.js
Drop.js 下拉交互。支持点击以及鼠标经过等交互。下拉内容绝对定位。内置列表和面板两种 Drop 类型 Follow.js
ErrorTip.js 出错提示。多出现在输入框等表单控件上,带三角,默认为红色。 Follow.js
Follow.js 定位方法。 -
Keyboard.js 键盘增强。作用是让 LuLu UI 的所有组件都能使用键盘无障碍访问。 -
LightTip.js 轻提示。3秒(可自定义)后自动消失。通常用在 ajax 交互提示中。 -
Loading.js 按钮、容器等 loading 交互控制。 -
Pagination.js 分页。支持长分页和短分页两种模式。 -
Range.js 区域范围选择。基于原生的 range 类型输入框生成。 Tips.js
Select.js 自定义下拉。基于原生 <select> 生成,通常用在表单交互中。 -
Tab.js 支持任意1v1的交互效果,例如选项卡。 -
Tips.js 带小尖角的黑色提示效果。支持多种访问,支持CSS提示和JS提示。 Follow.js
Validate.js 表单验证。采用和原生浏览器表单验证类似的交互方式,同时验证规则基于原生HTML5属性和方法。 ErrorTip.js
JS文件名 说明 依赖文件
Table.js 列表解决方案。将列表的无刷新加载和分页等整合在一起。 -
Form.js 表单解决方案。 LightTip.js, Validate.js

资源的发布

跟着项目走。

本页贡献者:

zhangxinxu