@gravity-ui/uikit
Version:
Gravity UI base styling and components
38 lines (26 loc) • 2.16 kB
Markdown
# Toc
The `Toc` component is designed to display a table of contents of the page, namely showing a set items with two levels of hierarchy.
```tsx
import {Toc} from '@gravity-ui/uikit';
```
## Usage
You can use `Toc` in two ways:
1. With items as links.
2. 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[]` | |