aui-list为简便的列表布局容器,结合aui-meida-list、aui-form-list、aui-select-list
下边用图片构造的情势来介绍构造列表的运用
其余组成能够参见实例代码
上一篇主借使概略介绍到了AUI2.0的底蕴篇,前几日关键想共享下AUI2.0部分别样知识,重要归纳:音讯条、开关、标签/角标/圆点、列表构造,媒体列表。大家能够回想下上一篇:
初级篇 – 跨平台活动前端框架AUI 2.0
aui-btn + aui-btn-outlined 边框按键
默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 图标按钮 图标按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 块按钮类 - 默认增加10px底部外边距 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 块按钮类 - 默认增加10px底部外边距 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮
列表布局
aui-btn + aui-btn-primary 使用大旨样式
AUI 2015-07-13 22:31
能够完结媒体列表构造,表单及筛选器列表。
默认:标签
info:标签
primay:标签
danger:标签
success:标签
warning:标签
outlined: 线条样式的标签
outlined:标签
8
88
dot:
aui-btn 私下认可开关
标签/角标/圆点
aui-badge 右上角浮动角标,
aui-btn + aui-btn-block 块级开关
总结
简单的列表布局 Item1 Item2 Item3 带有右侧箭头 Item1 Item2 Item3 带有其他元素的列表 text 信息 label 标签 dot badge 88 badge progress range switch radio checkbox bar-btn 带有图标、底线缩进 这是一个列表项 这是一个列表项 这是一个列表项 媒体列表 媒体布局aui-media-list是与aui-list结合使用的一种形式,可以实现有图片,多行文字等的布局样式,结合栅格系统可以实现更多布局效果 图文列表 带有媒体的列表一 08:00 这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。 带有媒体的列表二 08:00 在下方我们加入了aui-info信息条 流浪男 2015-07-14 10:31 带有媒体的列表二 08:00 这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。 流浪男 2015-07-14 10:31 媒体项右侧显示 这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。 多张图片列表一 借助栅格来实现图片列表 多张图片列表一 借助栅格来实现图片列表 通讯录样式列表 AUI 08:00 www.auicss.com 流浪男
前日第一介绍到此处,下一章节介绍:表单应用。
2.0中按键依照Google Material 设计规范提供了五个色值的体裁
暗许使用垂直居中。具体职能能够查看应用软件演示中的案例
aui-label 同按键相近,私下认可提供了多少个色值
aui-label + aui-label-primary 使用主旨样式
aui-btn + aui-btn-block + aui-btn-sm 大号块级按键
消息条 aui-info
实现的效率在大好些个APP中是比非常多如牛毛的,在AUI中能够停放任何列表容器内利用。比如能够兑现存头像,外号,其余音讯的横向结构样式。
按钮
aui-dot 右上角圆点