---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.5
  - property: og:type
    content: article
  - property: article:section
    content: Платформа плагинов
  - property: og:title
    content: TrackerDisclosure
  - property: article:tag
    content: Техническая инструкция
alternate:
  - https://yandex.ru/support/tracker/en/plugins/components/tracker-disclosure.md
  - https://yandex.ru/support/tracker/ru/plugins/components/tracker-disclosure.md
  - href: ru/plugins/components/tracker-disclosure.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tracker/ru/llms.txt

[← К списку компонентов](https://yandex.ru/support/tracker/ru/plugins/components/index.md)

# TrackerDisclosure {#tracker-disclosure}

Компонент раскрывающегося блока (аккордеон) в стиле Трекера. Построен на основе `Disclosure` из `@gravity-ui/uikit` с дополнительными возможностями: кастомные классы для частей компонента, настраиваемый размер стрелки и слот для тулбара рядом с заголовком.

## Базовое использование {#usage}

```tsx
import {TrackerDisclosure} from '@weavix/tracker-components';

<TrackerDisclosure summary="Заголовок секции">
    <p>Содержимое секции</p>
</TrackerDisclosure>
```

## С тулбаром и кастомными настройками {#toolbar}

```tsx
import {TrackerDisclosure} from '@weavix/tracker-components';

<TrackerDisclosure
    summary="Настройки"
    defaultExpanded
    arrowPosition="start"
    arrowSize={16}
    toolbar={<button>Действие</button>}
    summaryClassName="my-summary"
>
    <p>Содержимое</p>
</TrackerDisclosure>
```

## Свойства {#props}

Компонент принимает все свойства `DisclosureProps` из `@gravity-ui/uikit`, а также дополнительные:

| Свойство | Тип | По умолчанию | Описание |
|---|---|---|---|
| `summary` | `ReactNode` | — | Содержимое заголовка |
| `arrowPosition` | `'start'` \| `'end'` | `'end'` | Позиция стрелки относительно заголовка |
| `arrowSize` | `number` | `20` | Размер иконки стрелки в пикселях |
| `toolbar` | `ReactNode` | — | Дополнительный контент рядом с заголовком, но не внутри кнопки |
| `summaryClassName` | `string` | — | CSS-класс для блока заголовка |
| `toggleClassName` | `string` | — | CSS-класс для кнопки переключения |
| `arrowClassName` | `string` | — | CSS-класс для иконки стрелки |
| `className` | `string` | — | CSS-класс корневого элемента |