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/pure/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/pure/css/common/ui.css">
JS独立引入

独立引入适用于轻量级的小页面,或者只想使用某一组件场景。方法有很多,可以直连:

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/*.js"></script>

或者直接使用combo的资源,例如:

<script src="https://qidian.gtimg.com/c/=/lulu/theme/pure/js/common/ui/Follow.js,/lulu/theme/pure/js/common/ui/Keyboard.js,/lulu/theme/pure/js/common/ui/DateTime.js"></script>
JS完整引入推荐

所有JS都整合在一个JS中,如今流量不值钱,完整引入反而省心。。

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

all.js中并不包括polyfill.js,如果你的项目还需要兼容IE浏览器,则还需要下面这段代码:

<script src="https://qidian.gtimg.com/lulu/pure/js/common/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'
       |--polyfill.js    // for IE

其中,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等常用提示弹框。支持ajax异步加载弹框内容。 Loading.js
Drop.js 下拉交互。支持点击以及鼠标经过等交互。下拉内容绝对定位。内置列表和面板两种Drop类型 Follow.js
ErrorTip.js 出错提示。多出现在输入框等表单控件上,带三角,默认为红色。 Follow.js
Follow.js 定位方法。 -
Keyboard.js 键盘增强。作用是让lulu所有组件都能使用键盘无障碍访问。 -
LightTip.js 轻提示。3秒(可自定义)后自动消失。通常用在ajax交互提示中。 -
Loading.js 按钮,容器等loading交互控制。 -
Pagination.js 分页。支持长分页和短分页两种模式。 -
Range.js 区域范围选择。基于原生的range类型输入框生成。 Tips.js
Select.js 自定义下拉。基于原生<select>生成,通常用在表单交互中。 -
Tab.js 选项卡。 -
Tips.js 带小尖角的黑色提示效果。支持多种访问,支持CSS提示和JS提示。 Follow.js
Validate.js 表单验证。采用和原生浏览器表单验证类似的交互方式,同时验证规则基于原生HTML5属性和方法。 ErrorTip.js
JS文件名 说明 依赖文件
Table.js 列表解决方案。将列表的无刷新加载和分页等整合在一起。 -
Form.js 表单解决方案。 LightTip.js, Validate.js

关于polyfill.js

LuLu UI pure主题走polyfill机制,采用比较新的API原生开发,对于不支持的浏览器,例如IE,采用polyfill使其也支持,目前支持的API如下:

  • Element.classList for IE9
  • Element.matches() for IE9
  • Element.closest() for IE
  • Element.before()/after()/append()/prepend()/replaceWith()/remove() for IE
  • URL()/URLSearchParams() for IE
  • document.scrollingElement for IE
  • console for IE9-IE10
  • CustomEvent for IE
  • NodeList.forEach() for IE
  • Object.assign() for IE
  • requestAnimationFrame for IE9

资源的发布

跟着项目走。

本页贡献者:

zhangxinxu