Amaze UI Web 组件开发规范.pdfVIP

Amaze UI Web 组件开发规范 Web 组件是基于 Amaze UI 基础库 （CSS / JS ）开发的，在基础库已有样式、功能的基 础上做了更多扩展。 1.Web 组件样式组织 Web 组件的样式有三个 级： a) . Amaze UI 基础样式: 每个⽹站项⽬中都会默认引⼊以下基础样式，组件开发时应在 以下样式的基础上进⾏。 variables.less mixins.less base .less grid .less block-grid .less u ili y .less b) .Amaze UI 其他样式组件：Web 组件编写过程中使⽤到类似的样式时应当引⼊相关 CSS 组件，在此上进⾏微调，⽐如 bu on .less、close .less 。 c) .Web 组件⾃⾝样式：Web 组件⾃⾝样式拆分出⾻⼲样式和主题样式；每个 Web 组 件可以有多个不同主题，主题基于⾻⼲样式编写，每个主题相互独⽴。 ⾻⼲样式以 {widge }.less 命名； 默认主题以 {widge }.defaul .less 命名； 其他主题以 {widge }.{ heme-name}.less 命名。 2. ⽬录结构及说明 ⼀个组件的⽬录结构如下： {widget} |-- package.json |-- README.md |-- HISTOR .md |-- resources | `-- screenshots | |-- 0.jpg | |-- 1.jpg | `-- 2.jpg `-- src |-- {widget}.hbs |-- {widget}.js |-- {widget}.less |-- {widget}.default.less |-- {widget}.[theme1].less |-- {widget}.[themen].less `-- {widget}.png 2.1 package .j son Web 组件核⼼描述⽂件，j son 格式，下⾯的注释仅为⽅便解释各项含义添加。 { // 组件名称: 使⽤⼩写字⺟，不能和存在的组件重名 name: sample, // 版本号 version: 0.0.1, // 组件本地化名字，⽬前有中⽂、英⽂两 选项 localName: { en: , zh-cn: }, // 组件类型 [|layout|social] type: , // 组件 ICON，存放在 src ⽬录下 icon: sample.png, // 作者信息 author: { name: xxx, email: xxx@ }, // 组件描述 description: sample 描述, // 组件驱动者 poweredBy: AllMobilize, // 基础样式 （⽆需修改） styleBase: [ variables.less, mixins.less, base.less, grid.less, block-grid.less, utility .less ], // 组件模板，使⽤ [handlebarsjs](/) template: sample.hbs, // 依赖的库样式 styleDependencies: [ icon.less ], // 组件核⼼样式 style: sample.less, // 组件主题 （没有主题时将值设置为 null） themes: [ { // 主题名称 sample.{xxx}.less 中的 {xxx