추가 달력의 수@hchaki.
마지막 날을 들었기 때문에 열심히 하고 싶어요.초마리!
네.
그러니까 오늘은 Polymer라고 써.
Polymer는 WebComponents1의 라이브러리로 템플릿 기능, 데이터 귀속, 이벤트 청중 등이 모두 갖추어진 상당히 실용적인 라이브러리입니다.
그리고 이 Polymer를 사용하면 클릭하면 내용을 꺼낼 수 있는 상자'adv-box'의 자체 제작 구성 요소를 만들면서 실례를 들어 설명한다.
다음은 시위 행진.
시범: 중합물로 추가 달력 만들기(미리 준비)

템플릿 사용

그럼 바로 Polymer를 사용하십시오.특수 제작된 Polymer 구성 요소의adv-box.측면을 사용한 기술은 다음과 같습니다.

<adv-box>中身</adv-box>

그게 다야.
정의적인 기술은 이런 느낌이다.

<dom-module id="adv-box">
  <template>
    <div class="futa"></div>
    <div class="box">
        <content></content>
    </div>
  </template>
  Polymer({
    is: "adv-box"
  });
</dom-module>

template 탭에 주의하십시오.
실행 시<template>의 기술이 <adv-box>로 바뀌었고 「中身」가 <content>로 바뀌었다.
여기서 생략하면 다른mustache와 유사한 {{}}와 [[]]의 쓰기 방법으로 속성 값을 삽입할 수도 있고 <dom-repeat>와 <dom-if>의 조건문과 순환문으로 템플릿을 지정할 수도 있습니다.

스타일에 맞다

면 정의하기

  <template>
    <style>
        :host{
            position: relative;
        }
        :host ::content{}
        :host .futa{}
    </style>
    略
  </template>

스타일
-<style>에 친필로 쓰다
- 설명 추가 파일 불러오기
이 두 가지 방법은 모두 괜찮다.어떤 상황에서도 이곳의 css 선언은 외부로 누설되지 않기 때문에 기술 중의 충돌에 너무 신경 쓸 필요가 없다.
특별한 선언 기술이 있는데 :hostadv-box 자체를 가리키며::content 교체된'내용'의 요소를 가리킨다.그 외에도 평소처럼 스타일링을 해도 괜찮다.아주 편리합니다!

속성 사용

면 정의하기

<dom-module id="adv-box">
Polymer({
  is: "adv-box",
  properties: {
    isOpen: {
      type: Boolean,
      reflectToAttribute: true
    },
  },
  ready: function(){
    console.log( this.isOpen );
  }
});
</dom-module>

이용 방면

<adv-box is-open="1">中身</adv-box>

정의에 대한properties 섹션을 주의하십시오.
properties로 선언한 것은 이용방면의 html 라벨의 속성 값(attribute)과 대응한다.
예를 들어properties가 지정한 값에 대응하는 낙타 껍질isOpen과 html 라벨의 속성 값과 명명 사례is-open는 방법에서this.isOpen의 형식으로 사용할 수 있다.
또한 reflectToAttribute:true를 지정하면 반대로properties 값의 변경으로)의 속성 값도 변경되기 때문에 이것을 이용하여 서로 다른 상태의 css를 기술할 수 있습니다.

활성 청중 사용

면 정의하기

<dom-module id="adv-box">
Polymer({
  listeners: {
    "tap": "_onTap"
  },
  _onTap: function() {
    this.isOpen = true;
  }
});
</dom-module>

행사 청중은 listeners에 기술하였다.마우스 움직임과 터치 이벤트를 랩으로 싸서 간편하게 준비했습니다.
이번에는 생략되었지만properties 값의 변화를 감시할 수 있으며 요소에 id를 지정하면 그 요소id.tap에 대해서도 청중을 등록할 수 있다.

총결산

그래서 총결산에 들어갔다.Polymer는...

여기 대단해!

css 스타일시트의 영향 유출 없음

> 속성 값 - 속성 값의 자동 협업이 편리함

사건 청중의 지정 방법은 하키다.

이건 좀...

Polymer가 지정한 함수를 사용하여 내부 소자에 접근해야 한다(shaadowDOM의 관계)

id를 열고polymer 요소를 호출한 후 이 id명으로 전 세계 등록 구성원(과격파!)

최후

경청해 주셔서 감사합니다.
adv-box를 배열하고 애니메이션과 포장지를 더하면 원래의 의미의 추가 달력2이 된다.이 정도의 일은 괜찮다!

보기: 중합물로 추가 달력 3D 만들기
자기가 맡은 날짜 선물을 열어라!
웹을 부품 단위(부품)로 하면 구조, 디자인, 기능에 해당하는), css, js가 통일적으로 처리하는 구조이다.방문 카운터에서 구글 지도까지 인류의 역사는 구성 요소가 박힌 역사다.모두들 기다리고 있다.  ↩
엔지니어가 연말에 도전한다는 뜻이 아니라 12월에 선물이 딸린 달력이라는 뜻이다.  ↩