跨平台移动前端框架AUI

上一篇主假诺差十分的少介绍到了AUI2.0的表单,前不久第一想分享下AUI2.0的列表和制版布局。大家能够回忆下上一篇:
表单篇 – 跨平台活动前端框架AUI 2.0

上一篇主若是大致介绍到了AUI2.0的优势,前几天第一想享受下AUI2.0部分根底知识,首要包含:AUI2.0概述、基本布局/支持成分、布局容器、文本样式、导航栏、尾部工具栏、开关组织工作具栏、TAB切换工具栏。我们得以回顾下上一篇:
介绍篇 – 跨平台活动前端框架AUI 2.0

卡片列表

AUI2.0概述

卡牌列表在APP中是比较不计其数的布局样式,能够组成栅格系统达成完美的结构样式,如和讯等页面情势。

AUI
2.0是一套崭新的AUI框架,在1.X根基上开展了重新布局。结合实际项目出发,站在开拓者和体系的角度,重新定义AUI框架。在2.0中使用了大气弹性响应式布局,采纳容器+结构架构+控件的嵌套方式,方便开荒者飞快布局样式。大家尽量吸收了AUI使用者的反映意见和借鉴了市镇上任何特出UI框架,实现了2.0版本的付出。2.0如约GoogleMaterial 设计规范,使用MIT开源合同。

   卡片布局头部区域   内容区域,卡片列表布局样式可以实现APP中常见的各类样式   底部区域     卡片布局头部区域      2016年7月12日     卡片布局头部区域                           AUI 1天前  北京朝阳       666  888  888      最近联系人            AUI 08:00   www.auicss.com           流浪男       查看更多  

在2.0中,全局使用rem调节尺寸,完美适应区别分辨率移动设备;新投入的核心样式表方便开垦者自定义功底颜色样式,达成应用程式主旨的定制。完美宽容IOS
5.1+ 到Android 4.2+。

弹出美食指南

rem说明

aui-popup为弹出美食指南样式,结合aui-popup.js来行使调节。弹出美食指南思谋到客户自定义性,并未有包装到js里面,js里面只是提到了弹出效果与利益。供给给

html默断定义的尺码为20px,那么1rem=20px;开辟者在概念尺寸及字号时能够依附此比例来决定,比如,14px
= 0.7rem*20。

开关扩展aui-popup-for=”弹出层容器id”属性来涉及弹出美食指南。

AUI赶快到位布局

 左上角 顶部中间 右上角 左下角 底部中间 右下角         会员中心        会话消息        我的收藏             会员中心        会话消息        我的收藏             会员中心        会话消息        我的收藏             会员中心        会话消息        我的收藏             会员中心        会话消息        我的收藏             会员中心        会话消息        我的收藏     var popup = new auiPopup(); function showPopup(){ popup.show(document.getElementById("top-right")) }

骨干构造/协助成分

栅格系统

2.0版本中布局布局更要谦善严谨和灵活。

栅格系统在2.0版本中做了改善。栅格系统接纳12等遍布局

aui-content和aui-content-padded作为AUI整个框架中的外层容器

aui-row 栅特别层容器,子级无间距

aui-list和aui-card-list为列表类构造容器

aui-row-padded 栅至极层容器,子级有间距

aui-row 栅格布局容器

aui-col-xs-

aui-grid 宫格构造容器

暗中同意12等分布局中不恐怕直接达成5等分,为此投入了aui-col-5 为促成五等分效用

aui-bar 定义工具栏类

宫格结构

並且我们也提供了一部分常用的样式来救助布局

宫格结构是整合栅格系统得以达成的一种构造方式

aui-ellipsis-1 单行文字,超过自动省略

aui-grid 宫格容器

aui-ellipsis-2 两行文字,超过自动省略

   88  首页    设置    地图    日历     日期     购物车      首页    设置    地图    日历    日期    购物车    发现    视频  

aui-padded-地点-数值 :
调整某些方向的内边距剧,位置有t,数值有0,5,10,15

搜索框

aui-margin-地点-数值,调整某些方向的异域距,位置有t,数值有0,5,10,15

    取消

aui-font-size-数值,文字大小,数值有12,14,16,18,20

进度条

aui-text-颜色名,字体颜色,颜色名有
default,primary,success,info,warning,danger,pink,purple,indigo

进程条去掉了前面包车型地铁有余色值

aui-bg-颜色名,背景颜色,颜色名有
default,primary,success,info,warning,danger,pink,purple,indigo

aui-progress 默认

aui-pull-left 左对齐

aui-progress-sm 小号

aui-pull-right 右对齐

aui-progress-xs 特小

aui-show 显示

aui-progress-xxs 极小

aui-hide 隐藏

 .aui-progress    .aui-progress-sm    .aui-progress-xs    .aui-progress-xxs   

aui-invisible 隐藏

总结

aui-mask 遮罩层,层序为8

即日就享受到那边,下节牵线内容:页面人机联作。

常用色值的相应

default #212121

primary #00bcd4

success #009688

info #03a9f4

warning #ffc107

danger #e51c23

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图