Добро пожаловать в очередную серию уроков по Alpine.js. Сегодня мы создадим компонент вкладок, который отображает различное содержимое в зависимости от активной вкладки. Если у вас есть рабочие знания JavaScript, то этот компонент довольно просто создать с помощью Alpine.js.
Давайте начнем с создания HTML-файла и загрузки Alpine.js через CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alpine.js Tab Component</title>
<script defer src="https://unpkg.com/alpinejs"></script>
</head>
<body>
<!-- alpine.js tab component -->
</body>
</html>
Затем добавим обертку <div> для компонента:
<div x-data="{ tab: 'description' }">
<!-- nav -->
<!-- content -->
</div>
x-data используется для определения фрагмента HTML как компонента Alpine. Он также предоставляет реактивные данные для ссылки на этот компонент, в данном случае на активную вкладку. Мы будем создавать макет из 3 вкладок, в котором мы хотим, чтобы вкладка «описание» была активной при загрузке страницы. Для этого мы определили «description» как значение по умолчанию в x-data.
Далее мы добавим 3 вкладки, которые являются стандартными якорными элементами внутри элемента <nav>:
<nav>
<a :class="{ 'active': tab === 'description' }" x-on:click.prevent="tab = 'description'" href="#">Description</a>
<a :class="{ 'active': tab === 'dimensions' }" x-on:click.prevent="tab = 'dimensions'" href="#">Dimensions</a>
<a :class="{ 'active': tab === 'reviews' }" x-on:click.prevent="tab = 'reviews'" href="#">Reviews</a>
</nav>
На якорных элементах мы переключаем активный класс, основываясь на значении tab, соответствующем тому, что в настоящее время установлено в директиве x-data. Значение tab обновляется при нажатии на него с помощью директивы x-on:click.
Наконец, добавим элементы <div> для содержимого каждой вкладки:
<div x-show="tab === 'description'">
<h3>Description</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus
facilisis tristique. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
</p>
</div>
<div x-show="tab === 'dimensions'">
<h3>Dimensions</h3>
<p>
Donec placerat ullamcorper sodales. Nam congue justo sit amet erat luctus
faucibus.
</p>
</div>
<div x-show="tab === 'reviews'">
<h3>Reviews</h3>
<p>
Sed hendrerit imperdiet accumsan. Nunc venenatis sit amet diam vel rutrum.
Quisque interdum dui et molestie tristique.
</p>
</div>
Директива x-show проверяет текущее значение вкладки и отображает <div> только тогда, когда соответствующее значение вкладки совпадает. Если теперь вы просмотрите эту страницу в браузере, вы сможете щелкнуть на каждом из элементов якоря и переключить видимость соответствующего содержимого.
Это все для этого руководства, теперь у вас должен быть функционирующий компонент вкладки, который просто требует некоторого CSS для соответствия вашей веб-странице или приложению. Если вы хотите изучить код, использованный в этом руководстве, ознакомьтесь с официальной документацией Alpine.js, которую можно найти здесь.