【转】前端——实用UI组件库

2018-08-30 675

Angular UI 组件

ngx-bootstrap

是一套Bootstrap 组件

官网：https://valor-software.com/ngx-bootstrap/#/

github: https://github.com/valor-software/ngx-bootstrap

NG-bootstrap

bootstrap4组件

官网：https://ng-bootstrap.github.io/#/home

NG-ZORRO

0.5，0.6两个版本分别支持angular4.x和5.x

https://ng.ant.design/#/docs/angular/introduce，

NG-alain

https://cipchk.github.io/ng-alain/#/dashboard/v1

github: https://github.com/cipchk/ng-alain

NGX-admin

http://akveo.com/ngx-admin/#/pages/dashboard

primeng

一个丰富的组件库，并且有不同的主题可供选择

https://www.primefaces.org/primeng/#/setup

https://www.primefaces.org/serenity/

Vue组建库：

iView:

https://www.iviewui.com/docs/guide/introduce

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

ElementUI （饿了么团队）：

http://element-cn.eleme.io/#/zh-CN/component/quickstart

提供Vue, Angular, React不同版本，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

https://element-angular.faas.ele.me/guide/install

https://eleme.github.io/element-react/#/zh-CN/quick-start

Mint UI （饿了么团队）

中文官网：http://mint-ui.github.io/#!/zh-cn

描述：基于 Vue.js 的移动端组件库，可按需加载组件

预览：http://elemefe.github.io/mint-ui/#/

Cube-ui (滴滴内部组件库)

中文官网：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

描述：cube-ui 是基于 Vue.js 实现的精致移动端组件库。

Vue-ydui (YDUI Touch 的一个Vue2.x实现版本，专为移动端打造)

http://vue.ydui.org/

一只基于Vue2.x的移动端&微信UI。 -YDUI Touch

React组件：

Zent

