تثبيت Affix

تثبيت المحتوى في الأعلى أو الأسفل أثناء التمرير. يستخدم IntersectionObserver لرصد تجاوز العنصر النائب (بدون أي تكلفة لاختناق التمرير، ويعود تلقائيًا إلى الاستماع لحدث التمرير في البيئات التي لا تدعم IntersectionObserver).

الاستخدام الأساسي

تثبيت في الأعلى

شريط أدوات مثبّت في الأعلى

يفعّل offset-bottom التثبيت في الأسفل (له الأولوية على offset-top)؛ ويحدد target حاوية التمرير المراقَبة (الافتراضي إطار العرض).

تثبيت في الأسفل

شريط أدوات مثبّت في الأسفل (offset-bottom)

<script setup lang="ts">
</script>

<template>
  <!-- تثبيت في الأسفل -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">شريط أدوات مثبّت</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- تثبيت في الأسفل -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">شريط أدوات مثبّت</div>
  </LhAffix>
</template>

<script setup lang="ts">
</script>

<template>
  <!-- تثبيت في الأعلى -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">شريط أدوات مثبّت</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- تثبيت في الأعلى -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">شريط أدوات مثبّت</div>
  </LhAffix>
</template>

API

خصائص LhAffix

الخاصية	الوصف	النوع	الافتراضي
offsetTop	عدد البكسلات من أعلى إطار العرض لتفعيل التثبيت في الأعلى	number	0
offsetBottom	عدد البكسلات من أسفل إطار العرض لتفعيل التثبيت في الأسفل (له الأولوية على offsetTop)	number	0
target	حاوية التمرير المراقَبة (محدد أو عنصر، الافتراضي إطار العرض)	string | HTMLElement	—
sx	خصائص التخطيط السريع sx	LhSxProps	—

أحداث LhAffix

الحدث	الوصف	معاملات الاستدعاء
change	يُطلق عند تبديل حالة التثبيت (الدخول إلى التثبيت في الأعلى/الأسفل أو الخروج منه)	(fixed: boolean)

إمكانية الوصول

• لا دور (role) خاص؛ حالة التثبيت لا تؤثر على ترتيب التركيز في تدفّق المستند
• تُرفع الحاوية النائبة لارتفاع العنصر المثبّت لتجنّب قفزات التخطيط

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن خارجيًا (مستخرَجة تلقائيًا من packages/components/affix/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لعرض التعريف كاملًا؛ وصف الخصائص في جدول الخصائص أعلاه):

LhAffixProps

export interface LhAffixProps {
  /** عدد البكسلات من أعلى إطار العرض لتفعيل التثبيت في الأعلى */
  offsetTop?: number
  /** عدد البكسلات من أسفل إطار العرض لتفعيل التثبيت في الأسفل (له الأولوية على offsetTop) */
  offsetBottom?: number
  /** حاوية التمرير المراقَبة (محدد أو عنصر، الافتراضي إطار العرض) */
  target?: string | HTMLElement
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}