Anchor

Плагин Anchor позволяет легко привязать позиционирование элемента к другому элементу на странице.

Эта функциональность полезна при создании в Alpine выпадающих меню, всплывающих окон, диалоговых окон и всплывающих подсказок.

Функциональность «привязки», используемая в этом плагине, предоставляется проектом Floating UI.

Установка

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

Через CDN

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

jsDelivr CDN

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

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

unpkg CDN

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

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

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

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

npm

npm i @alpinejs/anchor

pnpm

pnpm add @alpinejs/anchor

yarn

yarn add @alpinejs/anchor

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

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

Alpine.plugin(anchor);
Alpine.start();

x-anchor

Основным API для использования этого плагина является директива x-anchor.

Чтобы использовать этот плагин, добавьте директиву x-anchor к любому элементу и передайте ему ссылку на элемент, к которому вы хотите привязать его позицию (часто это кнопка на странице).

По умолчанию x-anchor устанавливает CSS элемента в значение position: absolute и соответствующие значения top и left. Если привязанный элемент обычно отображается под ссылочным элементом, но на странице не хватает места, его стилизация будет скорректирована таким образом, чтобы он отображался над этим элементом.

Например, вот простой выпадающий список, привязанный к кнопке, которая его переключает:

<div x-data="{ open: false }" class="overflow-hidden">
  <div class="flex justify-center">
    <button x-ref="button" x-on:click="open = !open">Переключить</button>
  </div>
  <div
    x-show="open"
    x-anchor="$refs.button"
    class="bg-white rounded p-2 border shadow z-10"
  >
    Содержимое
  </div>
</div>

Переключить

Содержимое

Позиционирование

x-anchor позволяет настраивать позиционирование закреплённого элемента с помощью следующих модификаторов:

• Снизу: .bottom, .bottom-start, .bottom-end
• Сверху: .top, .top-start, .top-end
• Слева: .left, .left-start, .left-end
• Справа: .right, .right-start, .right-end

Приведём пример использования .bottom-start для размещения выпадающего элемента ниже и правее элемента ссылки:

<div x-data="{ open: false }" class="overflow-hidden">
  <div class="flex justify-center">
    <button x-ref="button" x-on:click="open = !open">Переключить</button>
  </div>
  <div
    x-show="open"
    x-anchor.bottom-start="$refs.button"
    class="bg-white rounded p-2 border shadow z-10"
  >
    Содержимое
  </div>
</div>

Переключить

Содержимое

Фиксированное позиционирование

По умолчанию директива x-anchor устанавливает элементу position: absolute. В большинстве случаев этого достаточно, однако возникают проблемы, если элемент, к которому выполняется привязка, находится внутри контейнера со свойствами overflow: hidden, overflow: clip или overflow: auto. В таких случаях элемент обрезается вместе с родительским контейнером.

Чтобы использовать стратегию фиксированного позиционирования, добавьте модификатор .fixed:

<div x-data="{ open: false }" class="overflow-hidden">
    <div class="flex justify-center">
        <button x-ref="button" @click="open = !open">Переключить</button>
    </div>

    <div
      x-show="open"
      x-anchor.fixed="$refs.button"
      class="bg-white rounded p-4 border shadow z-10"
    >
        Содержимое
    </div>
</div>

Переключить

Содержимое

Важное замечание

Если у любого из предков элемента есть свойства transform, filter, perspective, backdrop-filter, will-change или contain, то для потомков с position: fixed создаётся новый содержащий блок (согласно спецификации CSS). В этом случае модификатор .fixed начинает вести себя как position: absolute относительно этого предка и не может выйти за пределы overflow: hidden. Если кажется, что .fixed ничего не меняет — проверьте, нет ли у какого-нибудь родительского элемента CSS-трансформации.

Смещение

Вы можете добавить смещение к привязанному элементу с помощью модификатора .offset.[px value] следующим образом:

<div x-data="{ open: false }" class="overflow-hidden">
  <div class="flex justify-center">
    <button x-ref="button" x-on:click="open = !open">Переключить</button>
  </div>
  <div
    x-show="open"
    x-anchor.offset.10="$refs.button"
    class="bg-white rounded p-2 border shadow z-10"
  >
    Содержимое
  </div>
</div>

Переключить

Содержимое

Предотвращение смены стороны

По умолчанию x-anchor меняет положение привязанного элемента на противоположное, если под опорным элементом недостаточно места для его отрисовки.

