Hello, World !

Polymer 는 머티리얼 디자인 의 웹 컴포넌트 을 간결하게 사용할 수 있어 편리합니다.
컴포넌트(태그, 커스텀 요소)의 사용법이나 데이터 바인딩(입력과의 관련)을 Hello World 로 확인합니다.

동작 확인
Windows 10 : ○ Chrome60, × Firefox54 Edge40 IE11
Mac 10.3 : ○ Chrome60 Safari10.1
Android 7.1 : ○ Chrome60

화면 이미지

데모 사이트 (plunker)

샘플 코드

index.html

<base href="https://polygit.org/components/">

<script src="webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">

<link rel="import" href="polymer/lib/elements/dom-bind.html">

<dom-bind>
  <template>

    <paper-input label="Name" value="{{name}}" always-float-label></paper-input>

    <p>Hello {{name}} !</p>

    <paper-button raised onClick="dialog.open()">OPEN</paper-button>

    <paper-dialog id="dialog" with-backdrop>
      <h3>Hello {{name}} !</h3>
      <p>This is Polymer Dialog.</p>
    </paper-dialog>

  </template>
</dom-bind>

각 행 설명

index.html

<base href="https://polygit.org/components/">

라이브러리의 로딩을 간결하게 하기 위해, <base> 태그로 엔트리 포인트를 정의합니다.

Poly 기술 t. 오 rg 은 CDN 경유로 부담없이 시도할 수 있습니다만, 아래와 같은 버젼 지정의 방법이 어렵습니다. . .

<base href="https://polygit.org/polymer+v2.0.2/shadycss+webcomponents+1.0.3/components/">

index.html

<script src="webcomponentsjs/webcomponents-loader.js"></script>

Web Components의 폴리필을로드합니다 (Chrome에서는 선택 사항).
참고 : 「Web Components란 무엇인가?방역」

index.html

<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">

머티리얼 디자인 Paper Elements 을 사용하기 위해 HTML Imports 에서 <paper-input> , <paper-button> , <paper-dialog> 태그를 로드합니다.

index.html

<link rel="import" href="polymer/lib/elements/dom-bind.html">

<dom-bind>
 <template>
   ...
 </template>
</dom-bind>

데이터 바인딩 을 사용하기 위해 <dom-bind> 를 사용합니다. (스스로 사용자 정의 요소를 정의합니다 <dom-module> 태그에는 필요하지 않습니다).

index.html

<paper-input label="Name" value="{{name}}" always-float-label></paper-input>

입력 필드(paper-input) 표시. value="{{name}}" 로 입력된 값( value )과 {{name}} 가 묶여 연동합니다(바인딩).

※ always-flot-label 등 익숙하지 않은 속성은 문서 에 써 있습니다만, 명명에는 카멜 케이스의 자동 변환( always-flot-label ←→ alwaysFlotLabel ) 이 되어 있으므로 주의입니다.

덧붙여서 {{name}} 에 초기치를 넣고 싶은 경우는

<script>
  document.querySelector('dom-bind').name="World"
</script>

을 더합니다 (여기도 스스로 커스텀 요소를 정의하는 경우에는, 프로퍼티를 설정하기 때문에 이런 쓰는 방법은 하지 않습니다)

index.html

<p>Hello {{name}} !</p>

바인딩된 {{name}} 를 실시간으로 반영합니다.

index.html

<paper-button raised onClick="dialog.open()">OPEN</paper-button>

버튼(paper-button) 을 표시합니다. 클릭하면 <paper-dialog id="dialog"> 의 open() 함수를 호출하여 대화 상자가 열립니다.

index.html

<paper-dialog id="dialog" with-backdrop>
  <h3>Hello {{name}} !</h3>
  <p>This is Polymer Dialog.</p>
</paper-dialog>

대화 상자(paper-dialog) 을 정의합니다. open() 로 불릴 때까지 표시되지 않습니다.

마지막으로

코멘트, 편집 요청 환영
Polymer 샘플 코드 (2) FizzBuzz 에 계속됩니다.

이상