Гоогле Полимер - Како ће променити начин на који су веб апликације изграђене

и елемената који изграђују контроле УИ плејера у тајности.

Данас, са Веб Компонентама, можемо да именујемо и наше сопствене елементе. Можемо изградити елемент као, уградити Твиттер феед или (можда) да бисте уградили графикон.

Осим тога, ови прилагођени елементи могу такође имати неколико прихваћених прилагођених атрибута. У вези са елемент, постављате атрибут који се зове корисничко име који ће се користити за одређивање Твиттер корисничког имена.

Цустом Елементс ин Полимер

Полимер долази са гомилом елемената који рачунају на (скоро) сваку потребу за Веб апликацијом. Гоогле дијели ове елементе у групе: жељезни елементи, папирни елементи, Гоогле Веб компоненте, златни елементи, неонски елементи, Платинум елементи и молекули.

1. Ирон Елементс

Ирон Елементс је скуп основних елемената. Ови основни елементи су оно што обично користимо направите веб страницу као што су улаз, форма и слика. Разлика је у томе што Полимер додаје неке додатне моћи тим елементима.

Сви елементи у овој групи су гвожђе- префиксом, на пример , која се користи за приказивање слике. Тхе елемент је опремљен неким додатним атрибутима које не можемо примијенити у редовном елемент. Можемо, на примјер, додати прелоад, фаде, и плацехолдер атрибути:

Горњи пример ће прво приказати резервисано место слике, а затим избледети у стварну слику у срц док је потпуно напуњен, обављање глатког ефекта учитавања слике.

2. Елементи папира

Тхе Папер Елементс је група елемената дизајна материјала. Материјални дизајн је Гоогле-ов језик дизајна како би корисничко сучеље и искуство преко Гоогле платформи и Веб и Андроид апликације постали визуално конзистентнији. Неки елементи који су јединствени за Материјални дизајн су Папир и плутајући акциони тастер (ФАБ).

Папер

Папер је Гоогле-ова метафора за медиј који је у основи садржаја. Да бисте додали папир са Полимер-ом, ми користимо елемент. Овај елемент има 2 атрибута:

• надморска висина да подигнете папир, додајући сенку како би ојачали висину
• аниматед ће применити анимацију као промену висине папира.

Плутајући дугме за рад (ФАБ)

Флоатинг Ацтион Буттон (ФАБ) је кружно дугме са иконом, које лебди на екрану, обично са истакнутом бојом. Гоогле предлаже да ово дугме носи функцију која се често приступа. Ево примера:

Сљедећи исјечак кода додаје папирни материјал са сликом и ФАБ-ом.

Имаћемо следећи резултат:

Имамо фотографију са а “срце” дугме које лебди на врху. Кликните на Лике Лике пхото, и дугме даје ефекат мрешкања да бисте потврдили клик.

• Погледајте Демо папира

3. Гоогле Веб Цомпонентс

Гоогле Веб Компоненте су посебни елементи који се носе са Гоогле АПИ-јем и услугама као што су Гоогле Мапс, Иоутубе, као и Гоогле Феед, да наведемо само неке. Елементи у овој групи учинити интеракцију са Гоогле услугама само неколико редова.

Следи пример за приказивање Гоогле мапе помоћу елемент.

  Ово је Гооглеплек  

Као што можете горе, елемент узима ширина и лонгитуде да одредите локацију на мапи. Можемо такође да гнезде да бисте приказали ознаку мапе те локације заједно са текстом који ће се појавити када кликнете на маркер.

• Погледајте мапу Демо

Желите ли да прикажете Иоутубе видео? можете користити елемент.

Слично томе, прилагођавамо излаз кроз атрибуте.

• Погледајте ИоуТубе Демо

4. Голд Елементс

Златни елементи су елементи дизајнирани посебно за апликације за е-трговину. Овде ћете наћи елемент за приказ кредитне картице, е-поште, телефона и ЗИП улаза који су сви опремљени валидација формата како би се осигурао исправан унос података и сигурност. Ево једног примера за додавање уноса Виса кредитне картице.

5. Остали елементи

