Создание раскрывающегося меню с использованием alpine.js

Alpinejs это небольшая структура JavaScript для сочинения поведения непосредственно в HTML -разметке. В этом уроке я покажу вам, как фреймворк можно использовать для создания компонента раскрывающегося меню. Если вы никогда не работали с Alpine до того, как это послужит простым введением в рамку.

Для целей этого урока вы можете загрузить фреймворк через CDN:

С альпийской нагрузкой создайте обертку

  // ...

X-Data Определяет кусок HTML как альпийский компонент и предоставляет данные для этого компонента. x-on: click.outside Установите открытые данные для false, которые скрывают раскрывающийся список, когда нажимается за пределами компонента.

Далее внутри обертки

  My Account

Другой x-on: нажмите На этот раз мы только отслеживаем щелчок прямо на самой кнопке.

Теперь для раскрывающегося меню, которое является неупорядоченным списком с x-show атрибут:

  
Edit Profile
  
Settings
  
Log Out
        

Когда Open равно истинный x-show Атрибут изменит видимость

  My Account 
  »

Если вы просмотрите исходный код после нажатия кнопки, вы увидите, что класс повернутого был применен к элемент:

Теперь мы можем применить несколько CSS, чтобы повернуть значок, указывающий, что меню открыто:

.rotated {
  transform: rotate(90deg);
  display: inline-block;
}

Наконец, мы добавим переход, чтобы открытие и закрытие выпадающей списки казались более плавными:

 ...       

Это все для этого урока. Как вы только что видели, добавив несколько простых альпийских атрибутов в HTML -разметку, относительно легко создать функционирующее выпадающее меню. С тем, что вы узнали в этом уроке, вы также можете начать создавать другие элементы пользовательского интерфейса с функциональностью Show/Hide и Alpine.js.

Оригинал: “https://dev.to/michaelburrows/building-a-dropdown-menu-using-alpinejs-47o3”