UIKit
7.26.1
• TocКомпоненты
UIKit
7.26.1
AccordionActionTooltipAlertArrowToggleAvatarBreadcrumbsButtonCardCheckboxDisclosureDividerDropdownMenuHelpMarkHotkeyIconLabelLinkListLoaderMenuModalOverlayPaginationPalettePinInputPopoverPopupPortalProgressRadioRadioGroupSegmentedRadioGroupSelectSheetSkeletonSliderSpinStepperSwitchTableTabsTextTextAreaTextInputToasterTocTooltipUserUserLabel
Date Components
3.4.1
Navigation
3.8.0
Toc
import {Toc} from '@gravity-ui/uikit';
Toc — компонент для отображения содержания страницы с двухуровневой иерархией элементов.
§Использование
Toc поддерживает два варианта использования:
- С элементами в виде ссылок.
- С элементами в виде кликабельных кнопок.
Для использования первого варианта укажите соответствующие ссылки для каждого элемента Toc через свойство href. При этом можно также использовать обработчик клика для управления активным элементом Toc.
Если ссылки не указывать, компонент будет использовать второй вариант.
§Свойства
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| className | CSS-класс. | string | |
| items | Элементы содержания. | TocItem[] | |
| value | Текущий активный элемент. | string | |
| onUpdate | Обработчик клика по элементу. | Function | |
| qa | Значение, которое будет передано в атрибут data-qa контейнера Toc. | string |
§TocItem
| Имя | Описание | Тип | Значение по умолчанию |
|---|---|---|---|
| value | Значение элемента. | string | |
| content | Отображаемое содержимое элемента. | React.ReactNode[] | |
| href | Свойство href элемента <a>, в который будет преобразован элемент, если это свойство передано. | string | |
| items | Дочерние элементы. | TocItem[] |