Plane UI 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Plane UI 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript HTML/CSS
操作系统: 跨平台
收录时间: 2015-06-29
提 交 者: 叛道

Plane UI,意为纸飞机或平面 UI,即 P(aper) (P)lane UI 的缩写,是一个构建 HTML5 应用的跨终端响应式前端界面框架及解决方案。

设计理念

  • 简单通用,高效开发;

  • 模块化,低耦合;

  • 移动优先,优雅降级;

  • 美学追求,交互为本;

  • 持续演进,拥抱新技术;

主要特性

  • 基于 HTML5 + CSS3:移动优先,快速开发跨终端响应式 Web 应用;

  • 交互美学:扁平化风格,借鉴和溶合 Google Material Design 部分设计风格及规范,同时又有自己的风格;

  • 按需定制:样式语义化,使用 SCSS 预处理样式;

  • 基于 jQuery:更高的开发效率,方便使用各种 jQuery 插件;

  • 丰富的组件:自带大量常用的组件,并向 Web Components 演化;

  • 组件模块化:遵循 CommonJS 规范,支持 AMD / CMD 各种模块化加载工具;

  • 命名空间: CSS 前缀式命名空间;

  • 优雅降级:向下“基本”兼容到 IE8 ;

注:IE8 下支持基本的内容和样式渲染和部分交互。

Bower 安装:

bower install planeui

使用方法

<link rel="stylesheet" type="text/css" href="dist/css/planeui.min.css" />
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.js"></script>

兼容IE8~9 的用法(基本的内容渲染或不完全的支持,不过还是建议不考虑兼容 IE8):

<link rel="stylesheet" type="text/css" href="./dist/css/planeui.min.css" />

<!--[if (gte IE 9) | !(IE)]>
<!--><script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.patch.ie8.min.js"></script>
<![endif]-->

<!--[if lt IE 10]>
<script type="text/javascript" src="./dist/js/planeui.patch.ie9.min.js"></script>
<![endif]-->

<script type="text/javascript" src="./dist/js/planeui.js"></script>

响应式网格布局:

尺码 分辨率 描述
xs * 所有屏幕(或手机竖屏)
sm 640px及以上 手机横屏等
md 768px及以上 平板电脑(iPad)竖屏等
lg 992px及以上 平板电脑(iPad)横屏、PC 机、笔记本等
xl 1200px及以上 PC 机、笔记本等
xxl 1400px及以上 PC 机、笔记本等

 

整体布局及限定最大宽度:

<div class="pui-layout pui-layout-fixed"></div>

.pui-layout-fixed即限定最大宽度为960px,其他宽度限定:pui-layout-fixed-980 pui-layout-fixed-1000 pui-layout-fixed-1200 pui-layout-fixed-1360 pui-layout-fixed-1400 pui-layout-fixed-1500 pui-layout-fixed-1600 pui-layout-fixed-1700 pui-layout-fixed-1800,通过媒体查询当前的屏幕宽度响应对应最大宽度。

12 等分网格布局示例:

<div class="pui-grid">
    <div class="pui-row">
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-4"></div>
        <div class="pui-grid-xs-4"></div>
        <div class="pui-grid-xs-4"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-6"></div>
        <div class="pui-grid-xs-3"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-5"></div>
        <div class="pui-grid-xs-7"></div>
    </div>
</div>

Flexbox 弹性布局示例(不支持 IE9 及以下版本):

<div class="pui-flexbox pui-flex-column">
    <header>标题栏</header>
    <div class="pui-flex">内容层</div>
    <footer>底栏</footer>
</div>

更多示例及用法详见:https://pandao.github.io/planeui/

组件列表

  • Arrow

  • Article

  • App Layout

  • Animations

  • Basic

  • Badge / Label / Tag

  • Button

  • Button Sheet

  • Breadcrumb

  • Card

  • Colors (Material Design Colors)

  • Color Picker (Material Design Color Picker)

  • Checkbox

  • Close Button

  • Comment

  • Dialog

  • Date Picker(未实现)

  • Fonts

  • Font sizer

  • File Input

  • FullPage

  • Flexbox Layout

  • Forms

  • Form Validator

  • Grid Layout

  • Gallery (未实现)

  • Icons (自带 Font Awesome 和 手机淘宝图标库两套图标库)

  • Image

  • List

  • ListView

  • Loading

  • Menu

  • Menubar

  • Menu Accordion

  • Mask

  • Notice

  • Pagination

  • Progress

  • Rating

  • Radio Button

  • Ring Progress

  • Search

  • Slider(未实现)

  • Switch Button

  • ScrollTo (Anchor + Container)

  • SideNav / Side slide (Off Canvas Plus)

  • Tab

  • Texts

  • Table

  • Top10

  • Tooltip

  • Timeline

  • Time Picker(未实现)

  • Uploader(未实现)

  • Z-Depth (Material Design Z-Depth)

