前端UI库_ui组件库怎么用

前端 (5) 2024-06-10 08:23

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
前端UI库_ui组件库怎么用,希望能够帮助你!!!。

现在许多项目讲究出快活,除特殊定制ui外,均为采用现有的ui框架开发,现将框架整理如下。

matrial UI
Material-UI实现了Google’s Material Design设计规范的react组件库。
兼容性
IE    Edge    Firefox    Chrome    Safari
11    >= 14    >= 45    >= 49    >= 10

bootrap
Bootstrap是Twitter推出的一个用于前端开发的开源工具包,目前版本有2,3,4,最新版本v4.1
支持less、sass等css预扩展语言
支持mobile app,v3的兼容性如下
Platform    Chrome    Firefox    Safari
Android    Supported    Supported    N/A
iOS    Supported    Supported    Supported
- v3在桌面端的兼容性如下:

Chrome    Firefox    Internet Explorer    Opera    Safari
Mac    Supported    Supported    N/A    Supported
Windows    Supported    Supported    Supported    Supported

React Suite
React Suite 是 一套 React 组件库,为后台产品而生。
兼容性:
IE    Edge    Firefox    Chrome    Safari
>=10    >=14    >= 45    >= 49    >= 10
- IE<=9 is no longer supported since RSUITE 3.0. 
RSUITE is designed and implemented for use on modern desktop browsers rather than mobile browsers.

Element UI
一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
支持现代浏览器和ie 10+.
sui
SUI 是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。 
通过SUI,可以非常方便的设计和实现精美的页面。
目前是商家后台系统的设计规范和前端组件库。 

sui Mobile
SUI Mobile 主要借鉴 Framework7 的形态并以此为基础,参考Ratchet、Ionic、Onsen各种不同的思路,强化功能,精简体积,并提供国内最稳定快速的CDN支持。此外还定制增强了一些工具类开源库。
兼容到 iOS 6+ 以及 Android 4.0+
pure.css
Pure.css一个响应式、轻量型的css模块,样式比较简约清新。 

weui
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 

jquery weui
jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。
jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。
jQuery WeUI 提供了总共30+ 个非常实用的组件:列表,表单,卡片,对话框,下拉刷新等。
frozenUI
FrozenUI 是一套基于移动端的UI库。它非常轻量、精美,遵从手机设计规范,提供了表单、对话框、列表等常用组件。此外,FrozenUI还提供文字截断、1px边框、rem、两端留白等常用场景的解决方案。CSS做得更模块化和颗粒化,使用sass编写CSS代码,你完全可以按照实际情况按需加载。 

Amaze UI
Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。
Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。
Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。 

Amaze UI Touch
基于 React.js 的移动端 Web 组件库

Amaze UI Dingding
界面风格与钉钉设计规范完全统一的移动端web组件库
可以帮助企业开发者,快速开发出钉钉微应用系统
Aui
一款轻量级前端UI框架,更偏重于CSS布局及样式的构造,通俗易懂的写法及模块式的拼装方便用户自由扩展。轻小的体积、灵活的扩展性,大大提高移动端项目的体验度和开发效率。
在2.0中,全局使用rem控制尺寸,完美适应不同分辨率移动设备
提供定制服务
Mui
高性能App的框架,也是目前最接近原生App效果的框架。
以iOS 7为基础,补充部分Android特有控件 

Framework7
Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具,可以迅速创建一个应用的原型。
Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。
Framework7 是完全免费开源的。
Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。
light7
轻量级的、简单的ui框架for webapp
IOS7风格的组件 

iview
iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。
兼容性: 
Supports Vue.js 2.x
Supports Vue.js 1.x - visit 1.0 docs
Supports SSR
Supports Nuxt.js
Supports Electron
iView does not support IE8 or 
below since Vue.js uses Object.defineProperty to track changes which is not supported by these browsers.
iview-admin
iView Admin 是基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案 

layui
一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.
LayIM是我们目前唯一的付费组件,所以在你下载的layui包里,并不包含LayIM
layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。
提供模板下载
Lulu UI
上手简单:会简单HTML和jQuery就可以上手
所有UI组件都是支持retina显示的。主要应用了CSS生成技术,以及SVG的处理。
且每个组件的小图标独立使用,不耦合,使用base64技术,减少无谓的额外http请求,IE7/IE8使用图片向下兼容。 

NG-ZRROR
Ant Design 的 Angular 实现,开发和服务于企业级后台产品
现代浏览器和 IE9 及以上(需要 polyfills)
支持 Angular ^6.0.0 版本
Easyui
easyui是一种基于jQuery的用户界面插件集合
一个完美支持HTML5网页的完整框架
JavaServer Faces (JSF)
用于构建Java Web 应用程序的标准框架,提供了一种以组件为中心来开发 Java Web 用户界面的方法,从而简化了开发。

其他常用css
重置浏览器默认样式 
reset css
normal css
主要区别在于: 
CSS重置旨在删除所有内置的浏览器样式。像H1-6,p,strong,em等标准元素看起来完全一样,完全没有装饰。那么你应该自己添加所有的装饰。
标准化CSS旨在使浏览器内置的浏览器样式保持一致。像H1-6这样的元素将会在浏览器中以一致的方式显示为粗体,大小等等。那么你应该只添加你的设计所需的装饰差异。
--------------------- 
作者:tonyhzw 
来源:CSDN 
原文:https://blog.csdn.net/datou0529/article/details/ 
版权声明:本文为博主原创文章,转载请附上博文链接!

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复