Это пост о шнурки, библиотека компонентов от Кори ЛаВиска, но с изюминкой. Он определяет все ваши стандартные компоненты UX: вкладки, модальные окна, аккордеоны, автозаполнение и намного больше. Они выглядят красиво «из коробки», доступны и полностью настраиваемы. Но вместо того, чтобы создавать эти компоненты в React, Solid или Svelte и т. д., он создает их с помощью Веб-компоненты; это означает, что вы можете использовать их с любой фреймворк.
Некоторые предварительные вещи
Веб-компоненты — это здорово, но в настоящее время есть несколько небольших проблем, о которых следует знать.
реагировать
Я сказал, что они работают в любой среде JavaScript, но, как я уже писал ранее, поддержка веб-компонентов в React ограничена. в настоящее время бедный. Чтобы решить эту проблему, Shoelace на самом деле созданные оболочки только для Реакта.
Другой вариант, который мне лично нравится, — создать тонкий компонент React, который принимает имя тега веб-компонента и все его атрибуты и свойства, а затем выполняет грязную работу по устранению недостатков React. я говорил об этом варианте в предыдущем посте. Мне нравится это решение, потому что оно предназначено для удаления. Проблема совместимости веб-компонентов в настоящее время исправлена в экспериментальной ветке React, поэтому после ее выпуска любой используемый вами тонкий компонент, совместимый с веб-компонентами, можно будет найти и удалить, оставив вам возможность прямого использования веб-компонентов без каких-либо оболочек React.
Рендеринг на стороне сервера (SSR)
На момент написания этой статьи поддержка SSR также была плохой. Теоретически есть что-то, называемое Декларативное теневое 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 это было бы 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-компоненты соответствовали друг другу. Давайте посмотрим, как бы мы поступили с этим в мире веб-компонентов.
Мы не будем пытаться на самом деле улучшать что-либо. Создатель шнурков — гораздо лучший дизайнер, чем я когда-либо буду. Вместо этого мы просто посмотрим, как изменение вещи, чтобы вы могли адаптироваться к своим собственным веб-приложениям.
Краткий обзор Shadow DOM
Взгляните на один из этих заголовков вкладок в DevTools; это должно выглядеть примерно так:
Наш элемент табуляции создал div контейнер с .tab и .tab--active класс и tabindex, а также отображает текст, который мы ввели для этой вкладки. Но обратите внимание, что он находится внутри теневой корень. Это позволяет авторам веб-компонентов добавлять свою собственную разметку к веб-компоненту, а также предоставляет место для содержимого. we предоставлять. Обратите внимание на элемент? По сути, это означает: «помещайте любой контент, отображаемый пользователем, между теги веб-компонента здесь".
Итак компонент создает теневой корень, добавляет к нему некоторый контент для визуализации красиво оформленного заголовка вкладки вместе с заполнителем (), который отображает наш контент внутри.
Инкапсулированные стили
Одной из классических и наиболее неприятных проблем в веб-разработке всегда были стили. каскадный в места, где они нам не нужны. Вы можете беспокоиться, что любые правила стиля в нашем приложении, которые определяют что-то вроде div.tab будет мешать этим вкладкам. Оказывается, это не проблема; теневые корни инкапсулируют стили. Стили вне теневого корня не влияют на то, что находится внутри теневого корня (за некоторыми исключениями, о которых мы поговорим), и наоборот.
Исключением являются наследуемые стили. Вам, конечно, не нужно применять font-family стиль для каждого элемента вашего веб-приложения. Вместо этого вы можете указать свой font-family однажды, на :root or html и пусть он наследуется везде ниже него. Это наследование фактически проникнет и в теневой корень.
Пользовательские свойства CSS (часто называемые «переменными CSS») являются связанным с этим исключением. Теневой корень может абсолютно прочитать свойство CSS, определенное вне теневого корня; это станет актуальным через мгновение.
Ассоциация ::part селектор
А как насчет стилей, которые не наследовать. Что, если мы хотим настроить что-то вроде cursor, который не наследует что-то внутри теневого корня. Нам не повезло? Оказывается, нет. Взгляните еще раз на изображение элемента вкладки выше и его теневой корень. Обратите внимание на part атрибут на div? Это позволяет вам нацеливаться на этот элемент и стилизовать его вне теневого корня, используя ::part селектор. Мы немного пройдемся по примеру.
Переопределение стилей шнурков
Давайте посмотрим каждый из этих подходов в действии. На данный момент, много стилей шнурков, включая шрифты, получают значения по умолчанию из пользовательских свойств CSS. Чтобы привести эти шрифты в соответствие со стилями вашего приложения, переопределите соответствующие пользовательские реквизиты. Видеть документы для получения информации о том, какие переменные CSS использует Shoelace, или вы можете просто проверить стили в любом элементе в DevTools.
Наследование стилей через теневой корень
Откройте приложение app.css подать в src справочник Проект StackBlitz. В :root раздел внизу, вы должны увидеть letter-spacing: normal; декларация. Поскольку letter-spacing свойство наследуется, попробуйте установить новое значение, например 2px. При сохранении весь контент, включая заголовки вкладок, определенные в теневом корне, будет соответствующим образом изменен.
Перезапись CSS-переменных Shoelace
Ассоциация компонент считывает --indicator-color Пользовательское свойство CSS для подчеркивания активной вкладки. Мы можем переопределить это с помощью базового CSS:
sl-tab-group {
--indicator-color: green;
}И вот так у нас теперь есть зеленый индикатор!
Запрос частей
В версии Shoelace, которую я использую сейчас (2.0.0-beta.83), любая неотключенная вкладка имеет pointer курсор. Давайте изменим его на курсор по умолчанию для активной (выбранной) вкладки. Мы уже видели, что элемент добавляет part="base" атрибут контейнера для заголовка вкладки. Кроме того, текущая выбранная вкладка получает значок active атрибут. Давайте воспользуемся этими фактами, чтобы выбрать активную вкладку и изменить курсор:
sl-tab[active]::part(base) {
cursor: default;
}И это все!
Настройка анимации
В качестве вишенки на метафорическом торте давайте посмотрим, как Shoelace позволяет нам настраивать анимацию. Шнурки используют API веб-анимациии раскрывает 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 — это невероятно амбициозная библиотека компонентов, созданная с помощью веб-компонентов. Поскольку веб-компоненты не зависят от платформы, их можно использовать в любом проекте с любой платформой. С появлением новых фреймворков, обладающих как потрясающими характеристиками производительности, так и простотой использования, возможность использовать качественные виджеты взаимодействия с пользователем, которые не привязаны ни к одной платформе, никогда не была более привлекательной.
