# lulu **Repository Path**: zhizous/lulu ## Basic Information - **Project Name**: lulu - **Description**: LuLu UI for PC web - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 5 - **Created**: 2021-11-26 - **Last Updated**: 2022-06-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README
追本溯源,穿越沉浮
## 文档
* LuLu UI API 中文文档(GitHub托管,访问有延迟)
* LuLu UI API 中文文档(国内服务器托管,速度可以)
关于适合使用 LuLu UI 的场景,可以访问下面的视频介绍:
## 教程
* LuLu UI 中文教程
## 上手简单
LuLu 整个项目就是提供一些 UI 组件的 JS 和 CSS,很纯粹的 JS 和 CSS,贴近原生,简单直白。
LuLu UI 支持直接引入 CSS 和 JS 文件地址,所有主题通用,例如下面的代码引用了全部的 UI 组件库:
```html
```
```html
```
您也可以直接单独引入某一个组件,例如:
```html
```
```html
```
Edge 主题还支持浏览器原生的 import 引入,例如:
```html
```
LuLu UI 基于原生 HTML 特性构建,因此使用的时候 HTML 还是原来的 HTML,CSS 还是原来的 CSS,无需掌握流行概念,参照文档,复制复制,粘贴粘贴,效果就出来了。
由于 LuLu UI 中的代码基础,结构简单,没有炫技成分,也没有复杂技巧,因此非常适合新人的学习。
## 使用场景广泛
LuLu UI 既保留了传统插件即插即用的特性,也支持适合多人合作的模块化加载方式,因此适用场景更加广泛。
* 单人完成的某个简单运营活动页,需要个弹框提示功能,可以直接引入 LuLu UI 中的 Dialog.js,就可以使用了。
* 某网站看中了 LuLu UI 某一个组件,例如日期选择功能,想拿过来使用,`
```
```html
```
React 框架中:
```js
import "lu2/theme/edge/css/common/ui/Button.css";
import "lu2/theme/edge/css/common/ui/Dialog.css";
import Dialog from "lu2/theme/edge/js/common/ui/Dialog.js";
```
Svelte 框架中:
```js
import Dialog from 'lu2/theme/pure/js/common/ui/Dialog.js';
// 或者全局引入
// import 'lu2/theme/pure/js/common/all.js';
import 'lu2/theme/pure/css/common/ui.css';
```
## 成熟
LuLu UI 诞生于 2015 年,非 KPI 项目,服务于真实业务场景,会一直不断迭代,不要担心遇到问题会无人问津。
开源是件严肃的事情,LuLu UI 一直认为,如果组件还没有达到不动如山的境地,那就应该继续埋头打磨。这么多年过去了,LuLu UI 经过阅文集团对内对外近20个大中小型项目的实践与打磨,无论是交互细节还是代码本身细节,LuLu UI 现在都已经可以做到不显山露水了。
## 体验
LuLu UI 支持高清屏幕,支持辅助阅读设备无障碍访问,以及不少 UI 框架忽略的键盘无障碍访问。
借助扎实的前端基础知识,LuLu UI 有着很多创新的细节打磨,举个例子:如果用户是通过鼠标点击按钮打开的弹框,则弹框界面平平无奇;如果用户是通过 ENTER 回车键点击按钮打开的弹框,则弹框中的按钮默认会outline高亮!
/theme/ 目录下,目前支持4个主题:
* Modern 主题