Вы можете использовать Svelte и TailwindCSS для создания стильных и динамичных элементов построения веб-сайтов, таких как аккордеон.
Рано или поздно мне придется найти время, чтобы сообщить о том, чему я научился за эти месяцы. Например, что очень сложно предсказать, сколько времени потребуется для выполнения задачи.
Моя последняя идея (создание автоматической системы для документирования компонентов Svelte) оказалась длиннее, чем я ожидал. Техника не очень сложная, но слишком много деталей, которые я не предусмотрел.
Кроме того, мое желание понять, как все работает, заставляет меня тратить много времени на воссоздание некоторых основных элементов. Последним в хронологическом порядке является аккордеон: элемент, который можно открывать и закрывать одним щелчком мыши.
Что я хочу построить
Что-то простое, не зависящее от других библиотек. Что-то довольно легкое и настраиваемое. Svelte позволяет очень легко создавать. А TailwindCSS позволяет управлять стилями CSS.
Начнем со структуры
Базовая структура очень проста, всего 2 части:
- один для использования в качестве заголовка компонента для вставки заголовка раздела;
- другой — простой слот: вы можете скрывать и показывать содержимое.
Конечно, без добавления каких-либо стилей или действий CSS результат весьма разочаровывает:
Добавим несколько стилей
Я добавляю несколько стилей, чтобы выделить заголовок элемента и его поля. Для этого компонента я хочу использовать монохромный стиль. Меня привлекает такое использование цветов, но это уже другая история.
Итак, я начинаю с раскрашивания заголовка:
Я не могу добавить стиль css в slot. Но я могу поместить его в div и стилизовать:
Открыть и закрыть
Svelte позволяет очень просто скрыть и отобразить элемент страницы. Используя простое условие if...then...else, привязанное к prop, я могу проверить его статус:
Добавим вращающуюся иконку
Мне нужен способ открыть элемент одним щелчком мыши. Для этого мне нужна кнопка и анимация, чтобы выделить клик. Я нашел видео от Johnny Magrippis (How to: Svelte Hamburger Menu Animation 🍔):
Рекомендую посмотреть видео. Для начала мне нужен еще один компонент, Chevron.svelte, в который нужно вставить изображение svg:
Я хотел бы добавить несколько стилей, чтобы интегрировать его в заголовок основного компонента:
Назначение этого значка — быть кнопкой: при нажатии он открывает или закрывает основную часть аккордеона. Поэтому я помещаю его в элемент button и добавляю к нему два props:
Я использую реквизит open в качестве класса CSS. Таким образом, когда элемент открыт, я могу изменить значок. Я хочу повернуть его на 180 градусов. Поэтому я добавляю несколько стилей CSS, полезных для этой цели:
Добавим действие к компоненту
Теперь, когда значок выполняет свою работу, я могу вернуться к основному компоненту и вставить действие:
Щелкнув по значку, я наконец-то могу открыть и закрыть аккордеон:
Добавим переход
Компонент работает, но не очень приятно видеть, как часть страницы внезапно появляется и исчезает. Чтобы исправить это, я могу использовать одну из функций Svelte, переходы:
И вот окончательный результат:
Как всегда, код доступен и загружается с GitHub:
Спасибо за прочтение! Оставайтесь с нами, чтобы узнать больше.
Не пропустите мою следующую статью — подпишитесь на мой Список адресов электронной почты среднего уровня
Первоначально опубликовано на https://blog.stranianelli.com 28 ноября 2021 г.
