官方公告

官方公告

最新动态,版本发布
开发讨论

开发讨论

与前端大神一起探索
技术分享

技术分享

你的开发加油站
问题反馈

问题反馈

非常抱歉,AUI会有一些bug,感谢反馈给我们

还缺少一个下拉选择功能

开发讨论无忧特购 回复了问题 • 2 人关注 • 1 个回复 • 312 次浏览 • 2016-04-16 00:44 • 来自相关话题

说说大家的都是做啥的

开发讨论layen 回复了问题 • 2 人关注 • 2 个回复 • 257 次浏览 • 2016-04-13 21:22 • 来自相关话题

AUI问题反馈问题说明

回复

问题反馈流浪男 发起了问题 • 2 人关注 • 0 个回复 • 381 次浏览 • 2016-04-13 15:19 • 来自相关话题

让你的APP边框显示原生的1px

技术分享流浪男 发表了文章 • 1 个评论 • 659 次浏览 • 2016-04-13 14:38 • 来自相关话题

面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉,比如这个border。怎样让1px更细,看起来像原生的?下面教大家一个方法
.border {
position: relative;
width: 300px;
height: 200px;
}
.border:after {
border: 1px solid #ff3300;
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。

PS:特别说明


千万别漏下了pointer-events: none;要不然就没法点击了
 
原文链接:http://www.liulangnan.com/archives/68 查看全部
面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉,比如这个border。怎样让1px更细,看起来像原生的?下面教大家一个方法
.border {
position: relative;
width: 300px;
height: 200px;
}
.border:after {
border: 1px solid #ff3300;
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}
如果是想要上边框或者下边框。。。那么只需要修改border:after里面的border就可以了。


PS:特别说明



千万别漏下了pointer-events: none;要不然就没法点击了
 
原文链接:http://www.liulangnan.com/archives/68

【最新】AUI仿饿了么订单页面模板

技术分享流浪男 发表了文章 • 6 个评论 • 1796 次浏览 • 2016-04-13 14:27 • 来自相关话题

利用AUI Flex布局完成的放饿了么订单界面

图片效果及下载




 
利用AUI Flex布局完成的放饿了么订单界面

图片效果及下载
IMG_2107.PNG

 

前排占座,快来占楼

回复

开发讨论福尔摩斯 发起了问题 • 1 人关注 • 0 个回复 • 248 次浏览 • 2016-04-13 14:14 • 来自相关话题

哎哟不错哦

回复

开发讨论半颗糖 发起了问题 • 0 人关注 • 0 个回复 • 258 次浏览 • 2016-04-13 14:12 • 来自相关话题

AUI在APICloud项目开发中注意事项

开发讨论流浪男 发表了文章 • 5 个评论 • 643 次浏览 • 2016-04-13 14:09 • 来自相关话题

AUI已经帮助了很多开发者完成了项目的开发中,感谢大家一路的支持。AUI在为了兼容APICloud的同时,考虑微信、钉钉等其他移动端的开发作了几处特别处理,因此在APICloud中有几处特别注意事项。常见问题:


一、云编译打包后线条错位
       AUI的1px线条为了达到原生效果同时兼容不同显示屏作了特别处理,在APICloud项目中打包时请勿勾选压缩。


二、AUI Flex布局
      考虑flex对安卓4.2的兼容问题,给aui-flex-item-*增加了position:relative属性。在使用aui-flex-item-*布局时不支持自动换行,需在父级使用aui-flex-col进行布局换行


三、沉浸式问题
      在使用aui-bar进行顶部布局时,考虑到沉浸式效果,如果没有按钮(只有中间标题文字时),使用代码
      <header class="aui-bar aui-bar-nav aui-bar-warning">AUI</header>


四、aui-tap.js
      aui-tap封装的是监听tap事件,可消除300ms点击事件。如果在开发中使用了第三方js,避免监听tap事件冲突 查看全部
AUI已经帮助了很多开发者完成了项目的开发中,感谢大家一路的支持。AUI在为了兼容APICloud的同时,考虑微信、钉钉等其他移动端的开发作了几处特别处理,因此在APICloud中有几处特别注意事项。常见问题:


一、云编译打包后线条错位
       AUI的1px线条为了达到原生效果同时兼容不同显示屏作了特别处理,在APICloud项目中打包时请勿勾选压缩。


二、AUI Flex布局
      考虑flex对安卓4.2的兼容问题,给aui-flex-item-*增加了position:relative属性。在使用aui-flex-item-*布局时不支持自动换行,需在父级使用aui-flex-col进行布局换行


三、沉浸式问题
      在使用aui-bar进行顶部布局时,考虑到沉浸式效果,如果没有按钮(只有中间标题文字时),使用代码
      <header class="aui-bar aui-bar-nav aui-bar-warning">AUI</header>


四、aui-tap.js
      aui-tap封装的是监听tap事件,可消除300ms点击事件。如果在开发中使用了第三方js,避免监听tap事件冲突

AUI 一个靠谱的高性能移动前端框架

官方公告流浪男 发表了文章 • 6 个评论 • 885 次浏览 • 2016-04-13 13:50 • 来自相关话题

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

在AUI 1.1.9版本中新增了AUI Flex框架,AUI Flex(aui-flex.css)采用12个栅格进行布局,与aui-col-xs-*相比更灵活性,可以快速布局出自己所需要的框架结构。结合aui.css,能彻底解决布局+样式的问题。
在AUI Flex中,使用了aui-flex-col(横向)和aui-flex-row(纵向)两种容器,只需要把栅格放入容器中即可。AUI Flex所有类支持嵌套布局,可任意进行排列。

使用AUI Flex可以方便解决垂直居中,多栏等高,等宽布局,任意对齐等。

 

组件丰富,模块化


CSS3组件化写法,JS组件化,让用户更容易扩展使用;flex弹性布局更灵活。

 

原生体验


更细致的处理,让体验更接近原生效果,完美适配各个机型。

 

轻量级,高性能


面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备。

 

MIT License


AUI使用 MIT 许可证发布,用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售 AUI 及其副本。

 

作者


@流浪男

 

AUI官网:http://www.auicss.com

AUI APP下载及DEMO地址:http://www.auicss.com/m/

AUI文档地址:http://www.auicss.com/m/?m=Home&c=Document

GitHub: https://github.com/liulangnan/aui (喜欢她就给她个star) 查看全部
AUI为一款轻量级前端UI框架,更偏重于CSS布局及样式的构造,通俗易懂的写法及模块式的拼装方便用户自由扩展。轻小的体积、灵活的扩展性,大大提高移动端项目的体验度和开发效率。

在AUI 1.1.9版本中新增了AUI Flex框架,AUI Flex(aui-flex.css)采用12个栅格进行布局,与aui-col-xs-*相比更灵活性,可以快速布局出自己所需要的框架结构。结合aui.css,能彻底解决布局+样式的问题。
在AUI Flex中,使用了aui-flex-col(横向)和aui-flex-row(纵向)两种容器,只需要把栅格放入容器中即可。AUI Flex所有类支持嵌套布局,可任意进行排列。

使用AUI Flex可以方便解决垂直居中,多栏等高,等宽布局,任意对齐等。

 


组件丰富,模块化



CSS3组件化写法,JS组件化,让用户更容易扩展使用;flex弹性布局更灵活。

 


原生体验



更细致的处理,让体验更接近原生效果,完美适配各个机型。

 


轻量级,高性能



面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备。

 


MIT License



AUI使用 MIT 许可证发布,用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售 AUI 及其副本。

 


作者



@流浪男

 

AUI官网:http://www.auicss.com

AUI APP下载及DEMO地址:http://www.auicss.com/m/

AUI文档地址:http://www.auicss.com/m/?m=Home&c=Document

GitHub: https://github.com/liulangnan/aui (喜欢她就给她个star)

AUI v1.2.0版本更新

官方公告流浪男 发表了文章 • 1 个评论 • 379 次浏览 • 2016-04-13 12:53 • 来自相关话题

版本号 V 1.2.0

一、将aui.css字体图标样式分离
aui.css图标样式分离为aui-iconfont.css,该样式表在aui.css中已被默认加载,不需要二次引入。方便用户后期对字体图标的扩展管理

二、新增两套下拉刷新组件
推出了两套不同样式的下拉刷新组件,用户可自由扩展和二次开放,更方便前端人员的设计。

三、轮播组件
从引导页到幻灯片,AUI轮播组件轻松搞定,自定义分页样式,控制播放时间,循环,自动播放等

四、列表项滑动菜单
期待已久的列表项滑动显示菜单也终于发布了,用户可根据需求自定义按钮及样式,支持aui所有的布局列表嵌套

五、手风琴折叠面板
折叠面板控件也来了,这个就不多介绍了,可以嵌套任何组件

六、新增一套仿QQ游戏中心首页模板

七、AUI Flex优化,兼容安卓4.2

八、索引列表优化

九、喜欢AUI,就赶快分享吧
 
  查看全部
版本号 V 1.2.0

一、将aui.css字体图标样式分离
aui.css图标样式分离为aui-iconfont.css,该样式表在aui.css中已被默认加载,不需要二次引入。方便用户后期对字体图标的扩展管理

二、新增两套下拉刷新组件
推出了两套不同样式的下拉刷新组件,用户可自由扩展和二次开放,更方便前端人员的设计。

三、轮播组件
从引导页到幻灯片,AUI轮播组件轻松搞定,自定义分页样式,控制播放时间,循环,自动播放等

四、列表项滑动菜单
期待已久的列表项滑动显示菜单也终于发布了,用户可根据需求自定义按钮及样式,支持aui所有的布局列表嵌套

五、手风琴折叠面板
折叠面板控件也来了,这个就不多介绍了,可以嵌套任何组件

六、新增一套仿QQ游戏中心首页模板

七、AUI Flex优化,兼容安卓4.2

八、索引列表优化

九、喜欢AUI,就赶快分享吧