Це допис про Шнурок, бібліотека компонентів від Корі Лавіска, але з родзинкою. Він визначає всі ваші стандартні компоненти UX: вкладки, модальні елементи, акордеони, автозавершення та багато, набагато більше. Вони виглядають чудово з коробки, є доступними та повністю настроюються. Але замість того, щоб створювати ці компоненти в React, або Solid, або Svelte тощо, він створює їх за допомогою Веб-компоненти; це означає, що ви можете використовувати їх з будь-який рамки.
Деякі попередні речі
Веб-компоненти чудові, але зараз є кілька невеликих недоліків, про які слід знати.
Реагувати
Я сказав, що вони працюють у будь-якому фреймворку JavaScript, але, як я вже писав раніше, React підтримує веб-компоненти наразі бідний. Щоб вирішити цю проблему, шнурок насправді створені обгортки лише для React.
Інший варіант, який мені особисто подобається, полягає в тому, щоб створити тонкий компонент React, який приймає ім’я тегу веб-компонента та всі його атрибути та властивості, а потім виконує брудну роботу з усунення недоліків React. Я говорив про цей варіант у попередньому повідомленні. Мені подобається це рішення, оскільки воно призначене для видалення. Проблему сумісності веб-компонентів наразі вирішено в експериментальній гілці React, тож після доставки будь-який тонкий компонент, сумісний із веб-компонентом, який ви використовуєте, можна буде шукати та видаляти, залишаючи вам пряме використання веб-компонентів без будь-яких оболонок React.
Візуалізація на стороні сервера (SSR)
На момент написання цієї статті підтримка SSR також є поганою. Теоретично, є те, що називається Декларативний Shadow DOM (DSD), що увімкне SSR. Але підтримка браузера мінімальна, і в будь-якому випадку DSD дійсно вимагає підтримка сервера правильно працювати, а значить МАЙБУТНІ, Ремікс, або те, що ви випадково використовуєте на сервері, потребує певної спеціальної обробки.
Проте існують інші способи отримати веб-компоненти просто робота
з веб-додатком, який має SSR із чимось на зразок Next. Коротка версія полягає в тому, що сценарії, що реєструють ваші веб-компоненти, повинні запускатися в сценарії блокування, перш ніж ваша розмітка буде проаналізована. Але це тема для іншої публікації.
Звичайно, якщо ви створюєте SPA будь-якого типу, відтвореного клієнтом, це не проблема. Саме з цим ми будемо працювати в цій публікації.
Давайте розпочнемо
Оскільки я хочу, щоб ця публікація зосередилася на шнурку та його природі веб-компонента, я буду використовувати Свельте за все. Я також буду використовувати це Проект Stackblitz для демонстрації. Ми створимо цю демонстрацію разом, крок за кроком, але не соромтеся відкрити REPL у будь-який час, щоб побачити кінцевий результат.
Я покажу вам, як використовувати шнурок і, що важливіше, як його налаштувати. Ми поговоримо про Тіньові DOM і які стилі вони блокують від зовнішнього світу (а також які вони не блокують). Ми також поговоримо про ::part Селектор CSS — який може бути абсолютно новим для вас — і ми навіть побачимо, як Shoelace дозволяє нам перевизначати та налаштовувати різноманітні його анімації.
Якщо після прочитання цієї публікації вам подобається Shoelace і ви хочете спробувати його в проекті React, моя порада — використовувати обгортка як я згадував у вступі. Це дозволить вам використовувати будь-який із компонентів Shoelace, і його можна взагалі видалити, коли React надішле виправлення веб-компонента, які вони вже мають (шукайте це у версії 19).
Представляємо шнурок
Шнурок досить деталізований Інструкції з Інсталяції. У найпростішому випадку ви можете зробити дамп та теги у ваш документ HTML, і це все. Однак для будь-якої робочої програми ви, ймовірно, захочете імпортувати лише те, що вам потрібно, і для цього також є інструкції.
Встановивши Shoelace, давайте створимо компонент Svelte для відтворення певного вмісту, а потім виконаємо кроки, щоб повністю налаштувати його. Щоб вибрати щось досить нетривіальне, я використав компоненти вкладок і діалогового вікна (які зазвичай називають модальними). Ось трохи розмітки взято в основному з документів:
General
Custom
Advanced
Disabled
This is the general tab panel.
This is the custom tab panel.
This is the advanced tab panel.
This is a disabled tab panel.
Hello World!
Це рендерить кілька гарних, стилізованих вкладок. Підкреслення на активній вкладці навіть добре анімується та ковзає від однієї активної вкладки до іншої.
Я не буду витрачати ваш час на перегляд кожного дюйма API, які вже добре задокументовані на веб-сайті Shoelace. Натомість давайте розглянемо, як краще взаємодіяти з цими веб-компонентами та повністю налаштувати їх.
Взаємодія з API: методи та події
Методи виклику та підписки на події у веб-компоненті можуть дещо відрізнятися від тих, до яких ви звикли у своїй звичайній системі вибору, але це не надто складно. Давайте подивимось як.
Tabs
Компонент вкладок () має show метод, яка вручну показує певну вкладку. Щоб викликати це, нам потрібно отримати доступ до основного елемента DOM наших вкладок. У Svelte це означає використовувати bind:this. У React це було б a ref. І так далі. Оскільки ми використовуємо Svelte, давайте оголосимо змінну для нашого tabs примірник:
let tabs;
…і зв’яжіть його:
Тепер ми можемо додати кнопку для його виклику:
Це та сама ідея для заходів. Є sl-tab-show подія який запускається, коли відкривається нова вкладка. Ми могли б використати addEventListener задати на нашому tabs або ми можемо використати змінну Svelte on:event-name ярлик
console.log(e)}>Це працює та реєструє об’єкти подій, коли ви показуєте різні вкладки.
Зазвичай ми відтворюємо вкладки та дозволяємо користувачеві клацати між ними, тому ця робота зазвичай навіть не потрібна, але вона доступна, якщо вам це потрібно. Тепер давайте зробимо діалоговий компонент інтерактивним.
Діалог
Компонент діалогу () приймає open prop, який контролює, чи діалогове вікно... відкрито. Давайте оголосимо це в нашому компоненті Svelte:
let tabs;
let open = false;
Вона також має sl-hide подія, коли діалогове вікно приховано. Давайте передамо наші open опора і прив'язка до hide подія, щоб ми могли скинути її, коли користувач клацає за межами вмісту діалогового вікна, щоб закрити його. І давайте додамо обробник клацань до цієї кнопки закриття, щоб налаштувати наші open опора на false, що також закриє діалогове вікно.
open = false}>
Hello World!
Нарешті, давайте підключимо нашу кнопку відкриття діалогу:
І це все. Взаємодія з API бібліотеки компонентів більш-менш проста. Якби це все, що робив цей пост, було б досить нудно.
Але Shoelace — створений за допомогою веб-компонентів — означає, що деякі речі, зокрема стилі, працюватимуть дещо інакше, ніж ми могли б звикнути.
Налаштуйте всі стилі!
На момент написання цієї статті Shoelace все ще перебуває в бета-версії, і творець розглядає можливість зміни деяких стилів за замовчуванням, можливо, навіть повного видалення деяких стандартних, щоб вони більше не замінювали стилі вашої хост-програми. Концепції, які ми розглянемо, є доречними в будь-якому випадку, але не дивуйтеся, якщо деякі особливості шнурків, які я згадую, будуть іншими, коли ви їх використаєте.
Незважаючи на гарні стилі Shoelace за замовчуванням, ми можемо мати власні дизайни в нашому веб-додатку, і ми хочемо, щоб наші компоненти UX відповідали. Давайте подивимося, як би ми зробили це у світі веб-компонентів.
Насправді ми не намагатимемось удосконалювати що завгодно. Творець Shoelace набагато кращий дизайнер, ніж я коли-небудь буду. Замість цього ми просто розглянемо, як це зробити зміна речі, щоб ви могли адаптуватися до своїх власних веб-програм.
Короткий огляд Shadow DOM
Подивіться на один із заголовків вкладок у своїх DevTools; це має виглядати приблизно так:
Наш елемент вкладки створив a div контейнер з a .tab та .tab--active клас і а tabindex, а також відображає текст, який ми ввели для цієї вкладки. Але зауважте, що він знаходиться всередині a тіньовий корінь. Це дозволяє авторам веб-компонентів додавати власну розмітку до веб-компонентів, а також забезпечувати місце для вмісту we забезпечити. Зверніть увагу на елемент? По суті, це означає «розмістіть будь-який вміст, який відтворив користувач між теги веб-компонента тут».
Так що компонент створює тіньовий корінь, додає до нього деякий вміст, щоб відобразити гарно оформлений заголовок вкладки разом із заповнювачем (), який відображає наш вміст усередині.
Інкапсульовані стилі
Однією з класичних, більш неприємних проблем веб-розробки завжди були стилі каскадні туди, де ми їх не хочемо. Ви можете хвилюватися, що будь-які правила стилю в нашій програмі вказують щось подібне div.tab буде заважати цим вкладкам. Виявляється, це не проблема; тіньові корені інкапсулюють стилі. Стилі поза тіньовим коренем не впливають на те, що знаходиться в тіньовому корені (за деякими винятками, про які ми поговоримо), і навпаки.
Винятком є успадковані стилі. Вам, звичайно, не потрібно застосовувати a font-family стиль для кожного елемента вашої веб-програми. Натомість ви можете вказати свій font-family раз, на :root or html і успадкувати його всюди під ним. Ця спадщина, власне, проб’є і тіньовий корінь.
Спеціальні властивості CSS (часто звані «змінними CSS») є пов’язаним винятком. Тіньовий корінь може абсолютно читати властивість CSS, яка визначена поза тіньовим коренем; це стане актуальним за мить.
Команда ::part селектор
Що щодо стилів, які НЕ успадкувати. Що, якщо ми хочемо налаштувати щось подібне cursor, який не успадковує, на щось всередині тіньового кореня. Нам не пощастило? Виявляється, ми ні. Погляньте ще раз на зображення елемента вкладки вище та його тіньовий корінь. Зверніть увагу на part атрибут на div? Це дозволяє націлити та стилізувати цей елемент поза межами тіньового кореня за допомогою ::part селектор. Ми трохи розглянемо приклад.
Основні стилі шнурків
Давайте подивимося на дію кожного з цих підходів. В даний час, багато стилів шнурка, включаючи шрифти, отримують значення за замовчуванням із користувацьких властивостей CSS. Щоб узгодити ці шрифти зі стилями вашої програми, замініть користувацькі властивості, про які йдеться. Побачити документи щоб отримати інформацію про те, які змінні CSS використовує Shoelace, або ви можете просто перевірити стилі в будь-якому заданому елементі в DevTools.
Успадкування стилів через тіньовий корінь
Відкрийте app.css файл у файлі src каталог Проект StackBlitz, в :root внизу ви повинні побачити a letter-spacing: normal; декларація. Оскільки letter-spacing властивість успадковується, спробуйте встановити нове значення, наприклад 2px. Під час збереження весь вміст, включаючи заголовки вкладок, визначені в тіньовому корені, буде відповідним чином скориговано.
Перезапис змінних CSS Shoelace
Команда компонент читає an --indicator-color Спеціальна властивість CSS для підкреслення активної вкладки. Ми можемо змінити це за допомогою базового CSS:
sl-tab-group {
--indicator-color: green;
}І ось тепер у нас є зелений індикатор!
Частини запиту
У версії Shoelace, якою я зараз користуюся (2.0.0-beta.83), будь-яка невимкнена вкладка має pointer курсор. Давайте змінимо це на курсор за замовчуванням для активної (вибраної) вкладки. Ми вже бачили, що елемент додає a part="base" атрибут у контейнері для заголовка вкладки. Крім того, поточна вибрана вкладка отримує active атрибут. Давайте використаємо ці факти, щоб націлити активну вкладку та змінити курсор:
sl-tab[active]::part(base) {
cursor: default;
}І це все!
Налаштування анімацій
Трохи вишеньки на метафоричному торті, давайте подивимось, як Shoelace дозволяє нам налаштовувати анімацію. Шнурок використовує API веб-анімації, і викриває a setDefaultAnimation API для контролю того, як різні елементи анімують свою взаємодію. Перегляньте документи, щоб дізнатися більше, але як приклад, ось як ви можете змінити анімацію діалогового вікна Shoelace за замовчуванням із розгортання назовні та звуження всередину, натомість анімувати згори та опускатися вниз, приховуючи.
import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";
setDefaultAnimation("dialog.show", {
keyframes: [
{ opacity: 0, transform: "translate3d(0px, -20px, 0px)" },
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
],
options: { duration: 250, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});
setDefaultAnimation("dialog.hide", {
keyframes: [
{ opacity: 1, transform: "translate3d(0px, 0px, 0px)" },
{ opacity: 0, transform: "translate3d(0px, 20px, 0px)" },
],
options: { duration: 200, easing: "cubic-bezier(0.785, 0.135, 0.150, 0.860)" },
});Цей код знаходиться в App.svelte файл. Прокоментуйте це, щоб побачити оригінальну анімацію за замовчуванням.
Підводячи підсумок
Shoelace — це неймовірно амбітна бібліотека компонентів, створена за допомогою веб-компонентів. Оскільки веб-компоненти не залежать від структури, їх можна використовувати в будь-якому проекті з будь-якою структурою. З новими фреймворками, які починають з’являтися як із дивовижними характеристиками продуктивності, так і з простотою використання, можливість використовувати якісні віджети для користувача, які не прив’язані до жодного фреймворку, ніколи не була такою переконливою.
