Coder Social home page Coder Social logo

yued-fe / lulu Goto Github PK

View Code? Open in Web Editor NEW
2.7K 63.0 262.0 4.83 MB

跨端跨框架的原生 UI 组件库,即插即用

Home Page: https://l-ui.com

License: MIT License

JavaScript 78.63% CSS 18.21% SCSS 3.16%
lulu ui components lulu-ui-js javascript css web-components html

lulu's Introduction

追本溯源,穿越沉浮

LuLu UI

LuLu UI 是阅文集团荣誉出品的前端 UI 组件库。

形象气质如下图,柔软亲近,使用简单灵活,适用场景广泛,适合面向外部用户的 PC 网站,或者需要轻量与敏捷的项目。

开发

拉取完整项目,包括 gh-pages 分支,然后执行下面的语句即可开发:

// 所有主题
node run

也可以只启动某一个主题,例如:

// Edge主题
node run edge
// Hope主题
node run hope

对应主题的演示兼文档页面的本地访问入口:

此时,修改项目的 JS 和 CSS 文件,刷新对应的组件页面,就可以看到变化的效果了。

注意:

如果执行失败,提示 gh-pages 是无效名称,可以执行下 git checkout gh-pages ,然后在回到 master 分支执行 node run

文档页面禁止在 master 分支提交,如果需要推送,请切换到 gh-pages 分支。

使用文档

关于适合使用 LuLu UI 的场景,可以访问下面的视频介绍:

使用教程

上手简单

LuLu 整个项目就是提供一些 UI 组件的 JS 和 CSS,很纯粹的 JS 和 CSS,贴近原生,简单直白,即插即用。

LuLu UI 支持直接引入 CSS 和 JS 文件地址,所有主题通用,例如下面的代码引用了全部的 UI 组件库:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LuLu UI Edge 主题</title>
    <link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui.min.css">
</head>
<body>
    <!-- 
      组件使用这里 
    -->

    <script src="https://unpkg.com/lu2/theme/edge/js/common/all.min.js"></script>
    <script>// 业务代码这里</script>
</body>
</html>

您也可以直接单独引入某一个组件,例如:

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

Edge 主题还支持浏览器原生的 import 引入,例如:

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

也支持 npm install 后作为包文件使用,例如:

import Dialog from 'lu2/theme/edge/js/common/ui/Dialog.js';

或者是在业务代码中动态引入:

import('lu2/theme/edge/js/common/ui/Dialog.js');

LuLu UI 基于原生 HTML 特性构建,因此使用的时候 HTML 还是原来的 HTML,CSS 还是原来的 CSS,无需掌握流行概念,参照文档,复制复制,粘贴粘贴,效果就出来了。

由于 LuLu UI 中的代码基础,结构简单,没有炫技成分,也没有复杂技巧,因此非常适合新人的学习。

使用场景广泛

LuLu UI 既保留了传统插件即插即用的特性,也支持适合多人合作的模块化加载方式,因此适用场景更加广泛。

  • 单人完成的某个简单运营活动页,需要个弹框提示功能,可以直接引入 LuLu UI 中的 Dialog.js,就可以使用了。
  • 某网站看中了 LuLu UI 某一个组件,例如日期选择功能,想拿过来使用,<script> 引入日期选择JS,然后就可以使用了。
  • 对于多人合作大型项目,可以基于 AMD/CMD 规范,或者 ES6 原生的 import/export 进行模块化加载与开发。
  • 对于 Vue 或者 React 项目,想要使用某个组件,但又不希望引入一大堆东西,则 LuLu UI 非常合适,支持 Vue/React 单独引入(见下方使用示意)。

在Vue/React中使用

安装:

npm install lu2

Vue/React项目建议使用Edge主题。

在 Vue-CLI 环境中:

<script>
import Dialog from 'lu2/theme/edge/js/common/ui/Dialog'
</script>
<style src="lu2/theme/edge/css/common/ui/Button.css"></style>
<style src="lu2/theme/edge/css/common/ui/Dialog.css"></style>

React 框架中:

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 框架中:

import Dialog from 'lu2/theme/edge/js/common/ui/Dialog.js';
// 或者全局引入
// import 'lu2/theme/edge/js/common/all.js';
import 'lu2/theme/edge/css/common/ui.css';

成熟

LuLu UI 诞生于 2015 年,非 KPI 项目,服务于真实业务场景,会一直不断迭代,不要担心遇到问题会无人问津。

开源是件严肃的事情,LuLu UI 一直认为,如果组件还没有达到不动如山的境地,那就应该继续埋头打磨。这么多年过去了,LuLu UI 经过阅文集团对内对外近20个大中小型项目的实践与打磨,无论是交互细节还是代码本身细节,LuLu UI 现在都已经可以做到不显山露水了。

体验

LuLu UI 支持高清屏幕,支持辅助阅读设备无障碍访问,以及不少 UI 框架忽略的键盘无障碍访问。

借助扎实的前端基础知识,LuLu UI 有着很多创新的细节打磨,举个例子:如果用户是通过鼠标点击按钮打开的弹框,则弹框界面平平无奇;如果用户是通过 ENTER 回车键点击按钮打开的弹框,则弹框中的按钮默认会 outline 高亮!

这样的细节处理对于 C 端产品颇有价值。

快速了解项目目录结构

