Disclosure
Maintainer:
Raubzeug
size
disabled
arrowPosition
summary
children
import {Disclosure} from '@gravity-ui/uikit';
Disclosure is a collapsible component that allows to display and hide its nested content.
Controlling expansion state
You can control the expansion state using the expanded and onUpdate properties.
Controlled component example:
Content
function ControlledDisclosure() {
const [expanded, setExpanded] = React.useState(true);
return (
<Disclosure summary="Summary" expanded={expanded} onUpdate={setExpanded}>
Content
</Disclosure>
);
}Size
Use the size property to control the Disclosure size. The default size is m.
Content
Content
Content
<Disclosure summary="Middle size" size="m">
Content
</Disclosure>
<Disclosure summary="Large size" size="l">
Content
</Disclosure>
<Disclosure summary="Extra large size" size="xl">
Content
</Disclosure>Arrow Position
start: Arrow is positioned at the start of the header (used by default).
end: Arrow is positioned at the end of the header.
Content
Content
<Disclosure summary="Summary with start arrow" arrowPosition="start">
Content
</Disclosure>
<Disclosure summary="Summary with end arrow" arrowPosition="end">
Content
</Disclosure>Custom content
Use Disclosure.Summary component to create a custom header and Disclosure.Details to fulfill custom content.
Custom details
More custom details
Custom Details
<Disclosure>
<Disclosure.Summary>
{(props) => (
<Button {...props}>
<Icon data={Check} size={14} />
Custom summary
<Icon data={Check} size={14} />
</Button>
)}
</Disclosure.Summary>
<div>Custom details</div>
<div>More custom details</div>
</Disclosure>
<Disclosure summary="Summary">
<Disclosure.Summary>
{(_props, defaultButton) => (
<Flex gap={4}>
{defaultButton}
<Icon data={Check} size={14} />
</Flex>
)}
</Disclosure.Summary>
<Disclosure.Details>
Custom Details
</Disclosure.Details>
</Disclosure>Disabled state
Disclosure can be disabled using the disabled property.
Content
<Disclosure summary="Summary" disabled>
Content
</Disclosure>Properties
Disclosure
| Name | Description | Type | Default |
|---|---|---|---|
| size | Component size | "m" "l" "xl" | "m" |
| className | CSS class name of the root element | string | |
| disabled | Disabled state | boolean | false |
| defaultExpanded | Default opening state | boolean | false |
| expanded | Controlled opening state | boolean | |
| arrowPosition | Control position | "start" "end" | "start" |
| summary | Content summary | React.ReactNode | |
| keepMounted | Keep content in DOM even when collapsed | boolean | true |
| onUpdate | Callback is fired when the expand/collapse state is changed. | (expanded: boolean) => void | |
| onSummaryKeyDown | Callback fires on keyboard events when summary is focused. | (e: React.KeyboardEvent<HTMLButtonElement>) => void | |
| children | Content | React.ReactNode | |
| qa | Test identifier | string |
Disclosure.Summary
| Name | Description | Type | Default |
|---|---|---|---|
| children | Render function | (props, defaultSummary) => React.ReactElement | |
| qa | Test identifier | string | disclosure-summary |
Disclosure.Details
| Name | Description | Type | Default |
|---|---|---|---|
| children | Content | React.ReactNode | |
| qa | Test identifier | string | disclosure-details |
CSS API
| Name | Description |
|---|---|
--g-disclosure-text-color | Text color for the content summary |
--g-disclosure-text-color-disabled | Text color for the content summary in disabled state |