Affix

Компонент Affix в библиотеке Naive UI предназначен для «прилипания» элементов интерфейса к определённой позиции на странице при прокрутке. Он полезен для закрепления кнопок, панелей навигации, уведомлений и других элементов, которые должны оставаться видимыми независимо от положения пользователя на странице.

Ключевые свойства Affix:

  • position — указывает сторону, к которой элемент будет прикреплён: 'top', 'bottom', 'left', 'right'.
  • offset — задаёт расстояние в пикселях от края контейнера или окна до закреплённого элемента.
  • target — функция, возвращающая элемент, относительно которого осуществляется закрепление. Если не задан, используется окно (window).
  • z-index — уровень слоя закреплённого элемента, чтобы он корректно отображался поверх других элементов.

Пример базового использования:

import { NAffix, NButton } from 'naive-ui'

<NAffix :offset="20" position="top">
  <NButton>Закреплённая кнопка</NButton>
</NAffix>

В этом примере кнопка остаётся видимой в верхней части окна, даже при прокрутке страницы.

Настройка положения и смещения

Affix позволяет точно контролировать положение элемента с помощью комбинации position и offset.

  • position="top" с offset="0" фиксирует элемент строго у верхнего края контейнера.
  • position="bottom" с offset="10" фиксирует элемент внизу, отступив на 10 пикселей.
  • Для горизонтального закрепления используется position="left" или position="right".

Смещение можно динамически изменять, передавая в offset вычисляемое значение или реактивную переменную:

<NAffix :offset="dynamicOffset" position="top">
  <NButton>Динамическое смещение</NButton>
</NAffix>

Здесь dynamicOffset может изменяться в зависимости от условий страницы или действий пользователя.

Работа с target и кастомными контейнерами

По умолчанию Affix ориентируется на окно браузера, но для сложных интерфейсов часто требуется закреплять элемент относительно конкретного контейнера. Для этого используется свойство target, которое принимает функцию, возвращающую DOM-элемент.

Пример закрепления элемента внутри определённого блока:

<template>
  <div ref="scrollContainer" style="height: 300px; overflow-y: scroll;">
    <NAffix :target="getContainer" :offset="10" position="top">
      <NButton>Закреплено внутри блока</NButton>
    </NAffix>
    <div style="height: 800px;"></div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const scrollContainer = ref(null)
    const getContainer = () => scrollContainer.value
    return { scrollContainer, getContainer }
  }
}
</script>

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

Управление видимостью и анимациями

Affix поддерживает реактивное управление видимостью. Можно скрывать или показывать закреплённый элемент на основе состояния компонента:

<NAffix v-if="isVisible" offset="20" position="top">
  <NButton>Появляющийся элемент</NButton>
</NAffix>

Для плавного появления можно использовать CSS-переходы или сторонние компоненты анимации, применяя их к содержимому Affix.

Взаимодействие с другими компонентами Naive UI

Affix хорошо сочетается с другими компонентами библиотеки:

  • NButton и NIcon — закрепление элементов управления.
  • NCard — закреплённые панели или подсказки.
  • NBackTop — реализация кнопки «Наверх» с использованием Affix для позиции.

Пример сочетания с кнопкой «Наверх»:

<NAffix position="bottom" :offset="50">
  <NButton @click="scrollToTop">Наверх</NButton>
</NAffix>

<script>
export default {
  methods: {
    scrollToTop() {
      window.scrollTo({ top: 0, beh * avior: 'smooth' })
    }
  }
}
</script>

Важные моменты при использовании

  • Высота закреплённого элемента должна быть учтена при позиционировании, чтобы не перекрывать другие элементы.
  • Z-index нужно корректно настраивать, если рядом находятся другие слои интерфейса.
  • Для мобильных интерфейсов следует проверять поведение закрепления при изменении размеров экрана и ориентации.
  • Affix автоматически пересчитывает позицию при прокрутке, но если контейнер динамически изменяет размеры, может потребоваться вызов updatePosition() вручную через ref.

Практические рекомендации

  1. Использовать Affix для элементов с высокой приоритетностью видимости, таких как кнопки действий или навигационные панели.
  2. Для закрепления внутри прокручиваемых контейнеров всегда указывать target, иначе элемент будет «прыгать» при прокрутке.
  3. Проверять совместимость с адаптивной версткой, особенно для горизонтальных закреплений (left/right).
  4. Комбинировать с реактивными переменными для динамического изменения offset, что позволяет создавать интерактивные интерфейсы.

Affix в Naive UI — гибкий и мощный инструмент для создания удобного интерфейса, который остаётся функциональным даже при прокрутке больших страниц.

Оглавление