依赖项目及致谢

1、依赖项目

2、参考项目

3、构建工具

注:以上所有项目排名不分先后。

兼容支持情况

Plane UI 对浏览器进行了分级支持 (GBS,即 Graded Browser Support,分级浏览器支持),优先支持那些支持 HTML 5、CSS3、ES5 / 6 等新特性的现代浏览器。

A > B > C > D

级别 浏览器 描述
A 级 Webkit 系(Chrome 31+、Safari 7+、Opera 29+等) 完整的渲染和交互支持
  Android 4.2+ 浏览器(自带、UC、QQ、Chrome等)  
  iOS Safari 7.1+  
  Firefox 31+  
  桌面 IE10+、WP 8.1+ IE  
B 级 iOS 6.x 浏览器 基本完整的支持,部分支持不完善
  Android 2.3.x+ 浏览器  
  Firefox 旧版本  
  Opera 旧版本(非 Chromium)  
  IE9、WP IE  
C 级 IE8、Android 2.2.x+ 浏览器 部分基本支持,基本内容的渲染
D 级 其他浏览器(IE6~7等) 部分基本支持或不支持

兼容支持测试:

  • iOS 7+

  • Android 4.2+

  • Chrome (latest)

  • Firefox (latest)

  • Safari 6+

  • Opera (latest)

  • Internet Explorer 9+

IE 9 下因为它本身不支持部分 HTML5 特性(例如动画、Flexbox等)的原因,不太完美的支持。 IE 8 只是提供最基本的兼容支持,有部分不支持、不完善或兼容性差。 IE 7 及以下版本、Window Phone 等平台或浏览器均未测试。

其他环境的兼容测试:

  • Node-webkit

  • Phonegap

注:由于条件的限制,Android 和 iOS 的其他版本暂时未测试,欢迎使用者反馈和提交 Bug。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

Plane UI 的相关资讯

还没有任何资讯

Plane UI 的相关博客

NX二次开发-UFUN拾取平面对话框UF_UI_specify_plane

1 #include <uf.h> 2 #include <uf_ui.h> 3 4 5 UF_initialize(); 6 7 //拾取平面对话框 8 double orienta...

plane It's easily their heaviest

plane It's easily their heaviest

CF576C Points on Plane 构造

正解:构造 解题报告: 先放下传送门趴QAQ 话说我jio得这题好玄学啊,,,就是,我实在觉得我这题做得完美无缺了?可就是过不去,,,而...

Talika gnome-plane 小工具

http://gnome-look.org/content/show.php/Talika+applet?content=118267 和win7一样 能将任务栏上的程序以图标显示 节省空间 ...

PCL1.8.1 分割 - Plane model

通过平面进行分割,代码中随机生成z=1平面上的点,修改三个点的z!=1,使用平面分割保留z=1上的点。 http://www.pointclouds...

106_object_detection_infer_plane

飞机目标检测 参考 源码notebook,https://github.com/databooks/databook/tree/master/gis/iobjectspy10 iObjects 10使用,使...

平面(Plane)和四方形(Quad)

平面(Plane) 这是一个10个单位长度的正方形平面,坐标是XZ轴平面里,可以使用整个四方形的纹理来贴图。平面常用来表示地面和...

107_object_detection_workflow_plane

目标检测训练 参考 源码notebook,https://github.com/databooks/databook/tree/master/gis/iobjectspy10 iObjects 10使用,使...

I. Game on Plane(SG函数 博弈论)

题目链接 题目描述 给你n个节点的凸包(未连线),每次选择两个点连一条线,不能与之前出现的线有相交。当出现一个凸包的时候...

Cesium源码剖析---Clipping Plane

  之前就一直有写博客的想法,别人也建议写一写,但一直没有动手写,自己想了一下原因,就一个字:懒、懒、懒。为了改掉这个...

Plane UI 的相关问答

还没有任何问答,马上提问

评论 (3)

加载中
大家好,有关手机淘宝上通过拍照识别图片并返回给用户相似的商品的功能, 如何技术实现?或者淘宝有开放的sdk或api吗? 希望淘宝工作人员能及时给我发邮件,或者哪个技术大牛这个技术细节, 可以跟我发邮件。我的邮箱是:937801683@qq.com
2018/10/11 11:29
回复
举报
死不死 Dialog系列竟然只支持IE 死不死
2017/02/22 02:53
回复
举报
表格这一块功能太弱了 #Plane UI#
2015/12/12 09:37
回复
举报
更多评论
3 评论
171 收藏
分享
返回顶部
顶部