مرساة Anchor

تنقّل بين مراسي الصفحة مع إبراز مرتبط بالتمرير. دلالة <nav> + aria-current="location".

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

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

• القسم الأول
• القسم الثاني
• الجزء الأول من القسم الثاني

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'القسم الأول' },
  { id: 'sec-2', title: 'القسم الثاني', children: [{ id: 'sec-2-1', title: 'الجزء الأول من القسم الثاني' }] },
]
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: 'القسم الأول' },
        { id: 'sec-2', title: 'القسم الثاني', children: [{ id: 'sec-2-1', title: 'الجزء الأول من القسم الثاني' }] },
      ],
    }
  },
}
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

الترتيب الأفقي وخيارات التمرير

يبدّل direction="horizontal" الترتيب إلى أفقي؛ ويُلغي smooth التمرير السلس؛ ويعوّض offset إزاحة منطقة المرساة بالنسبة إلى أعلى حاوية التمرير؛ ويستمع target إلى حاوية تمرير محددة (الافتراضي window).

مراسي أفقية

• القسم الأول
• القسم الثاني
• الجزء الأول من القسم الثاني

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'القسم الأول' },
  { id: 'sec-2', title: 'القسم الثاني' },
]
</script>

<template>
  <!-- مراسي أفقية -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: 'القسم الأول' },
        { id: 'sec-2', title: 'القسم الثاني' },
      ],
    }
  },
}
</script>

<template>
  <!-- مراسي أفقية -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

API

خصائص LhAnchor

الخاصية	الوصف	النوع	الافتراضي
items	بيانات المراسي (تدعم المستويات الفرعية)	[LhAnchorItem](#type-LhAnchorItem)[]	—
target	حاوية التمرير (محدد أو عنصر، الافتراضي window)	string | HTMLElement	—
offset	إزاحة منطقة المرساة بالنسبة إلى أعلى حاوية التمرير (تُستخدم لتحديد الارتباط)	number	0
direction	اتجاه الترتيب	"vertical" | "horizontal"	'vertical'
smooth	تمرير سلس	boolean	true
sx	خصائص التخطيط السريع sx	LhSxProps	—

أحداث LhAnchor

الحدث	الوصف	معاملات الاستدعاء
change	يُطلق عند تغيّر المرساة النشطة حاليًا (عبر الارتباط بالتمرير أو النقر على المرساة)	(id: string)
click	يُطلق عند النقر على رابط المرساة (يُطلق قبل انتقال التمرير)	(event: MouseEvent, id: string)

LhAnchorItem

الحقل	الوصف	النوع
id	مُعرِّف العنصر الهدف	string
title	النص المعروض	string
children	مرارسٍ فرعية	LhAnchorItem[]

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

• الحاوية هي عنصر <nav> دلالي وتحمل aria-label؛ ويُعلَّم المرساة الحالي بـ aria-current="location"
• الروابط عناصر <a href="#id"> حقيقية (تعمل الانتقالات بدون JS أيضًا، ويُحسَّن النقر ليصبح تمريرًا سلسًا)
• يتحوّل التمرير السلس تلقائيًا إلى انتقال فوري في الوضع prefers-reduced-motion: reduce

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

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

LhAnchorProps

export interface LhAnchorProps {
  /** بيانات المراسي (تدعم المستويات الفرعية) */
  items: LhAnchorItem[]
  /** حاوية التمرير (محدد أو عنصر، الافتراضي window) */
  target?: string | HTMLElement
  /** إزاحة منطقة المرساة بالنسبة إلى أعلى حاوية التمرير (تُستخدم لتحديد الارتباط) */
  offset?: number
  /** اتجاه الترتيب */
  direction?: 'vertical' | 'horizontal'
  /** تمرير سلس */
  smooth?: boolean
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}

LhFlatAnchorItem _{(مأخوذ من @lh-ui/share/core/anchor)}

/** عنصر مرساة مُسطّح (للأغراض التصييرية) */
export interface LhFlatAnchorItem {
  id: string
  title: string
  level: number
}

LhAnchorItem _{(مأخوذ من @lh-ui/share/core/anchor)}

/** عنصر المرساة */
export interface LhAnchorItem {
  /** مُعرِّف العنصر الهدف */
  id: string
  /** النص المعروض */
  title: string
  /** مرارسٍ فرعية */
  children?: LhAnchorItem[]
}