Как да изградите уеб компонент с помощта на Stencil.js

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

Stencil.js е компилатор, който генерира уеб компоненти, които са съвместими с всички съвременни браузъри. Той предоставя инструменти и API, които да ви помогнат да изградите бързи, ефективни, мащабируеми уеб компоненти.

Първи стъпки със Stencil.js

За да започнете да използвате Stencil.js, първо трябва да го инициализирате на вашия компютър.

Направете това, като изпълните следната команда във вашия терминал node.js:

npm init шаблон

След като изпълните командата, на екрана ви ще се появи подкана, за да изберете с какъв проект искате да започнете:

За да продължите, изберете опцията за компонент, въведете името на вашия проект и потвърдете избора си:

След това променете в директорията на вашия проект и инсталирайте вашите зависимости, като изпълните тези команди:

cd first-stencil-project
npm инсталирайте

Създаване на нов уеб компонент

За да създадете нов уеб компонент в Stencil.js, създайте път на папка като src/компоненти. Папката с компоненти ще съдържа TypeScript файл, наречен на вашия компонент, като Stencil.js използва езика TypeScript и JSX за разработка на компоненти. Папката ще съдържа и CSS файл, който съдържа стила на вашия компонент.

Например, ако искате да създадете компонент, наречен "my-button", създайте файл, наречен my-button.tsx и CSS файл, наречен my-button.css. В my-button.tsx файл, дефинирайте вашия компонент с помощта на Stencil.js API:

импортиране { Компонент, h } от„@stencil/core“;
@Компонент({
 таг: "моят бутон",
 styleUrl: 'my-button.css',
 сянка: вярно,
})
износкласMyButton{
 рендер() {
връщане (
Щракнете върху мен</button>
 );
 }
}

Този код импортира Компонент и ч функции от Stencil.js. The Компонент функцията дефинира компонента, докато ч функция създава своя маркировка с помощта на HTML.

Дефинирайте своя компонент с помощта на @Компонент декоратор, който взема обект с три свойства: етикет, styleUrl, и сянка.

The етикет свойството съдържа името на етикета на компонента. The styleUrl указва CSS файла за стилизиране на персонализирания елемент. На последно място, сянка е булева стойност, която показва дали компонентът ще използва Shadow DOM, за да капсулира стиловете и поведението на потребителския елемент. В метода за изобразяване вие ​​създавате елемент на бутон.

В допълнение към styleUrl свойство, можете да използвате още две свойства, за да стилизирате вашия компонент: стил и styleUrls.

The стил свойството дефинира вградени стилове за компонента. Той приема низова стойност, която представлява CSS стиловете за компонента:

импортиране { Компонент, h } от„@stencil/core“;
@Компонент({
 таг: "моят бутон",
 стил: `
 бутон {
 подплата: 1рем 0.5rem;
 радиус на границата: 12px;
 семейство шрифтове: курсив;
 граница: няма;
 цвят: #e2e2e2;
 Цвят на фона: #333333;
 тегло на шрифта: удебелен;
 }
`,
 сянка: вярно,
})
износкласMyButton{
 рендер() {
връщане (
Щракнете върху мен</button>
 );
 }
}

The styleUrls свойството указва множество външни CSS файлове за стилизиране на компонента. Той приема масив от низови стойности, представляващи пътищата до CSS файловете:

импортиране { Компонент, h } от„@stencil/core“;
@Компонент({
 таг: "моят бутон",
 styleUrls: ['my-button.css', 'друг бутон.css'],
 сянка: вярно,
})
износкласMyButton{
 рендер() {
връщане (
Щракнете върху мен</button>
 );
 }
}

Изобразяване на уеб компонента

След като създадете вашия уеб компонент, можете да го изобразите в HTML файл, като добавите персонализиран таг на елемент. Ето как можете да включите компонента my-button:

html>
<htmlреж="ltr"език="bg">
<глава>
<метанабор от знаци="utf-8" />
<метаиме="viewport"съдържание="ширина=ширина на устройството, начален мащаб=1.0, минимален мащаб=1.0, максимален мащаб=5.0" />
<връзкаhref=""отн="стилов лист">
<заглавие>Стартер за компоненти на шаблонизаглавие>
<сценарийТип="модул"src="/build/first-stencil-project.esm.js">сценарий>
<сценарийномодулsrc="/build/first-stencil-project.js">сценарий>
глава>
<тяло>
<моят бутон>моят бутон>
тяло>
html>

Сега можете да създавате уеб компоненти с помощта на Stencil.js

Stencil.js е мощен инструмент за изграждане на уеб компоненти, които са бързи, ефективни и мащабируеми. Неговият API и инструменти улесняват създаването и управлението на уеб компоненти, а съвместимостта му с всички съвременни браузъри гарантира, че вашите компоненти ще работят добре в различни уеб приложения.

Тъй като уеб компонентите стават все по-популярни, Stencil.js е рамка, която трябва да имате предвид, когато създавате многократно използвани елементи за мрежата.