Zent ( \ˈzent\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件

https://www.youzanyun.com/zanui/zent/zh/guides/install

移动端框架

SUI Mobile（阿里巴巴共享业务事业部UED团队）

官网：http://m.sui.taobao.org/
描述：一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，
并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
基于zepto
IOS风格

预览：http://m.sui.taobao.org/demos/

基础引入：
　　　　CDN:

 
         <link rel=
         "stylesheet" 
         href=
         "//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"
         > 
        
         <script type=
         'text/javascript' 
         src=
         '//g.alicdn.com/sj/lib/zepto/zepto.min.js' 
         charset=
         'utf-8'
         ></script> 
        
         <script type=
         'text/javascript' 
         src=
         '//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' 
         charset=
         'utf-8'
         ></script>

Weui（微信官方设计团队）

描述：WeUI 为微信 Web 服务量身设计,是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。
包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
GitHub地址：https://github.com/weui/weui

预览：
　　UI组件：https://weui.io

JS组件：https://github.com/weui/weui

基础引入：
　　　　CDN：

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>

npm：
　　　　　　npm install --save weui

YDUI Touch

官网：http://www.ydui.org/
描述：一只注重审美，且性能高效的移动端&微信UI。专属于移动，采用 Flex 布局，用 rem 来做响应式开发，自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
基于jQuery 2.0+
兼容性：
　　兼容绝大多数移动端设备（兼容Android4.0+、IOS6.0+）；
　　采用 flexbox 布局，因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性，YDUI 将采取其他解决方案；
基础引入：
　　download：
　　　　　　引入YDUI样式：ydui.css
　　　　　　引入YDUI自适应解决方案类库：ydui.flexible.js
　　　　　　引入jQuery2.0+
　　　　　　引入YDUI脚本：ydui.js

预览：http://m.ydui.org

GitHub地址：https://github.com/ydcss/ydui

GMU（百度GMU小组开发）

http://cloudajs.org/ui/brand/gmu

描述：基于zepto的轻量级mobile UI组件库，符合jquery ui使用规范，提供webapp、pad端简单易用的UI组件。
兼容iOS3+ / android2.1+，支持国内主流移动端浏览器，如safari, chrome, UC, qq等。
GitHub地址：https://github.com/fex-team/GMU

基础引入：
　　　　download
　　　　　　引入reset.css：https://github.com/fex-team/GMU/blob/master/dist/reset.css
　　　　　　引入gmu.css：https://github.com/fex-team/GMU/blob/master/dist/gmu.css
　　　　　　引入zepto.js：https://github.com/fex-team/GMU/blob/master/dist/zepto.js
　　　　　　引入gmu.js：https://github.com/fex-team/GMU/blob/master/dist/gmu.js

FrozenUI（QQVIP FD团队• Alloyteam团队）

官方地址：http://frozenui.github.io/
　　描述：FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FrozenUI。简单易用，轻量快捷，为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。
兼容android 2.3 +，ios 4.0 + 。
　　GitHub地址：https://github.com/frozenui/frozenui

Foundation

中文官网：http://www.foundcss.com/
描述：Foundation是国外最流行的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
GitHub地址：https://github.com/zurb/foundation-sites

基础引入：　　
　　　　CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>

Amaze UI

　　官方地址：http://amazeui.org/
　　描述：中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果。

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
　　基于jQuery
　　GitHub：https://github.com/amazeui/amazeui

Amaze UI Web 与 Amaze UI Touch

	Amaze UI Web
定位	移动优先、响应式、跨屏 UI 组件库	专属移动（手机）端的 UI 组件库
JS 基础库	jQuery	React
CSS 预处理	Less	Sass
Grid	基于 float，12 列响应式	基于 flexbox，6 列流式
兼容性	兼容主流桌面、移动浏览器（WebView）有限支持 IE8	完整支持实现 12 版 flexbox 规范的浏览器（WebView），如 Android 4.4+、IE Mobile 11+、iOS 7.1+ Grid 和 NavBar 对按 09 版 flexbox 实现的浏览器（WebView）支持有待进一步测试
项目地址	Amaze UI@GitHub	Amaze UI Touch@GitHub
衍生版本	Amaze UI React - 共用 CSS，使用 React 实现交互	N/A
适用场景	响应式或移动网站熟悉 jQuery 兼容性要求较广更适合后端渲染架构	针对手机端开发能够驾驭 React 及相关配套技术浏览器（WebView）支持 flexbox，如 iOS、腾讯 TBS 2.0 内核的微信 WebView 可用于 SPA 架构

基础引入：
　　　　CDN:

http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js

Pure

　　中文官网：https://www.purecss.cn/
　　描述：纯CSS
　　美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。
　　GitHub：https://github.com/yahoo/pure/

基础引入：
　　　　CDN:

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

PC 端 UI框架

SUI（阿里巴巴国际UED团队-商家业务事业部）

　　官网地址：http://sui.taobao.org/
　　描述：一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。
　　基于jquery

GitHub：https://github.com/sdc-alibaba/sui

基础引入：
　　　　CDN:

<link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>

H-ui

　　官方地址：http://www.h-ui.net/
　　描述：轻量级前端框架，简单免费，兼容性好，服务中国网站。
　　基于jQuery
　　GitHub地址：https://github.com/jackying/h-ui

layui

官方地址：http://www.layui.com/
描述：更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，
让一切你所需要的元素与交互，从这里信手拈来。
　　layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。
经典模块化前端框架

GitHub：https://github.com/sentsin/layui/

基础引入：
　　　　layui.css
　　　　layui.js

uiKit（YOOtheme 团队）

官网地址：http://www.getuikit.net/
描述：一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。
UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有JavaScript 都会失效。
　　依赖jQuery

GitHub地址：https://github.com/uikit/uikit

基础引入：
　　　　CDN:

<link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" />
<script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"></script>

Bootstrap

　　中文官网：http://www.bootcss.com/
　　描述：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

基础引入：
　　　　CDN：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

npm:
　　　　　　npm install bootstrap@3
　　其他基于bootstrap衍生出来的模块：
　　　　Ace Admin后台管理系统模板：基于bootstrap3；http://ace.jeka.by/
　　　　Metronic后台管理模板：http://www.metronic.com/
　　　　H+:http://www.zi-han.net/theme/hplus/
　　　　jQuery UI+Bootstrap：https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/

jQuery UI

　　官方网址：http://jqueryui.com/

其他基于jQuery衍生出来的模板：
　　　　BUI：基于jQuery+KISSY UI:http://www.builive.com/
　　　　EasyUI:：http://www.jeasyui.net/
　　　　　　描述：使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
　　　　DWZ JUI:http://jui.org/

混合开发 UI框架

OnsenUI

　　官网地址：https://onsen.io/
　　描述：用来构建混合移动端APP的 HTML5 UI 框架,提供AngularJS 1, Angular 2+, React, Vue各种版本
　　GitHub地址：https://github.com/OnsenUI/OnsenUI

ionic

　　中文官网网址：http://www.ionic-china.com/

　　基于AngularJS
　　描述：ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。
ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。

Framework7

　　官网地址：http://framework7.cn/
　　描述：Framework7 是一个开源免费的HTML框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。
　　也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
　　Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。Framework7 是一个针对iOS7的框架。从一开始，她就考虑到如何最方便快捷地实现iOS7上各种惊艳的UI组件，以及复杂的动画和灵活的触摸交互。所以Framework7是你实现像素级精度的iOS7应用的最佳选择。
　　GitHub：https://github.com/framework7io/framework7

APP 框架（拓展）

react-native

　　中文官网地址：http://reactnative.cn/
　　描述：React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)
　　GitHub地址：https://github.com/facebook/react-native

