HTML5 跨屏前端框架 Amaze UI

HTML5 跨屏前端框架 Amaze UIHTML5 跨屏前端框架 Amaze UI

Amaze UI采用国际最前沿的“组件式开发”以及“移动优先”的设计理念,基于其丰富的组件,开发者可通过简单拼装即可快速构建出HTML5网页应用,上线仅半年,Amaze UI就成为了国内最流行的前端框架,目前在Github上收获Star数近万,服务于全球50W开发者。

Amaze UI 的开发历程

云适配创始人陈本峰:这个项目最开始是作为内部使用工具来开发的。我们云适配本身就是一个前端产品,Amaze UI能帮我们降低开发时间和成本,用标准化作业流程,能有更高的产出。

从云适配创立之初,我们就开始积累自己的前端框架,同时也借鉴了Bootstrap等国外框架的优点。在内部使用过程中,大家一致反映不错,我们就希望把这个产品开源,希望分享给更多的人,也希望更多的人来贡献代码,来共建中国前端开源生态环境。在最近几个月,我们投入人力将这个项目整理成一个开源产品。目前有2个软件工程师全职在开发这个产品,还有一个设计,一个PM也在尽力配合。产品发布之后,我们会投入更多全职的工程师来专心打磨这个产品,同时也呼吁更多的前端开发爱好者共同来完善这个框架。

Amaze UI的目标

帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的前端开发者不再受前端复杂代码困扰。

Amaze UI 是中国首个开源 HTML5 跨屏前端框架

Amaze UI 是一个轻量级、Mobile first的前端框架, 基于开源社区流行前端框架编写。

HTML5 跨屏前端框架 Amaze UIHTML5 跨屏前端框架 Amaze UI

为移动而生

Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。

HTML5 跨屏前端框架 Amaze UIHTML5 跨屏前端框架 Amaze UI

组件丰富,模块化

Amaze UI 含近 25 个 CSS 组件、27 个 JS 组件,更有 21 款包含近 60 个主题的 Widgets,可快速构建界面出色、体验优秀的跨屏页面,大幅度提升你的开发效率。

HTML5 跨屏前端框架 Amaze UIHTML5 跨屏前端框架 Amaze UI

本地化支持

相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。

mobile

轻量级,高性能

Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AmazeUI 提供了一些原生的弹出窗组件,例如 Modal(模态框)、Message(消息提示框)等。以下是一个使用 Modal 组件的示例: ```html <!-- 引入 AmazeUI 样式文件 --> <link rel="stylesheet" href="https://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css"/> <!-- 引入 jQuery 和 AmazeUI JavaScript 文件 --> <script src="https://cdn.amazeui.org/amazeui/2.7.2/js/jquery.min.js"></script> <script src="https://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script> <!-- 创建一个触发弹出窗的按钮 --> <button class="am-btn am-btn-primary" data-am-modal="{target: '#my-modal'}">弹出窗</button> <!-- 创建弹出窗的 HTML 代码 --> <div class="am-modal am-modal-alert" tabindex="-1" id="my-modal"> <div class="am-modal-dialog"> <div class="am-modal-bd"> 这是一个弹出窗 </div> <div class="am-modal-footer"> <span class="am-modal-btn">确定</span> </div> </div> </div> ``` 在上面的示例中,我们首先引入了 AmazeUI 的样式文件和 JavaScript 文件。然后创建了一个触发弹出窗的按钮,并将它的 `data-am-modal` 属性设置为弹出窗的 ID。最后,我们创建了一个弹出窗的 HTML 代码,其中 `am-modal-alert` 是 Modal 组件的样式类名,`am-modal-dialog` 是弹出窗的主体内容,`am-modal-bd` 是弹出窗的内容区域,`am-modal-footer` 是弹出窗的底部区域,可以放置按钮等操作控件。 以上示例只是使用了 Modal 组件的一种方式,AmazeUI 还提供了其他的弹出窗组件,可以根据自己的需求选择使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值