مرساة Anchor

تنقّل دليلي يتفاعل مع التمرير. بالنقر يقفز إلى المنطقة المستهدفة، وأثناء التمرير يُبرز القسم الحالي.

مرساة

<template>
  <div class="demo-col" style="max-width: 640px">
    <div class="demo-row" style="align-items: flex-start; gap: 24px">
      <div ref="scroller" class="anchor-scroller">
        <div id="anchor-a" class="anchor-sec">
          <h3>الصخور والجبال</h3>
          <p>تُرسم الجبال بلمسات النقاط، في مشهد مهيب.</p>
        </div>
        <div id="anchor-b" class="anchor-sec">
          <h3>الأشجار والغابات</h3>
          <p>تتداخل الأوراق المرسومة تفصيليًا مع الأوراق المنقّطة.</p>
        </div>
        <div id="anchor-c" class="anchor-sec">
          <h3>مصدر الماء</h3>
          <p>شلال رفيع معلّق وسط الضباب.</p>
        </div>
        <div id="anchor-d" class="anchor-sec">
          <h3>النقش الختامي</h3>
          <p>توقيع الفنان يختبئ بين الأشجار.</p>
        </div>
      </div>
      <LhAnchor :items="items" :target="scrollerEl" :offset="12" direction="vertical" smooth />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { id: 'anchor-a', title: 'الصخور والجبال' },
      { id: 'anchor-b', title: 'الأشجار والغابات' },
      { id: 'anchor-c', title: 'مصدر الماء' },
      { id: 'anchor-d', title: 'النقش الختامي' },
    ],
    scrollerEl: undefined,
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
items	بيانات المراسي (تدعم المستويات الفرعية)	LhAnchorItem[]	—
target	حاوية التمرير (محدِّد أو عنصر، الافتراضي window)	string \| HTMLElement	—
offset	إزاحة منطقة المرساة نسبة إلى أعلى حاوية التمرير (لاستخدامها في الحكم على التفاعل)	number	—
direction	اتجاه الترتيب	'vertical' \| 'horizontal'	'vertical'
smooth	تمرير سلس	boolean	false
sx	خصائص التخطيط السريع sx	—	—

AnchorItem Props

خاصية	الوصف	النوع	الافتراضي
id	معرّف العنصر المستهدف	string	—
title	النص المعروض	string	—
children	المراسي الفرعية	LhAnchorItem[]	—

تلميح

إن .anchor-scroller و.anchor-sec في المثال مجرد أنماط توضيحية (تحتاج حاوية التمرير إلى overflow-y: auto بشكل مستقل)، ولا توفّرها المكتبة نفسها.