weex

　　官网地址：http://weex.apache.org/cn/
　　描述：Weex 提供强大的跨平台能力，可以使用相同的 API 开发 Web，Android 和 iOS 应用。
同时，我们对接口了丰富的扩展能力。

转自：https://www.cnblogs.com/xuepei/p/7920888.html

微信关注我们

原文链接：https://yq.aliyun.com/articles/643619

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

用PWA构建一个完全离线的网站

想象一下，你有能力去构建一个完全离线的网站，为用户提供几乎瞬间加载的体验，同时它对于不可靠的网络又是安全及富有弹性的。这听起来既不可能，又不可思议。无论你是否相信，绝大部分现代浏览器都已经内置提供了这些功能，只需要释放它们。当你利用这些强大的功能构建网站时，你便已经拥有了所谓的 PWA（Progressive Web App）。 PWA有什么优势回溯到 1990 年的圣诞节，Tim Berners-Lee 爵士和他在 CERN 的团队创建了使Web 正常工作所需的所有工具。他们创建了 HTTP、HTML 和 WorldWideWeb（全世界第一个网页浏览器）。WorldWideWeb 只能运行具有超链接的简单纯文本组成的网页。事实上，这些第一代的网页仍然在线，并且可以浏览。从几十年前回到现在，我们所浏览的网页并没有变化。当然，现在我们有了像CSS 和JavaScript 这样的功能，但网页的核心依旧是使用 HTML、HTTP 以及其他一些模块来构建，这些都是 Berners-Lee 和他的团队在多年前所创建的。这些辉煌的构建模块意味着 Web 已经能够以惊人的速度增长。然而，我们...

2018-08-31

451

GO语言学习笔记（三） - 递归查找目录及子目录下的文件递归查找目录及子目录下的文件递归查找文件夹及子文件夹下的文件代码 package main import ( "fmt" "io/ioutil" "os" "strings" ) // 查找目录及子目录下的文件 // 添加参数判断 // path : 目标目录 // files : 容纳所有文件路径的结果数组 // targetType : 目标文件类型 // ignoreFile : 忽略文件（文件名，包括扩展名） // ignorePath : 忽略目录 // ignoreType : 忽略文件类型 func GetAllFile(path string, files *[]string, targetType *[]string, ignoreFile *[]string, ignorePath *[]string, ignoreType *[]string) (err error) { if !isAllEmpty(targetType) && !isAllEmpty(ignoreType) { fmt...

2018-08-31

403

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

【转】前端——实用UI组件库

Angular UI 组件

ngx-bootstrap

NG-bootstrap

NG-ZORRO

NG-alain

NGX-admin

primeng

Vue组建库：

iView:

ElementUI （ 饿了么团队）：

Mint UI （饿了么团队）

Cube-ui (滴滴内部组件库)

Vue-ydui (YDUI Touch 的一个Vue2.x实现版本，专为移动端打造)

React组件：

Zent

移动端框架

SUI Mobile（阿里巴巴共享业务事业部UED团队）

Weui（微信官方设计团队）

YDUI Touch

GMU（百度GMU小组开发）

FrozenUI（QQVIP FD团队• Alloyteam团队）

Foundation

Amaze UI

Pure

PC 端 UI框架

SUI（阿里巴巴国际UED团队-商家业务事业部）

H-ui

layui

uiKit（YOOtheme 团队）

Bootstrap

jQuery UI

混合开发 UI框架

OnsenUI

ionic

Framework7

APP 框架（拓展）

react-native

weex

用PWA构建一个完全离线的网站

GO语言学习笔记（三） - 递归查找目录及子目录下的文件

相关文章

发表评论

资源下载

优质分享App

Mario

腾讯云软件源

Rocky Linux

欢迎您！

ElementUI （饿了么团队）：