← Back to components list

TrackerDisclosure

A collapsible block (accordion) component in Tracker style. Built on Disclosure from @gravity-ui/uikit with additional features: custom classes for component parts, configurable arrow size, and a toolbar slot next to the header.

Basic usage

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

<TrackerDisclosure summary="Section header">
    <p>Section content</p>
</TrackerDisclosure>

With toolbar and custom settings

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

<TrackerDisclosure
    summary="Settings"
    defaultExpanded
    arrowPosition="start"
    arrowSize={16}
    toolbar={<button>Action</button>}
    summaryClassName="my-summary"
>
    <p>Content</p>
</TrackerDisclosure>

Props

The component accepts all DisclosureProps from @gravity-ui/uikit, plus additional ones:

Prop Type Default Description
summary ReactNode — Header content
arrowPosition 'start' | 'end' 'end' Arrow position relative to the header
arrowSize number 20 Arrow icon size in pixels
toolbar ReactNode — Additional content next to the header, but not inside the button
summaryClassName string — CSS class for the header block
toggleClassName string — CSS class for the toggle button
arrowClassName string — CSS class for the arrow icon
className string — CSS class for the root element
Previous
QueueSelect
Next
PriorityIcon