Остали елементи укључују Неон елементе за анимацију и специјалне ефекте, Платинум елементе за оффлине и пусх обавештења и на крају Молекуле, омоте за треће стране.

Напомена уредника: У време писања овог текста, Неон Елементс, Платинум Елементс и Молецулес још увек нису доступни.

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

Желите ли користити Полимер у вашем веб развоју? Ево како га инсталирати и интегрирати у ваше веб странице. Пошто се већина полимерних елемената ослања једни на друге, најбољи начин да се инсталира Полимер је Бовер.

Бовер је менаџер пројектних зависности који олакшава инсталирање скрипти или стилова потребних за покретање пројекта. Погледајте наш ранији пост о томе како да инсталирате, ажурирате и уклоните веб библиотеке са Бовер-ом.

Да бисте интегрисали Полимер, покрените Терминал, а затим идите до директоријума пројекта, под претпоставком да сте га креирали. Онда трчи бовер инит наредбу да покренете бовер.јсон датотеку у ваш пројекат који ће се користити за снимање зависности пројекта. Отворите бовер.јсон и додајте следеће линије.

 "Зависности": "полимер": "Полимер / полимер # ^ 1.0.0", "гоогле-веб-компоненте": "ГооглеВебЦомпонентс / гоогле-веб-цомпонентс # ^ 1.0.0", "ирон-елементс": " ПолимерЕлементс / ирон-елементс # ^ 1.0.0 "," папирни елементи ":" ПолимерЕлементс / папер-елементс # ^ 1.0.0 "," златни елементи ":" ПолимерЕлементс / голд-елементс # ^ 1.0.0 " 

Ова поставка претпоставља да ћемо користити све елементе из сваке групе. Можете уклонити оно што вам није потребно са листе зависности. Како се зависности подешавају, покрените бовер инсталл да бисте инсталирали зависности на листи.

Овај процес може потрајати јер укључује прикупљање огромне количине датотека из спремишта. Када завршите, требали бисте их пронаћи спремљене у бовер_цомпонентс фолдер.

Отворите ХТМЛ датотеку у којој желите користити компоненте Полимер. Унутар главе документа, линк тхе ВебЦомпонентс.јс који је полифилл за претраживаче који још не подржавају ВебЦомпонентс, и увезите датотеке компоненти користећи ХТМЛ увоз.

Ево примера:

Ово подешавање ће нам омогућити да користимо , , елементи.

Сховцасес

Ево неких веб апликација које већ користе Гоогле Полимер.

Гоогле

Гоогле је користио Гоогле Полимер на Гоогле ИО 2015 веб страници; Гоогле Фи, Гоогле бежични сервис за оператере и добављаче у партнерству; и Гоогле Мусиц.

Цустом Елементс

ЦустомЕлементс је чвориште где можете пронаћи прилагођене елементе изграђене са Веб компонентама. Користи елемент Папер да садржи и направи листу. Он такође пружа згодан пут за инсталирање ових елемената преко Бовер-а и НПМ-а.

Цхроме Дев Едитор

Цхроме апликација за уређивање кода која делује изненађујуће добро. Ова апликација користи ФАБ дугме, мени папира и елементе дијалога Папир у корисничком интерфејсу.

Полимер Десигнер

Алат за израду веб апликација са полимерним елементима помоћу драг-анд-дроп интерфејса.

Даили Стоцк Форецаст

Извештај о берзи и прогноза изграђена у потпуности са елементима полимера.

Полимер Маил

Апликација клијента е-поште за Гмаил. Изгледа лепо и флуидно, иако нажалост не функционише у потпуности.

Последње мисли

Полимер има огроман опсег и можда ће вам требати неко време да се навикнете на све прилагођене елементе као и на његов АПИ. Ипак, Веб Компоненте и Полимер ће свакако утицати на начин на који градимо веб апликације. Останите испред публике читајући више о Веб компонентама - референце се налазе испод.

• Виев Демо
• Довнлоад Соурце

Усефул Референцес

• Стање Веб компоненти
• Детаљан увод у прилагођене елементе
• Службени блог Гоогле Полимера