Mozilla实验室项目——Brick:砖块

   Brick是用于加速HTML5开发的一组可重用的UI组件的集合体,通过添加新的HTML标签,它允许开发者以一种更清晰、更简洁的方式表达App的结构。

也许你曾听说过这个令人激动的 web 组件。要是没有的话,也许该看看是什么让它如此振奋人心。长话短说,web 组件开启了一个的新领域,让开发者自定义可重用的 HTML 标签。不需要多余代码来初始化的 javascript 插件和模板,样式。

遗憾的是并非所有浏览器都原生支持该规范,不过这并不意味着开发者现在无法享受组件概念的好处,感谢 google’s PolymerMozilla’s x-tag (X-Tag 和 Polymer 共享同样的底层,web 组件)

我们自豪的宣布释出测试版 Brick,一个跨浏览器,易用,灵活,语意化的 web 组件库,提供新的自定义 HTML 标签抽象成常见的用户界面模式。基于 Mozilla 的 x-tags,Brick 能让你做到插入简单的 HTML 标签即可调用控件,比如滑动条或日期选择器。减少你花在思考如何关联 HTML/CSS/Javscript 上的时间以加速开发过程。

把 Brick 用起来

说你想要在应用里实现一个跨浏览器,移动设备友好的日历控件。目前的 JavaScript 插件,比如 jQuery UI 需要插入无关语意的标记到你的 HTML 并以 JavaScript 明确的初始化和管理。然而有了 Brick 只需要简单的添加一些有别于原生标签的自定义 HTML 标签便能实现那些组件了。

在我们的日历示例中,只需要在应用中引用了库里的 CSS 和 Javascript 文件,再添加如下标签

<x-calendar></x-calendar>

就创建了一个像这样 DOM 元素

x-calendar

想要修改组件行为比如添加导航控制或日期预选?就像其他的原生标签一样,只要修改标签属性就能改变组件行为!

<x-calendar controls chosen='2012-05-17'></x-calendar>

x-calendar-attr

可用的 Bricks

在写这片文章的时候,Brick 由 13 个不同标签构成,大部分都是与其他标签完全独立的,你可以单独下载其中的部分来代替整个包。

  1. “导航栏(Appbar)”
  2. “日历(Calendar)”
  3. “日期选择器(Datepicker)”
  4. “面板(Deck)”
  5. “翻转框(Flipbox)”
  6. “图标按钮(Iconbutton)”
  7. “布局(Layout)”
  8. “滚动框(Slidebox)”
  9. “滚动条(Slider)”
  10. “选项卡(Tabbar)”
  11. “开关(Toggle)”
  12. “开关组(Togglegroup)”
  13. “提示框(Tooltip)”

一些标签被抽象成了复合控件,比如:

<x-calendar> (calendars, as seen from the example)

<x-deck> (a cyclable slide gallery)

<x-tooltip> (exactly as it sounds).

其他依靠修复跨浏览器实现的非全局原生支持元素,例如

<x-slider>

<x-datepicker>

都用来支持 <input type=”range”> 和 <input type=”date”>。还有一些结构组件用于简化样式和标记,例如 <x-layout> 保证内容和头尾不需要样式化的标记也能填充到容器元素。

每个标签都有一些扩展属性/JavaScript 接口,样式也完全可以符合应用的风格

用 Bricks 开始创造

想在你的应用中开始用组件,前去 <mozilla.github.io/brick> 下载发行包,查看示例,阅读可用标签的文档吧。也可以选择浏览 Brick Github 页面 来查看源代码或作出贡献!

这个库还处于测试版本, 所以我们非常重视所有的用户反馈!Brick 已经有了一些实例 ,而我们很乐于看到你是如何使用它的!

 

 

Via:https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/
By:Dio Synodinos
译者:马德奎

 

 

Demos:http://mozilla.github.io/brick/docs.html

项目主页:http://mozilla.github.io/brick/index.html

Github主页:https://github.com/mozilla/brick/

下载:http://mozilla.github.io/brick/download.html

本篇文章已有1条评论

  1. xiangfacai 说:

    here we go!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

想显示头像?本站支持Gravatar

Scroll Up