Anchor

Навигационный компонент, который отслеживает положение прокрутки и подсвечивает текущую секцию. Поддерживает плавную прокрутку, вложенные элементы, горизонтальный режим и анимированные индикаторы.

Basic

Якорь отслеживает, какая секция видна, и подсвечивает соответствующую ссылку. Клик по ссылке плавно прокручивает к её секции.

Getting StartedInstallationConfigurationAdvanced Usage

Getting Started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Installation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Configuration

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Advanced Usage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

<script setup>
import { ref } from 'vue'
import { VxAnchor } from 'veloxui'

const items = [
  { href: '#getting-started', title: 'Getting Started' },
  { href: '#installation', title: 'Installation' },
  { href: '#configuration', title: 'Configuration' },
  { href: '#advanced', title: 'Advanced Usage' },
]
</script>

<template>
  <VxAnchor :items="items" />
</template>

Nested Items

Используйте children для подсекций. Вложенные ссылки автоматически получают отступ.

Getting StartedInstallation

npmyarn

ConfigurationAdvanced Usage

npm

npm install veloxui

yarn

yarn add veloxui

<VxAnchor :items="[
  { href: '#intro', title: 'Introduction' },
  { href: '#install', title: 'Installation', children: [
    { href: '#npm', title: 'npm' },
    { href: '#yarn', title: 'yarn' },
  ]},
  { href: '#config', title: 'Configuration' },
]" />

Marker Styles

Выбирайте между line (по умолчанию), dot или none.

Line

Getting StartedInstallationConfigurationAdvanced Usage

Dot

Getting StartedInstallationConfigurationAdvanced Usage

None

Getting StartedInstallationConfigurationAdvanced Usage

<VxAnchor :items="items" marker="line" />
<VxAnchor :items="items" marker="dot" />
<VxAnchor :items="items" marker="none" />

Horizontal

Установите direction="horizontal" для горизонтальной панели якорей.

OverviewFeaturesPricingFAQ

Overview

Section content goes here.

Features

Section content goes here.

Pricing

Section content goes here.

FAQ

Section content goes here.

<VxAnchor :items="items" direction="horizontal" />

Horizontal Dot

OverviewFeaturesPricingFAQ

<VxAnchor :items="items" direction="horizontal" marker="dot" />

Disabled Items

Отдельные элементы можно отключить.

AvailableAvailableLockedLocked

<VxAnchor :items="[
  { href: '#a', title: 'Available' },
  { href: '#b', title: 'Locked', disabled: true },
]" />

Hash Change

По умолчанию клик по ссылке обновляет хэш URL. Отключите через :hash-change="false".

<!-- URL hash stays unchanged -->
<VxAnchor :items="items" :hash-change="false" />

Custom Target

Ограничьте отслеживание прокрутки конкретным контейнером, передав CSS-селектор или HTMLElement.

<div id="scroll-area" style="height: 400px; overflow: auto;">
  <VxAnchor :items="items" target="#scroll-area" />
  <div id="section-1">...</div>
  <div id="section-2">...</div>
</div>

Custom Classes

Переопределяйте стили через root-class, item-class, active-class и indicator-class.

<VxAnchor
  :items="items"
  root-class="my-anchor"
  item-class="my-link"
  active-class="my-active"
  indicator-class="my-indicator"
/>

Custom Item Slot

Используйте slot #item для кастомного рендеринга. Получает item и active.

<VxAnchor :items="items">
  <template #item="{ item, active }">
    <span :style="{ fontWeight: active ? 700 : 400 }">
      {{ active ? '> ' : '' }}{{ item.title }}
    </span>
  </template>
</VxAnchor>

With Affix

Оберните в VxAffix, чтобы сделать якорь липким при прокрутке.

<VxAffix :offset="80" shadow>
  <VxAnchor :items="items" :offset="80" />
</VxAffix>

API

VxAnchor Props

Prop	Type	Default	Description
items	AnchorItem[]	[]	Определения ссылок якоря
v-model	string	—	Активный href
offset	number	0	Отступ прокрутки от верха (px)
direction	'vertical' | 'horizontal'	'vertical'	Направление раскладки
marker	'line' | 'dot' | 'none'	'line'	Стиль индикатора активности
target	string | HTMLElement	window	Контейнер прокрутки
smooth	boolean	true	Плавная анимация прокрутки
hash-change	boolean	true	Обновлять хэш URL при клике
indent	number	16	Отступ вложенных элементов (px)
root-class	string | string[] | object	—	Класс на корневом элементе
item-class	string | string[] | object	—	Класс на каждой ссылке
active-class	string | string[] | object	—	Класс на активной ссылке
indicator-class	string | string[] | object	—	Класс на индикаторе

AnchorItem

Property	Type	Required	Description
href	string	Да	id целевой секции (например, #section)
title	string	Да	Отображаемый текст
children	AnchorItem[]	Нет	Вложенные подссылки
disabled	boolean	Нет	Отключить эту ссылку

Events

Event	Payload	Description
update:modelValue	string	Активный href изменился
change	string	Активная секция изменилась
click	(item, event)	Клик по ссылке

Slots

Slot	Props	Description
item	{ item: AnchorItem, active: boolean }	Своё содержимое ссылки

Exposed

Name	Type	Description
scrollTo(href)	function	Программная прокрутка к секции
activeHref	Ref<string>	Текущий активный href