x-show
x-show — одна из самых полезных и мощных директив Alpine. Она обеспечивает выразительный способ отображения и скрытия элементов DOM.
Вот пример простого раскрывающегося компонента с использованием x-show:
<div x-data="{ open: false }"> <button x-on:click="open = !open">Переключить раскрывающийся список</button>
<div x-show="open">Содержимое списка...</div></div>При нажатии кнопки «Переключить раскрывающийся список» раскрывающийся список будет отображаться и скрываться соответственно.
С переходами
Если вы хотите применить плавные переходы к поведению x-show, вы можете использовать её вместе с x-transition. Вот краткий пример того же компонента, что и выше, только с применёнными переходами:
<div x-data="{ open: false }"> <button x-on:click="open = !open">Переключить раскрывающийся список</button>
<div x-show="open" x-transition>Содержимое списка...</div></div>.important
Иногда вам нужно приложить немного больше усилий, чтобы действительно скрыть элемент. В тех случаях, когда селектор CSS применяет свойство display с флагом !important, оно будет иметь приоритет над встроенным стилем, установленным Alpine.
В этих случаях вы можете использовать модификатор .important для установки встроенного стиля display: none !important.
<div x-data="{ open: false }"> <button x-on:click="open = !open">Переключить раскрывающийся список</button>
<div x-show.important="open">Содержимое списка...</div></div>Проверка знаний
Что делает x-show с элементом?
<div x-show="false">...</div>