×

基础知识 - 跨平台移动前端框架AUI 2.0

作者:Terry2016.09.18来源:Web前端之家浏览:41675评论:0
关键词:移动框架AUI

aui.png

上一篇主要是大概介绍到了AUI2.0的优势,今天主要想分享下AUI2.0一些基础知识,主要包括:AUI2.0概述、基本结构/辅助元素、布局容器、文本样式、导航栏、底部工具栏、按钮组工具栏、TAB切换工具栏。我们可以回顾下上一篇:  介绍篇 - 跨平台移动前端框架AUI 2.0

AUI 2.0是一套全新的AUI框架,在1.X基础上进行了重新架构。结合实际项目出发,站在开发者和项目的角度,重新定义AUI框架。在2.0中使用了大量弹 性响应式布局,采用容器+布局结构+控件的嵌套形式,方便开发者快速布局样式。我们充分吸取了AUI使用者的反馈意见和借鉴了市场上其他优秀UI框架,完 成了2.0版本的开发。2.0遵循Google Material 设计规范,使用MIT开源协议。

在2.0中,全局使用rem控制尺寸,完美适应不同分辨率移动设备;新加入的主题样式表方便开发者自定义基础颜色样式,完成APP主题的定制。完美兼容IOS 5.1+ 到Android 4.2+。

rem说明

html默认定义的尺寸为20px,那么1rem=20px;开发者在定义尺寸及字号时可以根据此比例来控制,比如,14px = 0.7rem*20。

<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>AUI快速完成布局</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />

2.0版本中布局结构更要严谨和灵活。

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

aui-list和aui-card-list为列表类布局容器

aui-row 栅格布局容器

aui-grid 宫格布局容器

aui-bar 定义工具栏类

......

同时我们也提供了一些常用的样式来辅助布局

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

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

aui-hr 水平线

aui-padded-位置-数值 : 控制某个方向的内边距剧,位置有t(顶部),b(顶部),l(左侧),r(右侧),数值有0,5,10,15

aui-margin-位置-数值,控制某个方向的外边距,位置有t(顶部),b(顶部),l(左侧),r(右侧),数值有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-pull-left 左对齐

aui-pull-right 右对齐

aui-show 显示

aui-hide 隐藏(隐藏容器不占空间)

aui-invisible 隐藏(隐藏后继续占用布局空间)

aui-mask 遮罩层,层序为8

常用色值的对应

default      #212121

primary      #00bcd4

success      #009688

info              #03a9f4

warning      #ffc107

danger       #e51c23

pink             #e91e63

purple         #673ab7

indigo          #3f51b5

2.0中内容容器有.aui-content和.aui-content-padded,建议在所有外层容器中使用

.aui-content
.aui-content-padded 有0.75rem(15px)的外边距
对比1.x版本,aui-content去掉了margin-bottom的15px;

基础文本样式.

同时按照Google Material色彩规范提供了几个固定色值

.aui-text-default      #212121
.aui-text-primary     #00bcd4
.aui-text-success     #009688
.aui-text-info            #03a9f4
.aui-text-warning    #ffc107
.aui-text-danger     #e51c23
.aui-text-pink           #e91e63
.aui-text-purple       #673ab7
.aui-text-indigo       #3f51b5

看下代码:

<section class="aui-content-padded">
    <h1>标题一 H1</h1>
    <h2>标题二 H2</h2>
    <h3>标题三 H3</h3>
    <h4>标题四 H4</h4>
    <h5>标题五 H5</h5>
    <h6>标题六 H6</h6>
    <p>P标签字体,默认为14px</p>
    <div class="aui-content">
        内容区域,AUI 2.0色彩及尺寸按照Material Design标准设计
    </div>
</section>

显示效果:

1.png

2.0版本中导航栏分蓝色调和浅色调,支持嵌套按钮,tab切换栏等其他控件。

为了兼容APICloud状态栏沉浸式的处理,当导航栏中只有中间文字或者tab等时,请不要使用.aui-title

案例代码:

<header class="aui-bar aui-bar-nav">顶部导航栏</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <a class="aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">fixStatusBar效果</div>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>返回
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-menu"></span>
    </a>
    <div class="aui-title">Title</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>
</header>

效果如下:

2.png

aui-bar + aui-bar-tab组合实现,可以实现固定在底部的工具栏,可以结合aui-tab.js来使用

aui-bar-tab-item为子级元素

aui-active选中时样式

<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item aui-active" tapmode>
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">首页</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="aui-iconfont aui-icon-star"></i>
        <div class="aui-bar-tab-label">收藏</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-badge">99</div>
        <i class="aui-iconfont aui-icon-cart"></i>
        <div class="aui-bar-tab-label">购物车</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-dot"></div>
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>

效果如下:

3.png

aui-bar + aui-bar-btn组合使用,结合aui-tab.js可以实现有切换功能的按钮组,也可以实现数字增减器的效果,具体实例可以查看代码

aui-bar-btn-item为子级容器

aui-bar + aui-bar-btn + aui-bar-btn-full 为满屏效果

aui-bar + aui-bar-btn + aui-bar-btn-sm 小号按钮组

aui-bar + aui-bar-btn + aui-bar-btn-round 两侧为半圆形

在顶部导航栏使用时,考虑到APICloud状态栏沉浸式样式的兼容,当导航栏只有该按钮组是直接aui-bar容器内放置按钮组。当出现左右图标时需放置在aui-title容器内。具体效果可以参考代码使用

代码如下:

<div class="aui-bar aui-bar-btn aui-bar-btn-full">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn aui-bar-btn-sm aui-bar-btn-full">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn" style="width:80%;">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn" style="width:80%;" type="count" id="demo">
    <div class="aui-bar-btn-item aui-font-size-20">
        <i class="aui-iconfont aui-icon-minus"></i>
    </div>
    <div class="aui-bar-btn-item">
        <input type="number" class="aui-input aui-text-center" id="count" value="1">
    </div>
    <div class="aui-bar-btn-item aui-font-size-20">
        <i class="aui-iconfont aui-icon-plus"></i>
    </div>
</div>
<div class="aui-bar aui-bar-btn aui-bar-btn-round" style="width:45%;">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<header class="aui-bar aui-bar-nav aui-margin-b-15">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
            <div class="aui-bar-btn-item">栏目三</div>
        </div>
    </div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
        </div>
    </div>
</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <div class="aui-bar aui-bar-btn aui-bar-btn-round">
        <div class="aui-bar-btn-item aui-active">栏目一</div>
        <div class="aui-bar-btn-item">栏目二</div>
    </div>
</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <a class="aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
        </div>
    </div>
</header>

效果如下:

4.png

aui-tab 是一种比较常见的切换菜单样式,可以结合aui-tab.js来使用

aui-tab为外层容器

aui-tab-item 为子级容器

aui-active为选中时样式

代码如下:

<div class="aui-tab" id="tab">
    <div class="aui-tab-item aui-active">Item1</div>
    <div class="aui-tab-item"><div></div>Item2</div>
    <div class="aui-tab-item">Item3</div>
    <div class="aui-tab-item">Item4</div>
</div>

效果如下:

5.png

总结

看完以上几部分,是不是觉得有点眉目了呢,其实跟jQuery Mobile有点相似,但是代码精简很多,好吧,今天就介绍到这里了,下篇:AUI2.0中级篇。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/mobile-aui2.html

网友评论文明上网理性发言 已有0人参与

发表评论: