Affix

Закрепляет элемент во вьюпорте при прокрутке. Полезно для липких шапок, панелей инструментов и плавающих действий.

Basic

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

<script setup>
import { VxAffix, VxButton } from 'veloxui'
</script>

<template>
  <VxAffix>
    <div class="toolbar">Sticky Toolbar</div>
  </VxAffix>
</template>

Offset

Задайте расстояние от края вьюпорта, после которого элемент закрепляется.

<VxAffix :offset="120">
  <div>Sticks 120px from the top edge</div>
</VxAffix>

Bottom Position

Закрепите элемент внизу вьюпорта с помощью position="bottom".

<VxAffix position="bottom" :offset="40">
  <VxButton>Always at bottom</VxButton>
</VxAffix>

Shadow

Добавьте shadow, чтобы показывать тень при закреплении — отлично подходит для липких шапок.

Shadow appears when fixed

<VxAffix :offset="0" shadow>
  <header class="nav">My App Header</header>
</VxAffix>

Custom Fixed Class

Используйте fixed-class, чтобы применять свои классы при закреплении элемента. Принимает строки, массивы или объекты.

<VxAffix :offset="0" fixed-class="bg-white shadow-xl border-b">
  <nav>Navigation Bar</nav>
</VxAffix>

<!-- Or with object syntax -->
<VxAffix :offset="0" :fixed-class="{ 'is-pinned': true, 'elevated': true }">
  <nav>Navigation Bar</nav>
</VxAffix>

Disabled

Включайте и выключайте affix с помощью disabled.

EnabledDisabled

<script setup>
import { ref } from 'vue'
const disabled = ref(false)
</script>

<template>
  <VxSwitch v-model="disabled" />
  <VxAffix :disabled="disabled">
    <div>Toggle me</div>
  </VxAffix>
</template>

Boundary

Используйте boundary, чтобы остановить affix перед наложением на другой элемент. Передайте CSS-селектор или HTMLElement. Affix сдвигается вверх, чтобы не сталкиваться с границей.

<!-- Affix stops before reaching the footer -->
<VxAffix :offset="0" boundary="#page-footer">
  <aside>Sidebar Navigation</aside>
</VxAffix>

<footer id="page-footer">Footer content</footer>

Scoped Slot

Slot получает fixed, чтобы реагировать на состояние закрепления.

<VxAffix :offset="0" shadow>
  <template #default="{ fixed }">
    <header :class="{ 'border-b': fixed }">
      <h1>{{ fixed ? 'Pinned Header' : 'Normal Header' }}</h1>
    </header>
  </template>
</VxAffix>

Custom Target

Ограничьте область affix прокручиваемым контейнером, передав CSS-селектор или HTMLElement в target.

<div id="scroll-area" style="height: 300px; overflow: auto;">
  <div style="height: 1000px; padding: 20px;">
    <VxAffix target="#scroll-area" :offset="0">
      <div>Sticks within the scroll container</div>
    </VxAffix>
  </div>
</div>

API

VxAffix Props

Prop	Type	Default	Description
offset	number	0	Расстояние от края вьюпорта (px)
position	'top' | 'bottom'	'top'	Закрепление вверху или внизу
target	string | HTMLElement	window	Контейнер прокрутки
z-index	number	100	z-index при закреплении
disabled	boolean	false	Отключить affix
shadow	boolean	false	Показывать тень при закреплении
fixed-class	string | string[] | object	—	Классы, применяемые при закреплении
boundary	string | HTMLElement	—	Остановиться до этого элемента

Events

Event	Payload	Description
change	boolean	Состояние закрепления изменилось
scroll	{ scrollTop, fixed }	Прокрутка с текущим состоянием

Slots

Slot	Props	Description
default	{ fixed: boolean }	Содержимое для закрепления

Exposed

Name	Type	Description
update()	function	Пересчитать позицию
fixed	Ref<boolean>	Текущее состояние закрепления