Resize

Плагин Resize — это удобная обёртка для Resize Observer, которая позволяет легко реагировать на изменение размера элемента.

Это полезно для настраиваемой анимации на основе размера, интеллектуального закрепления позиционирования, условного добавления атрибутов в зависимости от размера элемента и т. д.

Установка

Вы можете использовать этот плагин, включив его из тега <script> или установив с помощью менеджера пакетов.

Через CDN

Вы можете подключить CDN-сборку этого плагина с помощью тега <script>, только подключать нужно ДО основного JS-файла Alpine.

jsDelivr CDN
unpkg CDN

<!-- Resize Plugin -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/resize@3/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<!-- Resize Plugin -->
<script defer src="https://unpkg.com/@alpinejs/resize@latest/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>

Через менеджер пакетов

Вы можете установить Resize для использования внутри вашей сборки следующим образом:

npm i @alpinejs/resize

pnpm add @alpinejs/resize

yarn add @alpinejs/resize

Затем инициализируйте его в своей сборке:

import Alpine from 'alpinejs';
import resize from '@alpinejs/resize';

Alpine.plugin(resize);
Alpine.start();

Основным API для использования этого плагина является x-resize. Вы можете добавить x-resize к любому элементу в компоненте Alpine, и когда размер этого элемента будет изменён по какой-либо причине, будет выполнено выражение с двумя магическими свойствами: $width и $height.

Вот простой пример использования x-resize для отображения ширины и высоты элемента при изменении его размера:

<div
  x-data="{ width: 0, height: 0 }"
  x-resize="width = $width; height = $height"
>
  <i>Измените размер окна браузера, чтобы увидеть, как меняются значения ниже.</i>
  <br><br>
  <p x-text="'Ширина: ' + width + 'px'"></p>
  <p x-text="'Высота: ' + height + 'px'"></p>
</div>

Измените размер окна браузера, чтобы увидеть, как меняются значения ниже.

Модификаторы

.document

Часто бывает полезно наблюдать за размером всего документа, а не конкретного элемента. Для этого можно добавить модификатор .document к x-resize:

<div x-data="{ width: 0, height: 0 }" x-resize.document="width = $width; height = $height">
    <i>Измените размер окна браузера, чтобы увидеть, как меняются значения ниже.</i>
    <br><br>
    <p x-text="'Ширина: ' + width + 'px'"></p>
    <p x-text="'Высота: ' + height + 'px'"></p>
</div>

Измените размер окна браузера, чтобы увидеть, как меняются значения ниже.