Якорь

Якорная навигация внутри страницы с подсветкой текущего раздела при прокрутке. Семантический <nav> + aria-current="location".

Базовое использование

Базовое использование

• Раздел 1
• Раздел 2
• Раздел 2.1

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'Раздел 1' },
  { id: 'sec-2', title: 'Раздел 2', children: [{ id: 'sec-2-1', title: 'Раздел 2.1' }] },
]
</script>

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

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: 'Раздел 1' },
        { id: 'sec-2', title: 'Раздел 2', children: [{ id: 'sec-2-1', title: 'Раздел 2.1' }] },
      ],
    }
  },
}
</script>

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

Горизонтальное расположение и параметры прокрутки

direction="horizontal" переключает на горизонтальное расположение; smooth отключает плавную прокрутку; offset компенсирует смещение области якоря относительно верха контейнера прокрутки; target отслеживает указанный контейнер прокрутки (по умолчанию window).

Горизонтальные якоря

• Раздел 1
• Раздел 2
• Раздел 2.1

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'Раздел 1' },
  { id: 'sec-2', title: 'Раздел 2' },
]
</script>

<template>
  <!-- Горизонтальные якоря -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: 'Раздел 1' },
        { id: 'sec-2', title: 'Раздел 2' },
      ],
    }
  },
}
</script>

<template>
  <!-- Горизонтальные якоря -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

API

LhAnchor Props

Свойство	Описание	Тип	По умолчанию
items	Данные якорей (поддерживаются дочерние уровни)	[LhAnchorItem](#type-LhAnchorItem)[]	—
target	Контейнер прокрутки (селектор или элемент; по умолчанию window)	string | HTMLElement	—
offset	Смещение области якоря относительно верха контейнера прокрутки (используется для определения активного якоря)	number	0
direction	Направление расположения	"vertical" | "horizontal"	'vertical'
smooth	Плавная прокрутка	boolean	true
sx	Сокращённые свойства компоновки sx	LhSxProps	—

Events

Событие	Описание	Параметр обратного вызова
change	Срабатывает при смене активного якоря (при прокрутке или клике по якорю)	(id: string)
click	Срабатывает при клике по ссылке-якорю (срабатывает до выполнения прокрутки)	(event: MouseEvent, id: string)

LhAnchorItem

Поле	Описание	Тип
id	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/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

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 целевого элемента */
  id: string
  /** Отображаемый текст */
  title: string
  /** Дочерние якоря */
  children?: LhAnchorItem[]
}