import {Toc} from '@gravity-ui/uikit';

Toc — компонент для отображения содержания страницы с двухуровневой иерархией элементов.

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

Toc поддерживает два варианта использования:

  1. С элементами в виде ссылок.
  2. С элементами в виде кликабельных кнопок.

Для использования первого варианта укажите соответствующие ссылки для каждого элемента Toc через свойство href. При этом можно также использовать обработчик клика для управления активным элементом Toc.

Если ссылки не указывать, компонент будет использовать второй вариант.

Свойства

ИмяОписаниеТипЗначение по умолчанию
classNameCSS-класс.string
itemsЭлементы содержания.TocItem[]
valueТекущий активный элемент.string
onUpdateОбработчик клика по элементу.Function
qaЗначение, которое будет передано в атрибут data-qa контейнера Toc.string

TocItem

ИмяОписаниеТипЗначение по умолчанию
valueЗначение элемента.string
contentОтображаемое содержимое элемента.React.ReactNode[]
hrefСвойство href элемента <a>, в который будет преобразован элемент, если это свойство передано.string
itemsДочерние элементы.TocItem[]