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';
The Toc component is designed to display a table of contents of the page, namely showing a set items with two levels of hierarchy.
§Usage
You can use Toc in two ways:
- With items as links.
- With items as clickable buttons.
To use the first option, provide the appropriate link to each Toc item through the href property. You will still be able to use a click handler to control the active Toc element.
If you skip this, the component will use the other option.
§Properties
| Name | Description | Type | Default |
|---|---|---|---|
| className | CSS class | string | |
| items | TOC elements | TocItem[] | |
| value | Current active item | string | |
| onUpdate | Item click handler | Function | |
| qa | The value to provide to the data-qa attribute of the Toc container | string |
§TocItem
| Name | Description | Type | Default |
|---|---|---|---|
| value | Item value | string | |
| content | Item content to display | React.ReactNode[] | |
| href | The href property of the <a> element, to which an item will be converted if provided | string | |
| items | Child items | TocItem[] |