Affix

Element yonidan aylantirilganda uni viewport ga biriktiradi. Yopishqoq sarlavhalar, asboblar paneli va suzuvchi amallar uchun foydali.

Basic

Siz yonidan aylantirib o'tganingizda element fiksatsiyalanadi.

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

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

Offset

Element yopishishdan oldin viewport chetidan masofani belgilang.

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

Bottom Position

position="bottom" bilan viewport ning pastiga biriktiring.

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

Shadow

Fiksatsiyalanganda soya ko'rsatish uchun shadow ni qo'shing — yopishqoq sarlavhalar uchun juda mos keladi.

Fiksatsiyalanganda soya paydo bo'ladi

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

Custom Fixed Class

Element biriktirilganda maxsus klasslarni qo'llash uchun fixed-class dan foydalaning. Satrlar, massivlar yoki obyektlarni qabul qiladi.

<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 ni disabled bilan yoqing va o'chiring.

YoqilganO'chirilgan

<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

Affix boshqa element bilan ustma-ust tushishdan oldin to'xtashi uchun boundary dan foydalaning. CSS selector yoki HTMLElement ni uzating. Affix chegarasiga urilmaslik uchun yuqoriga siljiydi.

<!-- 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 biriktirilgan holatga javob berish uchun fixed ni oladi.

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

Custom Target

target ga CSS selector yoki HTMLElement ni uzatish orqali affix ni aylantiriladigan konteyner ichida chegaralang.

<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	Viewport chetidan masofa (px)
position	'top' | 'bottom'	'top'	Tepaga yoki pastga biriktirish
target	string | HTMLElement	window	Aylantirish konteyneri
z-index	number	100	Fiksatsiyalanganda z-index
disabled	boolean	false	Affix ni o'chirib qo'yish
shadow	boolean	false	Fiksatsiyalanganda soya ko'rsatish
fixed-class	string | string[] | object	—	Fiksatsiyalanganda class biriktirilishi
boundary	string | HTMLElement	—	Ushbu elementga yetmasdan oldin to'xtash

Events

Event	Payload	Description
change	boolean	Fiksatsiya holati o'zgardi
scroll	{ scrollTop, fixed }	Joriy holat bilan aylantirish

Slots

Slot	Props	Description
default	{ fixed: boolean }	Biriktiriladigan kontent

Exposed

Name	Type	Description
update()	function	Pozitsiyani qayta hisoblash
fixed	Ref<boolean>	Joriy fiksatsiya holati