开始使用 布局容器和栅格系统 文字样式 背景颜色 按钮 标签、角标、红点 图标 单选、多选、开关 进度条 顶部导航 底部工具栏 底部工具栏扩展 表单 列表 卡片列表 宫格布局 弹性布局 时间轴 聊天气泡 信息条 提示条 仿微信首页 仿微信朋友圈 仿今日头条 仿知乎首页 仿淘宝首页 会员中心首页一 会员中心首页二 订单列表首页 弹窗 Dialog 弹窗 Toast 弹出菜单 底部弹出框 底部分享盒子 下拉刷新 轮播组件 滚动监听 按钮组工具栏 搜索条 滑块 Tab切换栏 折叠面板 图片懒加载 自定义主题样式 列表左滑删除

开始使用

下载地址

点击下载(V2.1)

AUI介绍

以下内容摘抄自流浪男的GitHub,虽然为APICloud而打造的UI框架,但是h5依然可以使用。

移动端UI快速布局解决方案,一个靠谱的高性能移动前端框架。

AUI是为APICloud而打造的一个单纯UI框架,体积小,方便用户扩展和自由组合,摆脱繁琐的html标签布局。

AUI为一款轻量级前端UI框架,更偏重于CSS布局及样式的构造,通俗易懂的写法及模块式的拼装方便用户自由扩展。轻小的体积、灵活的扩展性,大大提高移动端项目的体验度和开发效率。

AUI 2.x版本是整个版本更新中的一个里程碑,结合实际项目出发,站在开发者和项目的角度,重新定义AUI框架。在2.0中使用了大量弹性响应式布局,采用容器+布局结构+控件的嵌套形式,方便开发者快速布局样式。2.0遵循Google Material设计规范,使用MIT协议开源。

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

AUICSS的GitHub项目地址

AUI概览

在布局H5样式时,为了确保绘制和缩放的效果需要在 <head> 标签中添加 viewport 元数据标签

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

同时添加 format-detection,防止ios机型将连续数组转为手机号码

<meta name="format-detection" content="telephone=no"/>

加载上 aui.css 样式表,享受编程之美。

<link rel="stylesheet" type="text/css" href="./css/aui.css" />