所有资源都在 /theme/ 目录下,目前支持4个主题:

  • Modern 主题
    基于 jQuery,兼容 IE7+,针对 PC 网站。分 sass, css 和 js 3个目录,如果你不想要 sass,那这个文件夹就不用管。图片资源在 css 目录下。
  • Peak 主题
    基于 jQuery,兼容 IE8+,针对PC网站。分 sass, css 和 js 3个目录,如果你不想要 sass,那这个文件夹就不用管。图片资源在 css 目录下。
  • Pure 主题
    原生 JavaScript 编写,兼容 IE9+,PC,Mobile 网站通用。分 css 和 js 2个目录,没有图片资源目录,所有图像 CSS 内联。
  • Edge 主题
    原生 JavaScript 编写,ES6 module,兼容现代浏览器,PC,Mobile 网站通用,Vue、Preact、React全兼容,是面向未来的现代 Web 组件库,目前主力维护主题,所有组件免初始化即可使用。
  • Hope 主题
    原生 JavaScript 编写,ES6 module,技术前沿,移动端适用。

组件分 ui 和 comp 两个目录,前者是 UI 组件,后者是基于 UI 组件整合的前端解决方案。

更具体信息可以参见:

文档在 gh-pages 分支

另外,本 git 只展示了输出版本,原始 git 项目在公司内部,测试目录并未对外,并不是说本项目没有测试用例,以及 theme 中的 CSS 和 JS 文件就是开发版本,非编译版本,fork 项目后可直接二次开发。

项目成员

排名不分先后:nanaSun,ziven27,lennonover,wiia, popeyesailorman, 5ibinbin, littleLionGuoQing, peter006qi, HSDPA-wen, ShineaSYR, xiaoxiao78, zhangxinxu

其他说明

因为 IE7 大势已去,目前 modern 主题已停止维护。

组件均有测试(Hope主题除外),不过在内部项目中,没有对外。

LuLu UI 的设计理念、使用方式不同于常规 UI 组件库。

LuLu UI 没有版本概念,均以发包日期作为版本号。


MIT License

lulu's People

Contributors

baooab avatar fisker avatar jsmond2016 avatar run-ze avatar zeyongtsai avatar zhangxinxu avatar ziven27 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lulu's Issues

Any chance to get this project in English ?

Hi there,

This project looks really promising and seem to have an huge impact in the (I suppose) Chinese community.

Will you consider to enlarge your community to non Chinese speakers/readers ?

Cheers,

一个input上比较尴尬的问题

这个问题好像还不好调试,只是大概分析是input上的blur 事件或者click事件,出现问题的场景:

开发谷歌crx插件,向页面注入lulu.js ,在部分站点的登录处,页面上如果存在和lulu.js相冲突的事件,就会造成无法聚焦,点一下会自动失去焦点,大概是这样子的效果

image

主要是crx注入的js 还不知道怎么调试追踪,查不到到底是哪里冲突了,所以没办法了,只能来这里求助

会触发这个效果的页面,还有很多
https://www.24s.net/1268.html
https://passport.csdn.net/login?code=public

未完成的插件
https://www.9rax.com/crx.zip

image
解压加载才能复现

捕获小bug一枚

image
触发场景:name 名带有数组结构,比如
image
原因是:没有加引号
image

前端小白问:如何全部打包dist

我就喜欢一起撸,但貌似简单的合并会报依赖错误
gulp.task('Min', function(done) { gulp.src([path.js+'/common/ui/*',path.js+'/common/comp/*']) .pipe(concat('main.js')) .pipe(gulp.dest(path.dist)) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest(path.dist)) .on('end', done); });

软件是什么协议的?

我觉得看上去挺舒服,学起来也没什么门槛

问一下软件采用什么协议,希望能用在自己的项目中

checkbox实现的疑问

.ui-checkbox{ ... border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; box-sizing: border-box; box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px; ... }
为什么不直接使用border,而是隐藏border,使用内阴影来模拟checkbox边框,是基于什么考虑吗,望解惑

不能和wordpress的jquery搭配使用,估计和这个$符有关

当然用官方的jquery文件是没问题的,但因为是在WP下使用,打算还是用WP内置的jquery。
浏览器报错:

all.js:505 Uncaught TypeError: Cannot read property 'fn' of undefined at all.js:505 at all.js:485 at all.js:487

WP的jQuery是 v1.12.4。这个要怎么处理啊?

Pagination.show()方法不生效

page.num.length = 15;
page.show();

page为pagination实例

this.el.container.html(this.create(e, this.mode)) 好像这一句代码渲染不出来

官方文档

1)官方文档内容以后会不会考虑换成一列;
2)两列内容过多的时候 还需要返回顶部继续看,感觉有点累;
3)个人想法emmmm 也可以忽略。

希望在switch上面增加值映射

由于是基于checkbox,目前switch在开的状态可以在表单提交的时候附带on过去,如果关闭状态就什么也没有,希望增加映射,动态改变checkbox的值 ,比方开是1 关是-1 可以自定义。

也就是想switch拥有radio的功能

IE 11下 select 下拉框兼容性问题

在 IE11 下开启 Edge 模式,对 select option 设置的 height、min-height、padding 等 CSS 属性都不起作用,导致原始 option 选项的位置与生成的选项位置不匹配,选择选项的时候会发生错乱。

Pagination jquery3.3.1版本移除了.size()方法导致报错

/**
* 分页显示(也是刷新方法)
* @return {Object} 返回当前实例
*/
Pagination.prototype.show = function() {
// 数据合法性处理
var num = this.num;
num.length = Math.max(num.length, 0);
num.every = Math.max(num.every, 1);

    // current合法性处理
    var maxCurrent = Math.ceil(num.length / num.every);
    if (num.current > maxCurrent) {
        num.current = maxCurrent;
    }

    num.current = Math.max(num.current, 1);

    if (this.el && this.el.container && this.el.container.size()) {
        // 分页刷新
        this.el.container.html(this.create(num, this.mode));
    }

    return this;
};

jquery3.x移除了size方法,建议作者修改一下源码

Select.js 问题

Select.js 下拉方法只能基于原生的元素生成,不支持数据。 这样的话是不是就无法使用第三方插件 做省级联动了!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.