Вы можете предотвратить это поведение, добавив модификатор .noflip:

<div x-data="{ open: false }" class="demo overflow-hidden">
  <div class="flex justify-center">
    <button x-ref="button" @click="open = ! open">Переключить</button>
  </div>

  <div
    x-show="open"
    x-anchor.noflip="$refs.button"
    class="bg-white rounded p-4 border shadow z-10"
  >
    Содержимое выпадающего списка
  </div>
</div>

Переключить

Содержимое выпадающего списка

Ручная стилизация

По умолчанию x-anchor применяет стили позиционирования к вашему элементу под капотом. Если вы предпочитаете полный контроль над стилем, вы можете передать модификатор .no-style и использовать магию $anchor для доступа к значениям внутри другого выражения Alpine.

Ниже приведён пример обхода внутренней стилизации x-anchor и применения стилей самостоятельно с помощью x-bind:style:

<div x-data="{ open: false }" class="overflow-hidden">
  <div class="flex justify-center">
    <button x-ref="button" x-on:click="open = !open">Переключить</button>
  </div>
  <div
    x-show="open"
    x-anchor.no-style="$refs.button"
    x-bind:style="{ top: $anchor.y+'px', left: $anchor.x+'px', color: 'red' }"
  >
    Содержимое
  </div>
</div>

Переключить

Содержимое

Заметка

Комбинирование .no-style с .fixed: если вы отказываетесь от внутренней стилизации Alpine и при этом хотите использовать фиксированное позиционирование, не забудьте самостоятельно задать position: 'fixed'. Значения $anchor.x и $anchor.y возвращаются в координатном пространстве той стратегии, которая в данный момент активна — абсолютные координаты отсчитываются относительно offset parent (ближайшего позиционированного предка), а фиксированные — относительно viewport. Поэтому при использовании неправильного значения position ваш элемент окажется не в том месте.

<div
    x-show="open"
    x-anchor.no-style.fixed="$refs.button"
    x-bind:style="{ position: 'fixed', top: $anchor.y+'px', left: $anchor.x+'px' }"
>
    Содержимое
</div>

Привязка к идентификатору

До сих пор все примеры были связаны с привязкой к другим элементам с помощью refs Alpine.

Поскольку x-anchor принимает ссылку на любой элемент DOM, вы можете использовать утилиты типа document.getElementById() для привязки к элементу по его атрибуту id:

<div x-data="{ open: false }" class="overflow-hidden">
  <div class="flex justify-center">
    <button id="trigger" x-on:click="open = !open">Переключить</button>
  </div>
  <div
    x-show="open"
    x-anchor.top.offset.25="document.getElementById('trigger')"
    class="bg-white rounded p-2 border shadow z-10"
  >
    Содержимое
  </div>
</div>

Переключить

Содержимое

Проверка знаний

Вопрос 1

С помощью какой директивы задействуется этот плагин?

• x-data

  x-data объявляет состояние компонента и к позиционированию отношения не имеет.

• x-anchor

  Именно x-anchor привязывает позицию элемента к другому элементу на странице.

• x-anchous

  Такой директивы не существует — это опечатка в названии x-anchor.

Вопрос 2

Как использовать фиксированное позиционирование?

<div x-data="{ open: false }" style="overflow: hidden">
    <button x-ref="button" @click="open = !open">Переключить</button>

    <div
      x-show="open"
      x-anchor="$refs.button"
      style="background: cyan"
    >
        Содержимое
    </div>
</div>

• Заменить overflow: hidden на overflow: auto

  С overflow: auto привязанный элемент всё так же обрезается контейнером.

• Добавить модификатор .fixed к x-anchor

  Модификатор .fixed переключает стратегию на position: fixed, и элемент перестаёт обрезаться родителем.

• Зафиксировать нужные значения отступов внутри style=""

  Отступы вручную не заменяют стратегию позиционирования и разъедутся при прокрутке.

Вопрос 3

Как добавить смещение к элементу с помощью этого плагина?

• Добавить один из модификаторов .top, .left, .right, .bottom

  Эти модификаторы задают сторону привязки, а не отступ от опорного элемента.

• Добавить модификатор .position.x с указанием числового значения вместо x

  Модификатора .position у x-anchor нет.

• Добавить модификатор .offset.x с указанием числового значения вместо x

  Смещение задаётся через .offset с числом пикселей, например x-anchor.offset.10.

Прогресс викторины

0 / 0 вопросов отвечено (0%)

0 верно