Anchor

Компонент Anchor предназначен для создания навигационных ссылок внутри страницы, особенно полезен для длинных документов, таблиц содержимого или страниц с секциями. Он автоматически обеспечивает плавную прокрутку к выбранному элементу и поддерживает активное выделение текущей секции.

Основная структура Anchor

Компонент n-anchor используется вместе с дочерними n-anchor-link. Стандартная структура выглядит так:

Ключевые моменты:

  • href указывает на идентификатор секции страницы (#section1).
  • title задает текст ссылки в навигационной панели.
  • show-ink-bar отвечает за отображение индикатора активной ссылки.
  • bounds определяет, сколько пикселей от верхней границы окна считается «активной» областью.

Свойства Anchor

  1. show-ink-bar (Boolean) – отображение индикатора активности текущей ссылки.
  2. bounds (Number) – область в пикселях от верхней границы окна, в пределах которой ссылка считается активной.
  3. target (String | HTMLElement) – элемент прокрутки. По умолчанию window. Можно задать контейнер с прокруткой, например #scroll-container.
  4. affix (Boolean) – закрепляет Anchor слева на странице при прокрутке.
  5. direction (String) – направление панели навигации: vertical или horizontal.

n-anchor-link поддерживает следующие ключевые свойства:

  • href – идентификатор целевой секции.
  • title – текст ссылки.
  • disabled – отключает ссылку, делает её некликабельной.
  • target – отдельное указание контейнера прокрутки для конкретной ссылки.
  • children – возможность создавать вложенные ссылки, что удобно для многоуровневой структуры.

Пример вложенных ссылок:

События

n-anchor поддерживает несколько событий:

  • onChange – срабатывает при изменении активной ссылки. Возвращает объект вида { href: string }.
  • onClick – срабатывает при клике на ссылку, возвращает { href: string, e: MouseEvent }.

Пример использования событий:

Динамическое обновление ссылок

Ссылки Anchor можно генерировать динамически из массива объектов. Это упрощает поддержку большого документа и интеграцию с API.

Стилизация

Anchor поддерживает кастомизацию через CSS-переменные:

  • --n-anchor-link-font-size – размер текста ссылки.
  • --n-anchor-link-color – цвет текста ссылки.
  • --n-anchor-ink-bar-color – цвет индикатора активной ссылки.
  • --n-anchor-link-padding – отступы ссылок.
  • --n-anchor-background-color – фон панели.

Пример кастомизации:

.n-anchor {
  --n-anchor-link-color: #409eff;
  --n-anchor-ink-bar-color: #409eff;
  --n-anchor-link-font-size: 16px;
}

Практические советы

  • Использовать bounds для точной настройки, если страницы имеют крупные заголовки.
  • Вложенные n-anchor-link удобны для сложной структуры документа.
  • При использовании кастомного контейнера с прокруткой обязательно указывать target, чтобы активная ссылка корректно отслеживалась.
  • affix хорошо применять для документации и справочных страниц, чтобы панель Anchor всегда оставалась видимой.
Оглавление