Gravity UI – UIKit

import {Disclosure} from '@gravity-ui/uikit';

Disclosure — компонент раскрытия, который показывает и скрывает вложенный контент.

Управление состоянием раскрытия

Вы можете управлять состоянием раскрытия компонента, используя свойства expanded и onUpdate.

Пример управления состоянием:

Content

import {Disclosure} from '@gravity-ui/uikit';


export default function () {
    return (
        <Disclosure summary="Summary" defaultExpanded>
            Content
        </Disclosure>
    );
}

import {Disclosure} from '@gravity-ui/uikit';

export default function () {
    return (
        <Disclosure summary="Summary" defaultExpanded>
            Content
        </Disclosure>
    );
}

Размер

Используйте свойство size для управления размером Disclosure. Размер по умолчанию — m.

Content

import {Disclosure, Flex} from '@gravity-ui/uikit';


export default function () {
    return (
        <Flex gap={4} alignItems="center">
            <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>
        </Flex>
    );
}

import {Disclosure, Flex} from '@gravity-ui/uikit';

export default function () {
    return (
        <Flex gap={4} alignItems="center">
            <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>
        </Flex>
    );
}

Позиция стрелки

start: Стрелка расположена в начале заголовка (используется по умолчанию).

end: Стрелка расположена в конце заголовка.

Content

import {Disclosure, Flex} from '@gravity-ui/uikit';


export default function () {
    return (
        <Flex gap={4} alignItems="center">
            <Disclosure summary="Summary with start arrow" arrowPosition="start">
                Content
            </Disclosure>
            <Disclosure summary="Summary with end arrow" arrowPosition="end">
                Content
            </Disclosure>
        </Flex>
    );
}

import {Disclosure, Flex} from '@gravity-ui/uikit';

export default function () {
    return (
        <Flex gap={4} alignItems="center">
            <Disclosure summary="Summary with start arrow" arrowPosition="start">
                Content
            </Disclosure>
            <Disclosure summary="Summary with end arrow" arrowPosition="end">
                Content
            </Disclosure>
        </Flex>
    );
}

Пользовательский контент

Используйте компонент Disclosure.Summary для создания пользовательского заголовка и компонент Disclosure.Details для заполнения пользовательского контента.

Custom details

More custom details

Custom Details

import {Check} from '@gravity-ui/icons';
import {Button, Disclosure, Flex, Icon} from '@gravity-ui/uikit';


export default function () {
    return (
        <Flex gap={4} alignItems="center">
            <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>
        </Flex>
    );
}

import {Check} from '@gravity-ui/icons';
import {Button, Disclosure, Flex, Icon} from '@gravity-ui/uikit';

export default function () {
    return (
        <Flex gap={4} alignItems="center">
            <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>
        </Flex>
    );
}

Отключенное состояние

Disclosure может быть отключен с помощью свойства disabled.

Content

import {Disclosure} from '@gravity-ui/uikit';


export default function () {
    return (
        <Disclosure summary="Summary" disabled>
            Content
        </Disclosure>
    );
}

import {Disclosure} from '@gravity-ui/uikit';

export default function () {
    return (
        <Disclosure summary="Summary" disabled>
            Content
        </Disclosure>
    );
}

Свойства

Disclosure

Имя	Описание	Тип	Значение по умолчанию
size	Размер компонента	`"m"` `"l"` `"xl"`	`"m"`
className	Имя CSS-класса корневого элемента	`string`
disabled	Отключенное состояние	`boolean`	`false`
defaultExpanded	Состояние раскрытия по умолчанию	`boolean`	`false`
expanded	Контролируемое состояние раскрытия	`boolean`
arrowPosition	Положение контрола	`"start"` `"end"`	`"start"`
summary	Краткое описание контента	`React.ReactNode`
keepMounted	Сохранение контента в DOM при скрытии	`boolean`	`true`
onUpdate	Обратный вызов, срабатывающий при изменении состояния раскрытия	`(expanded: boolean) => void`
onSummaryKeyDown	Обратный вызов, срабатывающий при фокусе заголовка	`(e: React.KeyboardEvent<HTMLButtonElement>) => void`
children	Контент	`React.ReactNode`
qa	Идентификатор для тестирования	`string`

Disclosure.Summary

Имя	Описание	Тип	Значение по умолчанию
children	Функция рендеринга	`(props, defaultSummary) => React.ReactElement`
qa	Идентификатор для тестирования	`string`	`disclosure-summary`

Disclosure.Details

Имя	Описание	Тип	Значение по умолчанию
children	Контент	`React.ReactNode`
qa	Идентификатор для тестирования	`string`	`disclosure-details`

CSS API

Имя	Описание
`--g-disclosure-text-color`	Цвет текста краткого описания контента
`--g-disclosure-text-color-disabled`	Цвет текста краткого описания контента в заблокированном состоянии

Disclosure

§Управление состоянием раскрытия

§Размер

§Позиция стрелки

§Пользовательский контент

§Отключенное состояние

§Свойства

§Disclosure

§Disclosure.Summary

§Disclosure.Details

§CSS API

Управление состоянием раскрытия

Размер

Позиция стрелки

Пользовательский контент

Отключенное состояние

Свойства

Disclosure

Disclosure.Summary

Disclosure.Details

CSS API