跨平台移动前端框架AUI

上一篇主要是大概介绍到了AUI2.0的基础篇,今天主要想分享下AUI2.0一些其他知识,主要包括:信息条、按钮、标签/角标/圆点、列表布局,媒体列表。我们可以回顾下上一篇:
初级篇 – 跨平台移动前端框架AUI 2.0

上一篇主要是大概介绍到了AUI2.0的中级篇,主要包括:信息条、按钮、标签/角标/圆点、列表布局,媒体列表,今天主要想分享下AUI2.0的表单用法。我们可以回顾下上一篇:
中级篇 – 跨平台移动前端框架AUI 2.0

信息条 aui-info
实现的效果在大多数APP中是比较常见的,在AUI中可以放置其他列表容器内使用。比如可以实现有头像,昵称,其他信息的横向布局样式。

表单

默认使用垂直居中。具体效果可以查看APP演示中的案例

aui-form-list是与aui-list结合实现的表单列表的布局形式

  AUI  2015-07-13 22:31
  带有输入框    Text          Password          Number          Radio    选项一  选项二       Select    Option1 Option2 Option3        Switch          Range            Textarea         提交 取消     带有图标的表单                          带有单选或多选框的列表      这是一个列表项  这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。       这是一个列表项      这是一个列表项      这是一个列表项      选项一  选项二      这是一个列表项      禁止选择      这是一个列表项   

按钮

选择器列表

2.0中按钮按照Google Material 设计规范提供了多个色值的样式

aui-select-list和aui-list结合可以实现带有选择器的列表布局样式

aui-btn 默认按钮

  带有单选或多选框的列表      这是一个列表项  这里是内容区域,新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。       这是一个列表项      这是一个列表项      这是一个列表项      选项一  选项二      这是一个列表项      禁止选择      这是一个列表项   

aui-btn + aui-btn-primary 使用主题样式

总结

aui-btn + aui-btn-block 块级按钮

这就是今天要分享的AUI2.0表单的基础知识,是不是很简单呢,下一节排版列表和布局。

aui-btn + aui-btn-outlined 边框按钮

aui-btn + aui-btn-block + aui-btn-sm 小号块级按钮

其他组合可以参考实例代码

  默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 图标按钮 图标按钮  默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 块按钮类 - 默认增加10px底部外边距 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮  默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 块按钮类 - 默认增加10px底部外边距 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮 默认按钮
You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图