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

Fork Me

使用与发布

资源获取

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

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

资源使用

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

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

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

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

资源引入

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

CSS独立引入

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

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui/*.css">

具体使用参见各个组件文档说明。

CSS完整引入推荐

如果用到LuLu UI多个组件,我们可以直接引入一个完整的ui.css文件就可以了,可能会有些许冗余,但成本较低,可以忽略。

如果使用本地资源:

<link rel="stylesheet" href="/css/common/ui.css">

如果直接使用线上资源:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui.css">
JS独立引入

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

<script type="module" src="https://qidian.gtimg.com/lulu/edge/js/common/ui/Drop.js"></script>

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

<script type="module">
    import Drop from 'https://qidian.gtimg.com/lulu/edge/js/common/ui/Drop.js';
</script>
JS完整引入

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

<script type="module" src="https://qidian.gtimg.com/lulu/edge/js/common/all.js"></script>

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

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

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

<script type="module" src="https://qidian.gtimg.com/lulu/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'

其中,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