polymerНачало работы с полимером


замечания

Проект « Полимер » состоит из:

  • Полимерная библиотека : Polymer - это легкая библиотека, которая помогает вам в полной мере использовать веб-компоненты. С помощью веб-компонентов вы можете создавать многократно используемые пользовательские элементы, которые легко взаимодействуют с встроенными элементами браузера или разбивают ваше приложение на компоненты правого размера, делая ваш код более чистым и менее дорогостоящим для обслуживания.
  • WebComponents Polyfill : WebComponents Polyfill - это будущая целевая библиотека, предназначенная для выполнения спецификаций веб-компонентов W3C. Браузеру, полностью реализующему спецификацию, не нужны webcomponents.js. Тем не менее, большинство браузеров по-прежнему не хватает какой-либо части спецификации, так что это будет зависимость в течение довольно долгого времени.
  • Polymer App Toolbox : Polymer App Toolbox помогает вам создавать и предоставлять передовые прогрессивные веб-приложения с минимальными накладными расходами и полезной нагрузкой за счет использования мощных функций веб-платформы, таких как веб-компоненты, рабочий службы и HTTP / 2. Инструментарий предоставляет компонентную архитектуру, гибкие макеты, модульный маршрутизатор, поддержку локализации, поддержку «под ключ» для локального хранения и автономного кэширования и эффективную доставку разделенных ресурсов приложений. Примите эти функции индивидуально или используйте их вместе для создания полнофункционального прогрессивного веб-приложения. Полимер посыпает немного сахара над стандартными API-интерфейсами Web Components, что облегчает вам получение отличных результатов. Библиотека Polymer предоставляет набор функций для создания пользовательских элементов. Эти функции предназначены для упрощения и ускорения создания пользовательских элементов, которые работают как стандартные элементы DOM. Подобно стандартным элементам DOM, полимерными элементами могут быть:

Версии

Версия Дата выхода
v2.0.0 2017-05-15
v1.7.0 2016-09-28
v1.6.1 2016-08-01
v1.6.0 2016-06-29
v1.5.0 2016-05-31
v1.4.0 2016-05-18
v1.0.0 2015-05-27

Структура элементарного элемента

Мы получили следующий очень простой элемент my-element сохраненный как src/my-element.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      /* local styles go here */
      :host {
        display: block;
      }
    </style>
    <!-- local DOM goes here -->
    <content></content>
  </template>

  <script>
    Polymer({
      /* this is the element's prototype */
      is: 'my-element'
    });
  </script>

</dom-module>
 
  • <link> включает библиотеку Polymer с использованием импорта HTML.
  • <dom-module> - это локальная DOM-оболочка для элемента (в данном случае my-element ).
  • <template> - это фактическое локальное определение DOM.
  • <style> внутри <template> позволяет вам определять стили, которые привязаны к этому элементу и его локальной DOM, и не повлияет ни на что другое в документе.
  • <content> будет содержать все, что вы помещаете внутри своего элемента.
  • Псевдокласс :host соответствует пользовательскому элементу ( my-element ).
  • Вызов Polymer регистрирует элемент.
  • is Свойство это имя элемента (он должен соответствовать <dom-module> «ы id )

Вы можете импортировать его в свое приложение, используя:

<link rel="import" href="src/my-element.html">
 

И используйте его как тег:

<my-element>Content</my-element>
 

Привет, мир

В этом примере создается элемент Polymer с именем x-foo , шаблон которого связывается со строковым свойством с именем «message». HTML-код элемента импортируется в основной документ, что позволяет использовать теги <x-foo> в <body> .

х-foo.html

<dom-module id="x-foo">
  <template>
    <span>{{message}}</span>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      properties : {
        message: {
          type: String,
          value: "Hello world!"
        }
      }
    });
  </script>
</dom-module>
 

index.html

<head>
  <!-- PolyGit used here as CDN for demo purposes only. In production,
       it's recommended to import Polymer and Web Components locally
       from Bower. -->
  <base href="https://polygit.org/polymer+1.6.0/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="x-foo.html">
</head>
<body>
  <x-foo></x-foo>
</body>
 

См. Демонстрацию в CodePen

Настройка вашего первого полимерного приложения из шаблона

Давайте постараемся создать собственное потрясающее прогрессивное веб-приложение с помощью Polymer!

Прежде чем вы сможете начать установку Polymer, вам потребуется следующее:

  • Node.js - проверить установку StackOverflow для установки Node.js

  • Bower - вы можете установить Bower с помощью диспетчера пакетов Node, установленного с помощью Node.js:

    npm install -g bower
     

Установка интерфейса командной строки Polymer

Polymer CLI предоставляет вам все инструменты, необходимые для проектов Polymer:

npm install -g polymer-cli
 

Инициализировать приложение из шаблона приложения

Используйте polymer init для инициализации вашего приложения из шаблона приложения .

--app-drawer-template шаблоном является шаблон --app-drawer-template . Давайте используем это:

polymer init app-drawer-template
 

Служить вашему приложению

Нет никакого здания, необходимого для обслуживания вашего первого удивительного приложения Polymer. Просто serve его:

polymer serve --open
 

Это откроет приложение в вашем браузере по умолчанию на http://localhost:8080 .

Использование элементов из каталога полимеров

Polymer предлагает множество хорошо продуманных элементов, которые вы можете использовать в своем приложении.

Просмотрите их в своем каталоге элементов .

Давайте рассмотрим рабочий процесс использования элемента, включив paper-input ( Documentation )

Загрузить элемент

Загрузить элемент можно двумя способами:

Беседка

Удобный способ - использовать командную строку с помощью команды install bower:

bower install --save PolymerElements/paper-input

Примечание. --save добавляет элемент в зависимость от bower.json вашего приложения.

ZIP-файл

Другой способ состоит в том, чтобы добавить выбранный элемент ( paper-input в этом случае) в вашу коллекцию (в каталоге Polymer), используя «Добавить в коллекцию» в навигацию и загрузить свою коллекцию, используя значок звезды в правом верхнем углу.

Это создаст ZIP-файл, содержащий элемент и все его зависимости. Затем вы можете скопировать папку bower_components внутри .zip / components в корневую директорию вашего приложения.

Импортируйте элемент в приложение

Чтобы импортировать элемент, который вы только что установили, импортируйте соответствующий .html файл:

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

Использовать элемент

Теперь вы можете использовать paper-input внутри документа, в который вы его импортировали:

<paper-input></paper-input>