codecamp

Amaze UI Web 组件简介

    Web Components 颇令人向往,无奈浏览器支持有限,所以,Amaze UI Web 组件按照 Web Components 的实现形式,使用浏览器支持更为普及的技术,将移动开发中常用的组件切割成不同部分,实现类 Web Components 的组件,提高开发效率。

1.组件结构

Amaze UI web组件

如上图所示,Amaze UI Web 组件 通过一个 package.json 文件描述,每个组件由模板(hbs)、样式(LESS)、交互(JS)三部分组成,其中样式可能有多个文件(不同的主题)。组件样式和交互以 CSS 、JS 插件 为基础编写;使用 Handlebars 作为模板引擎。

Amaze UI 目前封装的组件及演示请查看 Web 组件页

2.分享组件

如果你想分享你开发的 Web 组件,可以 Fork Amaze UI 项目,按照开发文档开发完成以后,向我们提交 Pull Request。
通过审核以后,你的组件便会出现在 Amaze UI 官网。
欢迎大家加入 Web 组件开发者行列(开发文档),为用户开发更多的组件。

基于 Amaze UI 进阶开发
Amaze UI HTML/CSS 规范
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }