Polymer

Welcome To The World Of Tomorrow!

Polymer中文社区

@Polymer中文社区 (Q群208264834)

社区官网http://polymerchina.org

Polymer中文文档http://docs.polymerchina.org

Polymer英文文档镜像http://en.polymerchina.org

欢迎贡献文档翻译https://github.com/unbug/docs/tree/ZH

欢迎贡献学习资料https://github.com/unbug/Polymer-notes

本Slide源码https://github.com/unbug/gdg14

About Me

MIHTool(iOS Web Debugger Pro)作者

Polymer中文社区组织者

GDG 北京成员

G+: Mobile Web Development

Twitter @unbug 微博 @听奏

Agenda

Web Components

Polymer

Web Components

Custom Elements

Create new HTML elements and extend existing ones

Templates

Native templating in the browser

Shadow DOM

Scoped CSS!!! + encapsulated markup

HTML Imports

Load custom element definitions and resources

webcomponents.org

Polymer

Core Elements

Paper Elements(Material design)

Google APIs

Polymer Designer

Chrome Dev Editor

Core Elements

www.polymer-project.org/docs/elements/core-elements.html

Visual

<core-header-panel>[^]

<core-toolbar>[^]

<core-drawer-panel>[^]

<core-menu>[^]

<core-icon>[^]

<core-overlay>[^]

<core-animated-pages>[^]

Non-visual

<core-ajax>[^]

<core-localstorage>[^]

<core-range>

<core-media-query>

<core-iconset>

Material design with Polymer

Application layout

Icons

Material controls

Dialogs, snackbars, and toasts

Material effects

Transitions

Scrolling techniques

Application layout[^]

<core-header-panel>[^]

<core-toolbar>[^]

<core-drawer-panel>[^]

<core-scaffold>[^]

Icons[^]

<core-icon>[^]

Material controls

<paper-button>[^]

<paper-checkbox>[^]

<paper-toggle-button>[^]

<paper-icon-button>[^]

<paper-fab>[^]

<paper-radio-group>[^]

<paper-radio-button>[^]

<paper-slider>[^]

<paper-progress>[^]

<paper-input>[^]

Dialogs, snackbars, and toasts

<paper-dialog>[^]

<paper-toast>[^]

Material effects

<paper-ripple>[^]

<paper-shadow>[^]

Transitions

<core-animated-pages>[^]

Scrolling techniques

<core-scroll-header-panel>[^]

Paper Elements[^]

www.polymer-project.org/docs/elements/paper-elements.html

Topeka App[^]

www.polymer-project.org/docs/elements/paper-elements.html

Material Playground[^]

ebidel.github.io/material-playground/

Paper Calculator[^]

www.polymer-project.org/components/paper-calculator/demo.html

Polymer Chrome App

https://github.com/PolymerLabs/polymerchromeapp

Google APIs

<google-signin>[^]

<google-map>[^]

<google-youtube>

<google-cloud>

<google-drive>

<google-calendar>

https://github.com/GoogleWebComponents

Custom Elements

http://customelements.io/

Polymer Designer[^]

www.polymer-project.org/tools/designer/

Mobile UI Elements

https://github.com/ForceDotComLabs/mobile-ui-elements

Chrome Dev Editor

https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=en

http://www.polymer-project.org

https://github.com/Polymer

Q & A

Thank you

http://polymerchina.org

@Polymer中文社区(Q群208264834)

中文文档http://docs.polymerchina.org

欢迎贡献https://github.com/unbug/docs/tree/ZH