Полімер Google - як він змінить спосіб створення веб-додатків

і елементи, які будують керування програвачем UI в таємниці.

Сьогодні, з веб-компонентами, ми можемо також назвати наші власні елементи. Ми можемо побудувати такий елемент, вбудувати канал Twitter або (можливо) щоб вставити діаграму.

Крім того, ці користувацькі елементи можуть також мати кілька прийнятих користувацьких атрибутів. Що стосується елемента, ви задаєте атрибут, що називається ім'я користувача який буде використовуватися для вказівки імені користувача Twitter.

Користувальницькі елементи в полімері

Полімер поставляється з купою елементів, які враховують (майже) необхідність кожної веб-програми. Google поділяє ці елементи на групи: елементи чавуну, паперові елементи, веб-компоненти Google, елементи золота, неонові елементи, елементи платини та молекули.

1. Залізні елементи

Залізні елементи - це набір основних елементів. Ці основні елементи є те, що ми звичайно використовуємо створити веб-сторінку такі як вхід, форма і зображення. Різниця полягає в тому, що полімер додає додаткові повноваження до цих елементів.

Всі елементи цієї групи є залізо- префіксом, наприклад , який використовується для відображення зображення. The елемент був оснащений деякими додатковими атрибутами, які ми не можемо застосувати в звичайному режимі елемент. Можна, наприклад, додати попереднє завантаження, зникають, і заповнювач атрибути:

Наведений вище приклад спочатку покаже заповнювач зображення, а потім переходить у фактичне зображення у вікні src як повністю завантажено, виконання плавного ефекту завантаження зображення.

2. Паперові елементи

The Паперові елементи є групою елементів дизайну матеріалу. Матеріальний дизайн - це мова дизайну Google, що робить користувацький інтерфейс і досвід роботи на платформах Google і веб-додатками, і програмами Android більш візуально послідовними. Деякі елементи, які є унікальними для Математичного дизайну, є Папір і плаваюча кнопка дій (FAB).

Папір

Папір це метафора Google середовище, яке лежить в основі змісту. Щоб додати папір з полімером, ми використовуємо елемент. Цей елемент займає 2 атрибути:

• висота Щоб підняти папір, додайте тінь, щоб підсилити висоту
• анімовані буде застосовувати анімацію як зміна висоти паперу.

Кнопка плаваючої дії (FAB)

Кнопка з плаваючою дією (FAB) - це кругла кнопка з піктограмою, що плаває на екрані, як правило, з виділеним кольором. Google припускає, що ця кнопка містить функцію, до якої часто звертаються. Ось приклад:

Наступний фрагмент коду додає матеріал паперу із зображенням та FAB.

Ми отримаємо наступний результат:

У нас є фото з “серце” кнопку плаваючий на ній. Клацніть на the photo the gives the the the the gives gives gives gives gives gives.

• Переглянути демонстрацію паперу

3. Веб-компоненти Google

Компоненти Google Web є спеціальними елементами, які справляються з Google API і службами, такими як Карти Google, Youtube, а також Google Feed, щоб назвати деякі з них. Елементи цієї групи зробити взаємодію з службами Google всього за кілька рядків.

Нижче наведено приклад, що показує карту Google із використанням елемент.

  Це Googleplex  

Як ви можете вище, елемент приймає широта і довготи щоб вказати розташування на карті. Ми також можемо гніздитися , щоб показати маркер цього місця разом з текстом, який з'явиться після натискання на маркер.

• Переглянути демонстрацію карт

Хочете показати відео YouTube? можна використовувати елемент.

Аналогічно ми налаштовуємо вихід через атрибути.

• Переглянути демонстрацію Youtube

4. Золоті елементи

Золоті елементи - це елементи, розроблені спеціально для додатків електронної комерції. Тут ви знайдете елемент для відображення кредитної картки, електронної пошти, телефону та вхідного сигналу ZIP, які всі були обладнані перевірка формату для забезпечення правильного введення даних та безпеки. Ось один приклад для додавання вхідних даних кредитної картки Visa.

