Како направити веб компоненту користећи Стенцил.јс

Веб компоненте су скуп технологија које вам омогућавају да креирате елементе за вишекратну употребу и поново их користите у различитим веб апликацијама.

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

Почетак рада са Стенцил.јс

Да бисте започели са Стенцил.јс, прво морате да га иницијализујете на рачунару.

Урадите то тако што ћете покренути следећу команду у свом ноде.јс терминалу:

нпм инит шаблон

Након што покренете команду, на екрану ће се појавити упит да изаберете пројекат са којим желите да почнете:

Да бисте наставили, изаберите опцију компоненте, унесите назив пројекта и потврдите избор:

Затим пређите у директоријум свог пројекта и инсталирајте своје зависности тако што ћете покренути ове команде:

цд фирст-стенцил-пројецт
нпм инсталл

Креирање нове веб компоненте

Да бисте креирали нову веб компоненту у Стенцил.јс, направите путању фасцикле као што је срц/компоненте. Фасцикла компоненте ће садржати ТипеСцрипт датотеку названу по вашој компоненти, као Стенцил.јс користи језик ТипеСцрипт и ЈСКС за развој компоненти. Фасцикла ће такође садржати ЦСС датотеку која садржи стил ваше компоненте.

На пример, ако желите да направите компоненту под називом "моје дугме", креирајте датотеку под називом ми-буттон.тск и ЦСС датотека под називом ми-буттон.цсс. У ми-буттон.тск датотеку, дефинишите своју компоненту користећи Стенцил.јс АПИ:

увоз { Компонента, х} из'@стенцил/цоре';
@Саставни део({
 ознака: 'моје дугме',
 стилеУрл: 'ми-буттон.цсс',
 сенка: истина,
})
извозкласаМиБуттон{
 дати, пружити() {
повратак (
Кликните на Ме</button>
 );
 }
}

Овај код увози Саставни део и х функције из Стенцил.јс. Тхе Саставни део функција дефинише компоненту, док је х функција креира своје ознаке користећи ХТМЛ.

Дефинишите своју компоненту користећи @Саставни део декоратер, који узима објекат са три својства: таг, стилеУрл, и сенка.

Тхе таг својство садржи назив ознаке компоненте. Тхе стилеУрл својство специфицира ЦСС датотеку за стилизовање прилагођеног елемента. На крају, сенка својство је логичка вредност која показује да ли ће компонента користити Схадов ДОМ за енкапсулацију стилова и понашања прилагођеног елемента. У методи рендеровања креирате елемент дугмета.

Поред већ стилеУрл својство, можете користити још два својства за стилизовање своје компоненте: стил и стилеУрлс.

Тхе стил својство дефинише инлине стилове за компоненту. Узима вредност стринга која представља ЦСС стилове за компоненту:

увоз { Компонента, х} из'@стенцил/цоре';
@Саставни део({
 ознака: 'моје дугме',
 стил: `
 дугме {
 паддинг: 1рем 0.5рем;
 радијус границе: 12пк;
 фонт-фамили: цурсиве;
 граница: нема;
 боја: #е2е2е2;
 боја позадине: #333333;
 фонт-веигхт: болд;
 }
`,
 сенка: истина,
})
извозкласаМиБуттон{
 дати, пружити() {
повратак (
Кликните на Ме</button>
 );
 }
}

Тхе стилеУрлс својство наводи више спољних ЦСС датотека за стилизовање компоненте. Потребно је низ вредности стрингова који представљају путање до ЦСС датотека:

увоз { Компонента, х} из'@стенцил/цоре';
@Саставни део({
 ознака: 'моје дугме',
 стилеУрлс: ['ми-буттон.цсс', 'анотхер-буттон.цсс'],
 сенка: истина,
})
извозкласаМиБуттон{
 дати, пружити() {
повратак (
Кликните на Ме</button>
 );
 }
}

Рендеровање веб компоненте

Када направите своју веб компоненту, можете је приказати у ХТМЛ датотеци додавањем прилагођене ознаке елемента. Ево како можете да укључите компоненту ми-дугме:

хтмл>
<хтмлдир="лтр"ланг="ен">
<глава>
<метацхарсет="утф-8" />
<метаиме="виевпорт"садржаја="видтх=девице-видтх, инитиал-сцале=1.0, минимал-сцале=1.0, макимум-сцале=5.0" />
<линкхреф=""рел="стилесхеет">
<наслов>Стенцил Цомпонент Стартернаслов>
<скриптатип="модул"срц="/буилд/фирст-стенцил-пројецт.есм.јс">скрипта>
<скриптаномодулесрц="/буилд/фирст-стенцил-пројецт.јс">скрипта>
глава>
<тело>
<моје дугме>моје дугме>
тело>
хтмл>

Сада можете да креирате веб компоненте користећи Стенцил.јс

Стенцил.јс је моћан алат за прављење веб компоненти које су брзе, ефикасне и скалабилне. Његов АПИ и алати олакшавају креирање и управљање веб компонентама, а његова компатибилност са свим модерним претраживачима осигурава да ће ваше компоненте добро функционисати у различитим веб апликацијама.

Како веб компоненте постају све популарније, Стенцил.јс је оквир који треба да узмете у обзир када правите елементе за вишекратну употребу за веб.