官网:https://www.iviewui.com/
GitHub:https://github.com/iview/iview
iView
是一套基于Vue.js
的开源UI
组件库,主要服务于PC
界面的中后台产品,比如某产品的运营平台、数据监控平台、管理平台等,从工程配置、到样式布局,甚至后面规划的业务套件,是一整套的解决方案,所以它可能不太适合一些to C
的产品,比如 QQ空间 这类的。
注意:2019年10月起正式将iView更名为View UI
特性
- 丰富的组件和功能,满足绝大部分网站场景
- 提供开箱即用的管理员系统和高阶组件库,极大程度地节省开发成本
- 提供专业,优质的一对一技术支持
- 友好的API,自由灵活地使用空间
- 细致,漂亮的UI
- 事无巨细的文档
- 可自定义主题
因为 iView 目前是在 webpack 下使用的,所以你可以使用 webpack 丰富的插件和个性化配置。iView 也是使用了 ES2015 开发。iView 一个最大的特点,就是我们从使用者和场景出发来设计 API,这点后面会重点讲到。它的文档也是相当详细,每个功能都配有详细说明和实例代码,直接复制就可以使用,我们也计划在明年启动英文文档翻译计划。在开发组件时,我们阅读了很多已有组件库的代码,取长补短,实现代码的高质量。
版本及兼容
目前
iView
可以直接通过npm
安装,很快将发布一个重要版本 0.9.7,在这个版本中,我们对大部分组件的UI
进行了调整和优化,也丰富了很多组件的功能。由于Vue
本身原因(这里不展开),iView
只能兼容到IE9+
,表现最好的是Chrome
、Safari
、Firefox
,有些功能和动画不能在IE
下得到兼容。这也和使用场景有关,一般to B
的产品,我们可以要求客户去使用高级浏览器。
计划
下图为1.x的计划
24栅格系统
iView
借鉴了Bootstrap
和Ant.Design
的栅格系统,支持每行最多容纳 24 列的布局,栅格系统对高级浏览器支持Flex
布局,包括Flex
对齐、Flex
排列、Flex
顺序,也支持栅格的排序、偏移、间隔。友好栅格系统对页面的拆分布局起到了关键作用,你可能不用再写任何布局代码就可以轻松使用栅格完成你的需求,而且它很精准。
事无巨细的文档
iView 在文档编写上也是做到了事无巨细(由于文档用了一套相对重的方案来实现实例和代码的友好分离,故目前没有将文档开源,我们会在明年实现一个更好地提交文档bug及翻译的方案),每个组件的每个功能都有非常详细的说明,包括像哪些参数需要.sync使用,一些隐藏的功能、可能遇到的坑等等,同时每个 demo 都有完整的代码示例,一键复制,粘贴后就可以直接看到效果。API 也按照 props、events、slot 三部分拆分,避免混合说明遗漏和阅读不便利。iView 的文档是目前所有同类文档里最为详细的,也受到了很多开发者的好评,所以我们仍会在文档开发的工作上保持高产出。
高质量,功能丰富
分页组件 Page:
分页组件从功能上借鉴了 Ant.Design,支持智能折叠页码(页码过多时,会左右折叠)、页码快进(点击···会快进或快退5页)、切换每页显示条数、电梯,同时还有迷你模式(支持所以普通模式的功能)和简介模式。
选择器组件 Select
与浏览器原生不同的是,首先 UI 统一而且很好看,这是大部分模拟 select 的主要原因,其次功能更加强大,支持单选、多选,键盘的快捷操作,还支持搜索、自定义模板、分组,以及大中小三种尺寸(iView 很多表单类组件都提供了不同的尺寸),在单选时还可以清空选项。
网友评论