Google Polymer - Как ще се промени начинът, по който са изградени уеб приложенията

и елементи, които изграждат контролите на потребителския интерфейс в тайна.

Днес, с Уеб Компоненти, можем също така да назовем нашите собствени елементи. Можем да изградим подобен елемент, да вградите Twitter емисия или (може би) да вградите диаграма.

Освен това тези персонализирани елементи могат да имат и няколко приети потребителски атрибута. По отношение на. \ T елемент, задавате атрибут, наречен потребителско име които ще се използват за задаване на потребителското име в Twitter.

Потребителски елементи в полимер

Полимерът идва с куп елементи, които отчитат (почти) нуждите на всяко уеб приложение. Google разделя тези елементи на групи: железни елементи, хартиени елементи, уеб компоненти на Google, златни елементи, неонови елементи, платинени елементи и молекули.

1. Железни елементи

Iron Elements е колекция от основни елементи. Тези основни елементи са това, което обикновено използваме изграждане на уеб страница като вход, форма и образ. Разликата е, че Polymer добавя някои допълнителни сили към тези елементи.

Всички елементи в тази група са желязо- префикс, например , който се използва за показване на изображение. Най- елемент е оборудван с някои допълнителни атрибути, които не можем да приложим в редовните елемент. Можем например да добавим натоварването, замирам, и контейнер атрибути:

Горният пример първо ще покаже мястото за запазване на изображението и след това ще избледнее в самото изображение в SRC тъй като е напълно заредена, извършване на плавен ефект на зареждане на изображението.

2. Хартиени елементи

Най- Хартиени елементи е група елементи на материалния дизайн. Материалният дизайн е Google Design Language, за да направи потребителския интерфейс и опита в платформите на Google както уеб, така и Android приложенията по-визуално последователни. Някои елементи, които са уникални за Материалния дизайн, са Бутон и плаващ бутон за действие (FAB).

хартия

хартия е метафора на Google за средата, която е в основата на съдържанието. За да добавите хартия с полимер, ние използваме елемент. Този елемент отнема 2 атрибута:

• височина за да вдигнете хартията, като по този начин добавите сянка, за да подсилите височината
• анимационен ще приложи анимация като промяна на височината на хартията.

Плаващ бутон за действие (FAB)

Бутонът с плаващо действие (FAB) е кръгъл бутон с икона, плаващ на екрана, обикновено с изпъкнал цвят. Google предполага, че този бутон носи често достъпна функция. Ето един пример:

Следният кодов фрагмент добавя Paper Material с изображение и FAB.

Ще имаме следния резултат:

Имаме снимка с a “сърце” бутонът е плаващ върху него. Кликнете върху Подобно на снимката, и бутонът дава ефект на разчесване, за да потвърдите кликването.

• Вижте демонстрацията на хартия

3. Google Web Components

Уеб компонентите на Google са специални елементи, които се справят с Google API и услуги като Google Карти, YouTube, както и с Google Feed, за да назовем само няколко. Елементи в тази група направете взаимодействие с услугите на Google само на няколко реда.

Следното е пример за показване на Google Map с помощта на елемент.

  Това е Googleplex  

Както можете по-горе, елемент взема географска ширина и дължина , за да укажете местоположението на картата. Можем също да гневим за да покажете маркер на картата на това местоположение заедно с текст, който ще се покаже при кликване върху маркера.

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

Искате ли да покажете видеоклип в Youtube? можете да използвате елемент.

По същия начин ние персонализираме изхода чрез атрибути.

• Вижте демо версията на YouTube

4. Златни елементи

Златните елементи са елементи, създадени специално за приложения за електронна търговия. Тук ще намерите елемент за показване на кредитна карта, електронна поща, телефон и ZIP вход, които са оборудвани с всички валидиране на формат за да се гарантира правилното въвеждане на данни и сигурността. Ето един пример за добавяне на данни за кредитна карта Visa.

5. Други елементи

Останалите елементи включват Neon елементи за анимация и специални ефекти, Platinum елементи за офлайн и push известия и накрая Molecules, wrappers за трети страни библиотеки.

Бележка на редактора: По време на това писание, неонови елементи, платинени елементи и молекули все още не са налични.

Интегриране на полимер

Искате ли да използвате Polymer в уеб разработката си? Ето как да го инсталирате и интегрирате в уеб страниците си. Тъй като повечето полимерни елементи разчитат един на друг, най-добрият начин да инсталирате Polymer е чрез Bower.

Bower е мениджър за зависимостите от проекти, който улеснява инсталирането на скриптове или стилове, необходими за изпълнението на проекта. Вижте по-ранния ни пост за това как лесно да инсталирате, актуализирате и премахвате уеб библиотеки с Bower.

За да интегрирате Polymer, стартирайте Terminal, след това преминете към директорията на вашия проект, ако приемете, че сте го създали. След това стартирайте инича команда за иницииране на файла bower.json във вашия проект, който ще се използва за записване на зависимостите от проекта. Отворете bower.json и добавете следните редове.

 "зависимости": "полимер": "Полимер / полимер # ^ 1.0.0", "Google-уеб-компоненти": "GoogleWebComponents / google-web-components # ^ 1.0.0", "железни елементи": " PolymerElements / железни елементи # ^ 1.0.0 "," хартиени елементи ":" PolymerElements / paper-elements # ^ 1.0.0 "," gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Тази настройка предполага, че ще използваме всички елементи от всяка група. Можете да премахнете това, от което не се нуждаете, от списъка на зависимостите. Тъй като зависимости са зададени, стартирайте bower инсталация команда за инсталиране на зависимости в списъка.

Този процес може да отнеме известно време, тъй като включва захващане на огромно количество файлове от хранилищата. След като сте го направили, трябва да ги намерите записани в bower_components папка.

Отворете HTML файла, в който искате да използвате компонентите Polymer. В главата на документа, свържете WebComponents.js кой е Polyfill за браузъри, които все още не поддържат WebComponents, и импортирайте файловете на компонентите използване на HTML импортиране.

Ето един пример:

Тази настройка ще ни позволи да използваме , , елементи.

Витрини

Ето някои от уеб приложенията, които вече използват Google Polymer.

Google

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

Персонализирани елементи

CustomElements е център, в който можете да намерите персонализирани елементи, изградени с уеб компоненти. Той използва елемента Paper, за да съдържа и изгражда списъка. Той също така осигурява удобен път за инсталиране на тези елементи чрез Bower и NPM.

Chrome Dev Editor

Приложение на Chrome за редактиране на код, което работи учудващо добре. Това приложение използва бутона FAB, менюто Paper и Paper диалогови елементи в потребителския интерфейс.

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

Инструмент за изграждане на уеб приложение с полимерни елементи с помощта на интерфейс за плъзгане и пускане.

Дневна прогноза за запасите

Доклад на борсата и прогноза, изградени изцяло с елементи от полимера.

Полимерна поща

Приложение за имейл клиент за Gmail. Изглежда хубаво и течно, въпреки че за съжаление не функционира напълно.

Заключителни мисли

Полимерът има огромен обхват и може да ви отнеме известно време, за да свикнете с всички потребителски елементи, както и с неговите API. Въпреки това, Web Components и Polymer със сигурност ще повлияят на начина, по който изграждаме уеб приложения. Останете пред тълпата, като прочетете повече за Web Components - препратките са намерени по-долу.

• Преглед на демо
• Изтеглете Източник

Полезни справки

• Състояние на уеб компоненти
• Подробно въведение в потребителските елементи
• Официален блог на Google Polymer