Перейти к содержимому
Логотип AlpineJS Логотип AlpineJS Alpine.js по-русски  

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>