Сегодня мы создаем один из самых распространенных элементов веб-дизайна — левую боковую панель для навигации — с помощью Tailwind CSS и Stimulus.js.

Наша боковая панель всегда будет занимать 100% высоты страницы, и мы сможем разворачивать и сворачивать боковую панель нажатием кнопки. Все это будет достигнуто с помощью небольшого количества стимула для действия развертывания/свертывания и небольшого количества попутного ветра в нашей разметке.

Вот как это будет выглядеть, когда мы закончим.

Для этого мы начнем с простого HTML-файла, добавим Tailwind CSS, чтобы все выглядело красиво, и воспользуемся Stimulus для интерактивности.

Я пишу это, предполагая хорошее понимание HTML и CSS и некоторый уровень владения JavaScript.

Если вы никогда раньше не видели Tailwind, некоторые классы, которые мы добавляем для стилизации, могут показаться немного странными. Вам не нужно знать, как работает Stimulus, но если вы новичок, возможно, вы захотите прочитать Руководство по Stimulus, чтобы закрепить некоторые концепции по ходу дела.

Полный код этого проекта вы можете найти на Github.

Давайте углубимся.

Настройка проекта

Для простоты мы просто воспользуемся старым HTML-файлом и загрузим Tailwind и Stimulus из CDN. В реальном проекте вы должны использовать систему сборки, но нам все это не нужно для демонстрации концепции!

Давайте начнем с нашего простого HTML. Идите вперед, скопируйте и вставьте ниже в файл с именем sidebar.html

Теперь мы добавим Stimulus и сделаем Stimulus доступным через window.Stimulus. Добавьте эти теги сценария в тег head, скопированный прямо из Stimulus docs.

А затем загрузите Tailwind CSS из CDN, что не рекомендуется для использования вне демонстраций, подобных этой. У Tailwind есть обширная документация о том, как включить Tailwind практически для любой системы сборки и фреймворка, которые вы только можете себе представить.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Отлично, теперь, когда мы открываем sidebar.html в нашем браузере, мы должны иметь доступ к Stimulus в консоли JavaScript, и значения по умолчанию, примененные Tailwind, должны быть видны в нашем тексте-заполнителе.

Теперь давайте создадим макет боковой панели с помощью Tailwind.

Создание статической боковой панели

Замените <body> вашего файла sidebar.html на приведенный ниже, чтобы добавить базовую структуру боковой панели на вашу страницу.

Этот метод добавления статической боковой панели использует flexbox для создания двух расположенных рядом контейнеров с меньшим содержимым слева и содержимым справа. Используя Tailwind, нам вообще не нужно трогать CSS для создания макета, вместо этого мы полностью полагаемся на существующие служебные классы Tailwind.

Поскольку мы хотим, чтобы цвет фона боковой панели растягивался (как минимум) на всю высоту страницы, мы добавляем класс min-h-screen в контейнер боковой панели. Мы хотим, чтобы навигационные ссылки всегда оставались на странице, даже если основное содержимое прокручивается, поэтому добавьте класс sticky к элементу, обертывающему меню навигации.

Каждая из наших навигационных ссылок имеет значок. Когда у нас есть функция свертывания/развертывания, на свернутой боковой панели будут отображаться значки ссылок без текста.

После обновления тела обновите страницу и посмотрите, как работает базовая компоновка. Щелчок по значку свернуть/развернуть пока ничего не даст.

Создание контроллера Stimulus на боковой панели

Контроллер Stimulus будет обрабатывать свертывание и развертывание содержимого боковой панели, когда пользователь щелкает значок свертывания/развертывания.

Во-первых, мы добавим функцию, которая переключает боковую панель с развернутой на свернутую и обратно. Эта функция будет выглядеть так:

Функция toggle() использует простой оператор if, который проверяет атрибут данных в DOM, чтобы определить, развернута или свернута боковая панель в данный момент, а затем вызывает функцию свертывания или раскрытия в зависимости от ситуации. Мы создадим этот атрибут данных в следующем разделе.

Функция collapse() отвечает за сворачивание расширенной боковой панели, и выглядит это так:

Здесь мы находим контейнер боковой панели, удаляем класс Tailwind ширины, заменяем значок на значок расширения, применяем служебный класс Tailwind sr-only, чтобы скрыть текст навигационной ссылки со страницы, если только пользователь не заходит на сайт с помощью программы чтения с экрана. Наконец, мы обновляем атрибут расширенных данных боковой панели до 0, чтобы при следующем щелчке по ссылке свернуть/развернуть функция toggle вызывала функцию expand.