5. Інші елементи

Інші елементи включають елементи Neon для анімації та спеціальні ефекти, Platinum елементи для автономних і push-повідомлень і, нарешті, Молекули, обгортки для сторонніх бібліотек.

Примітка редактора: На момент написання цієї статті, Неонові елементи, Платинові елементи та Молекули досі не доступні.

Інтеграція полімеру

Хочете використовувати Polymer у веб-розробці? Нижче описано, як встановити та інтегрувати його у веб-сторінки. Оскільки більшість полімерних елементів покладаються один на одного, найкращий спосіб встановити полімер - це Bower.

Bower - це менеджер проектних залежностей, який полегшує встановлення скриптів або стилів, необхідних для запуску проекту. Ознайомтеся з нашим попереднім повідомленням про те, як легко встановлювати, оновлювати та видаляти веб-бібліотеки за допомогою Bower.

Щоб інтегрувати Polymer, запустіть Terminal, а потім перейдіть до каталогу проекту, якщо ви його створили. Потім запустіть bower init команда для ініціювання файлу bower.json у ваш проект, який буде використовуватися для запису залежностей проекту. Відкрийте bower.json і додайте наступні рядки.

 "dependencies": "polymer": "Polymer / polymer # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "iron-elements": " PolymerElements / iron-elements # ^ 1.0.0 "," паперові елементи ":" PolymerElements / paper-elements # ^ 1.0.0 "," золоті елементи ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Ця установка передбачає, що ми збираємося використовувати всі елементи з кожної групи. Ви можете видалити те, що вам не потрібно, зі списку залежностей. Коли встановлюються залежності, запустіть bower install для встановлення залежностей у списку.

Цей процес може зайняти деякий час, оскільки він включає захоплення величезної кількості файлів зі сховищ. Після цього ви повинні знайти їх збережені в bower_components папки.

Відкрийте файл HTML, у якому ви хочете використовувати компоненти полімеру, посилання на WebComponents.js що є polyfill для браузерів, які ще не підтримують WebComponents, і імпортувати файли компонентів використовуючи імпорт HTML.

Ось приклад:

Це налаштування дозволить нам використовувати , , елементи.

Вітрини

Ось деякі веб-програми, які вже використовують Google Polymer.

Google

Google використовував Google Polymer на веб-сторінці Google IO 2015; Google Fi, бездротова послуга Google для операторів зв'язку та постачальників у партнерстві; і Google Music.

Спеціальні елементи

CustomElements - це хаб, де можна знайти власні елементи, побудовані за допомогою веб-компонентів. Він використовує елемент "Папір", щоб містити і будувати список. Він також надає зручний шлях для встановлення цих елементів через Bower і NPM.

Редактор Chrome Dev

Програма Chrome для редагування коду, яка працює напрочуд добре. Ця програма використовує кнопку FAB, меню "Папір" та елементи діалогового вікна "Папір" у інтерфейсі користувача.

Дизайнер полімерів

Інструмент для створення веб-додатків з полімерними елементами за допомогою інтерфейсу перетягування.

Щоденний прогноз запасу

Звіт про біржу і прогноз побудовані повністю з елементами полімерів.

Полімерна пошта

Додаток клієнта електронної пошти для Gmail. Це виглядає красиво і рідина, хоча, на жаль, вона не повністю функціонує.

Заключні думки

Полімер має величезний обсяг і може знадобитися деякий час, щоб звикнути до всіх користувацьких елементів, а також до його API. Тим не менш, веб-компоненти і полімер, безумовно, впливають на те, як ми будуємо веб-додатки. Залишайтеся попереду натовпу, читаючи більше про веб-компоненти - посилання наведені нижче.

• Переглянути демонстрацію
• Завантажити джерело

Корисні посилання

• Стан веб-компонентів
• Детальний вступ до користувацьких елементів
• Офіційний блог Google Polymer