← К списку компонентов

TrackerDisclosure

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

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

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

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

С тулбаром и кастомными настройками

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

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

Свойства

Компонент принимает все свойства 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-класс корневого элемента
Предыдущая
QueueSelect
Следующая
PriorityIcon