Одна из замечательных особенностей Stimulus заключается в том, что он предоставляет простой способ выбора элементов из DOM с помощью целей. Эти цели заменяют выбор элементов по классу или идентификатору, вместо этого полагаясь на атрибуты данных.

Используя цели, мы можем сделать наш JavaScript и HTML четкими и удобочитаемыми, чтобы будущие разработчики случайно не сломали наш JavaScript, удалив класс или изменив идентификатор.

Затем следует функция expand(), и она выглядит так:

Здесь мы просто обращаем изменения, которые вносит наша функция коллапса:

  1. Настройка ширины боковой панели
  2. Замена значка
  3. Отображать текст ссылки для всех пользователей
  4. Установите для расширенного атрибута данных значение 1, чтобы следующий щелчок по значку привел к сворачиванию.

Наконец, нам нужно сообщить нашему контроллеру Stimulus о целях, которые мы используем, обновив определение targets в верхней части контроллера Stimulus:

После внесения этих изменений тег <script>, добавляющий Stimulus на нашу страницу, выглядит следующим образом:

Если вы сделаете эти обновления, обновите страницу и щелкните значок сворачивания, вы заметите, что абсолютно ничего не происходит. Это потому, что наш контроллер Stimulus еще не подключен к DOM. Мы закончим это руководство, обновив наш HTML, чтобы все заработало.

Подключение к DOM

Чтобы наш контроллер Stimulus работал, нам сначала нужно добавить атрибут данных controller где-нибудь в HTML. В общем, вы хотите прикрепить контроллер к родительскому элементу той части DOM, которую вы планируете изменить в контроллере. Поскольку контроллер боковой панели вносит изменения в боковую панель и элементы внутри боковой панели, имеет смысл прикрепить контроллер к элементу боковой панели верхнего уровня:

Далее нам нужен атрибут данных для отслеживания текущего состояния боковой панели (развернута или свернута):

Последнее обновление элемента <aside> состоит в том, чтобы сообщить нашему контроллеру Stimulus, что это цель sidebarContainer:

Далее, нашему контейнеру значков свертывания нужна цель и действие:

Атрибут data-action структурирован как UserAction -> ControllerName#FunctionName. Для определенных элементов и действий компонент UserAction является необязательным, но для элемента div всегда должно быть предусмотрено действие. Подробнее об акциях здесь.

С этими атрибутами каждый раз, когда щелкают значок боковой панели, будет вызываться функция toggle(), определенная в нашем контроллере Sidebar. Если вы обновите страницу сейчас, вы заметите ошибку в консоли JavaScript. Последнее дополнение к HTML, и все будет готово:

Здесь мы добавили sidebar-target="link" к каждому спану, который оборачивает текст ссылки. Напомним, что в нашем контроллере Stimulus мы используем linkTargets для переключения класса sr-only по мере необходимости.

Эта способность легко находить и модифицировать любое количество элементов, не полагаясь на классы, которые могут или не могут быть изменены в будущем, является одной из вещей, которые делают Stimulus таким приятным в работе.

this.linkTargets.forEach(link => {
  link.classList.add("sr-only")
})

С этим последним изменением обновите страницу в последний раз и убедитесь, что все работает так, как ожидалось.

Подведение итогов

Сегодня мы узнали, как использовать Tailwind CSS и Stimulus для создания простой боковой панели, которую пользователи могут сворачивать и разворачивать по требованию.

Хотя макет боковой панели и сворачивание/расширение контента можно выполнить без каких-либо фреймворков CSS или JavaScript, я надеюсь, что этот пример дал вам представление о том, насколько удобными для чтения, обслуживания и масштабируемости могут быть Tailwind и Stimulus. Будущий разработчик, пересматривая код, написанный с помощью Stimulus и Tailwind, может быстро определить назначение каждого класса и атрибута данных и может уверенно вносить изменения для реализации новых функций для расширения сайта с течением времени.

Мы лишь слегка коснулись возможностей Tailwind и Stimulus. Чтобы копнуть дальше, начните с:

  1. Отличная (действительно отличная) документация Tailwind
  2. Справочник по стимулам
  3. Better Stimulus для шаблонов Stimulus и лучших практик

Спасибо за чтение!