Polymer logo

Polymer 2.0

释放 Web 组件的力量。 Polymer 是一个 JavaScript 库,可帮助您创建自定义的可重用 HTML 元素,并使用它们来构建高性能、可维护的 App。

Polymer 峰会 2017

错过了 Polymer 峰会 2017?您仍然可以观看来自于 Polymer 团队和社区的演讲,或者在家里尝试 codelabs。

观看视频 尝试 codelabs 优酷

Polymer 库

Polymer 是一个轻量级的库,可帮助您充分利用 Web 组件。

使用 Web 组件,您可以创建可重用的自定义元素,与浏览器的内置元素进行无缝的互操作;或者把您的 App 拆分成大小合适的组件,使代码更简洁,维护成本更低。

Polymer 在标准的 Web 组件 API 上加了一层糖,让您更容易获得好的成果。

库简介 答题游戏

Polymer App 工具箱

Polymer App 工具箱可以帮助您以最小的开销和负载,创建和分发前沿的渐进式 Web App,利用强大的 Web 平台功能,如 Web 组件、服务工作者和 HTTP/2。

该工具箱提供了基于组件的架构、响应式布局,模块化路由、本地化支持、本地存储和离线缓存,以及高效分发的非绑定式 App 资源。单独采用这些功能,或者使用它们共同打造一个全功能的渐进式 Web App。

关于工具箱
illustration of an abstract arrow

专为速度

因为它们把脏活累活都交给平台去做了,用 Polymer 库创建的元素和用 App 工具箱创建的 App 都速度极快。

illustration of a computer

为现在和未来

Polymer 通过使用最新的 API 来高效利用 Web 平台;Polyfills 为那些老旧浏览器提供了还未实现的 API 的支持。

illustration of bolts

完全互操作

使用 Polymer 开发的元素都是基于标准的 Web 组件 API,因此他们可以与浏览器的内置元素和其他 Web 组件无缝协作。

从目录中使用元素


  <!-- Polyfill 为老旧浏览器提供的 Web 组件支持 -->
  <script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>

  <!-- 导入元素 -->
  <link rel="import" href="components/google-map/google-map.html">

  <!-- 使用元素 -->
  <google-map latitude="37.790" longitude="-122.390"></google-map>
          

用 Polymer 创建的元素外观和工作方式就像任何其他的 HTML 元素一样。只需找到您想在您的 App 中使用的元素,用 HTML import 导入进来,然后将标签添加到您的页面。

Browse elements

创建您自己的元素


  <dom-module id="contact-card">
    <template>
      <style>/* ... */</style>
      <slot></slot>
      <iron-icon icon="star" hidden$="{{!starred}}"></iron-icon>
    </template>
    <script>
      class ContactCard extends Polymer.Element {
        static get is() { return "contact-card"; }
        static get properties() {
          return {
            starred: { type: Boolean, value: false }
          }
        }
      }
      customElements.define(ContactCard.is, ContactCard);
    </script>
  </dom-module>
            


  <contact-card starred>
    <img src="profile.jpg" alt="Eric's photo">
    <span>Eric Bidelman</span>
  </contact-card>
            

Polymer 库可以很容易地创建自己的功能强大的元素。给您的元素一些标记和属物,然后用在网站上。Polymer 提供了有用的功能,如模板和数据绑定,以减少您需要写的样板代码。

Build an element

构建渐进式 Web App


  <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
    <!-- 主页视图 -->
    <shop-home name="home" categories="[[categories]]"></shop-home>

    <!-- 目录中商品的列表视图 -->
    <shop-list name="list" route="[[subroute]]" offline="[[offline]]"></shop-list>

    <!-- 商品详情视图 -->
    <shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>

    <!-- 购物车视图 -->
    <shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>

    <!-- 结帐视图 -->
    <shop-checkout name="checkout" cart="[[cart]]" total="[[total]]" route="{{subroute}}"></shop-checkout>
  </iron-pages>
            

使用 Polymer App 工具箱来创建超级强大的渐进式 Web App。试用商店演示 App 来体验一下渐进式 Web App 的实况。

试用演示 创建 App

谁在用 Polymer

BBVA logo Coca Cola logo Comcast logo Google logo ING logo Net-a-porter logo USA-Today logo

最新消息

Polymer 3.0: 最后一个预览版

上手 Polymer 3.0 的最后一个预览版

Polymer 3.0 预览版:路径和名称

我们将在 Polymer 3.x 中改变模块导入的方式

Polymer 2.4 发布了

Polymer 2.4:为 3.0 铺好道路,以及 TypeScript 支持

浏览器兼容性

Polymer 库和 Polymer App 工具箱工作在所有主流的浏览器上(Chrome、Firefox、IE、Edge、Safari 和 Opera)。
chrome logo firefox logo internet explorer logo edge logo safari logo opera logo

翻译说明

  • Property - 属物
  • Attribute - 属性
  • Web Components - Web 组件
  • Shadow DOM - 阴影 DOM
  • Service Worker - 服务工作者
  • Progressive Web App - 渐进式 Web App
  • Custom Element - 自定义元素
  • Slot - 插槽
  • Shim - 垫片
  • Mixin - 混入