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 右上角圆点

相关文章

网站地图xml地图