Gravity UI – UIKit

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

Компонент Accordion позволяет создавать сворачиваемые панели контента, где пользователи могут показывать или скрывать разделы информации. Это полезно для организации больших объемов контента в компактном виде.

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

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

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

Настройки

Настройте параметры вашего приложения

Уведомления

Управляйте настройками уведомлений

import {useState} from 'react';
import {Accordion} from '@gravity-ui/uikit';


export default function () {
    const [value, setValue] = useState<string | null>('item1');


    return (
        <Accordion value={value} onUpdate={setValue}>
            <Accordion.Item summary="Настройки" value="item1">
                Настройте параметры вашего приложения
            </Accordion.Item>
            <Accordion.Item summary="Уведомления" value="item2">
                Управляйте настройками уведомлений
            </Accordion.Item>
        </Accordion>
    );
}

import {useState} from 'react';
import {Accordion} from '@gravity-ui/uikit';

export default function () {
    const [value, setValue] = useState<string | null>('item1');

    return (
        <Accordion value={value} onUpdate={setValue}>
            <Accordion.Item summary="Настройки" value="item1">
                Настройте параметры вашего приложения
            </Accordion.Item>
            <Accordion.Item summary="Уведомления" value="item2">
                Управляйте настройками уведомлений
            </Accordion.Item>
        </Accordion>
    );
}

Пример управления состоянием для каждого элемента через свойство expanded:

Настройки

Настройте параметры вашего приложения

Уведомления

Управляйте настройками уведомлений

import {useState} from 'react';
import {Accordion} from '@gravity-ui/uikit';


export default function () {
    const [item1, setItem1] = useState(true);
    const [item2, setItem2] = useState(false);


    return (
        <Accordion>
            <Accordion.Item
                summary="Настройки"
                onUpdate={setItem1}
                value="item1"
                expanded={item1}
            >
                Настройте параметры вашего приложения
            </Accordion.Item>
            <Accordion.Item
                summary="Уведомления"
                onUpdate={setItem2}
                value="item2"
                expanded={item2}
            >
                Управляйте настройками уведомлений
            </Accordion.Item>
        </Accordion>
    );
}

import {useState} from 'react';
import {Accordion} from '@gravity-ui/uikit';

export default function () {
    const [item1, setItem1] = useState(true);
    const [item2, setItem2] = useState(false);

    return (
        <Accordion>
            <Accordion.Item
                summary="Настройки"
                onUpdate={setItem1}
                value="item1"
                expanded={item1}
            >
                Настройте параметры вашего приложения
            </Accordion.Item>
            <Accordion.Item
                summary="Уведомления"
                onUpdate={setItem2}
                value="item2"
                expanded={item2}
            >
                Управляйте настройками уведомлений
            </Accordion.Item>
        </Accordion>
    );
}

Размер

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

Средний размер

Содержимое для среднего аккордеона

Большой размер

Содержимое для большого аккордеона

Очень большой размер

Содержимое для очень большого аккордеона

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


export default function () {
    return (
        <>
            <Accordion size="m">
                <Accordion.Item summary="Средний размер">
                    Содержимое для среднего аккордеона
                </Accordion.Item>
            </Accordion>
            <Accordion size="l">
                <Accordion.Item summary="Большой размер">
                    Содержимое для большого аккордеона
                </Accordion.Item>
            </Accordion>
            <Accordion size="xl">
                <Accordion.Item summary="Очень большой размер">
                    Содержимое для очень большого аккордеона
                </Accordion.Item>
            </Accordion>
        </>
    );
}

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

export default function () {
    return (
        <>
            <Accordion size="m">
                <Accordion.Item summary="Средний размер">
                    Содержимое для среднего аккордеона
                </Accordion.Item>
            </Accordion>
            <Accordion size="l">
                <Accordion.Item summary="Большой размер">
                    Содержимое для большого аккордеона
                </Accordion.Item>
            </Accordion>
            <Accordion size="xl">
                <Accordion.Item summary="Очень большой размер">
                    Содержимое для очень большого аккордеона
                </Accordion.Item>
            </Accordion>
        </>
    );
}

Внешний вид

solid: Основной вид с фоном (используется по умолчанию).

top-bottom: Вид с верхней и нижней границами.

Сплошной вид

Содержимое со сплошным фоном

Другой элемент

Больше содержимого

Вид с границами

Содержимое с верхней и нижней границами

Другой элемент

Больше содержимого

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


export default function () {
    return (
        <>
            <Accordion view="solid">
                <Accordion.Item summary="Сплошной вид">
                    Содержимое со сплошным фоном
                </Accordion.Item>
                <Accordion.Item summary="Другой элемент">Больше содержимого</Accordion.Item>
            </Accordion>
            <Accordion view="top-bottom">
                <Accordion.Item summary="Вид с границами">
                    Содержимое с верхней и нижней границами
                </Accordion.Item>
                <Accordion.Item summary="Другой элемент">Больше содержимого</Accordion.Item>
            </Accordion>
        </>
    );
}

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

export default function () {
    return (
        <>
            <Accordion view="solid">
                <Accordion.Item summary="Сплошной вид">
                    Содержимое со сплошным фоном
                </Accordion.Item>
                <Accordion.Item summary="Другой элемент">Больше содержимого</Accordion.Item>
            </Accordion>
            <Accordion view="top-bottom">
                <Accordion.Item summary="Вид с границами">
                    Содержимое с верхней и нижней границами
                </Accordion.Item>
                <Accordion.Item summary="Другой элемент">Больше содержимого</Accordion.Item>
            </Accordion>
        </>
    );
}

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

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

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

Стрелка в конце

Содержимое со стрелкой в конце

Стрелка в начале

Содержимое со стрелкой в начале

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


export default function () {
    return (
        <>
            <Accordion arrowPosition="end">
                <Accordion.Item summary="Стрелка в конце">
                    Содержимое со стрелкой в конце
                </Accordion.Item>
            </Accordion>
            <Accordion arrowPosition="start">
                <Accordion.Item summary="Стрелка в начале">
                    Содержимое со стрелкой в начале
                </Accordion.Item>
            </Accordion>
        </>
    );
}

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

export default function () {
    return (
        <>
            <Accordion arrowPosition="end">
                <Accordion.Item summary="Стрелка в конце">
                    Содержимое со стрелкой в конце
                </Accordion.Item>
            </Accordion>
            <Accordion arrowPosition="start">
                <Accordion.Item summary="Стрелка в начале">
                    Содержимое со стрелкой в начале
                </Accordion.Item>
            </Accordion>
        </>
    );
}

Множественное раскрытие

Свойство multiple позволяет одновременно раскрывать несколько элементов аккордеона.

Первый элемент

Содержимое первого элемента

Второй элемент

Содержимое второго элемента

Третий элемент

Содержимое третьего элемента

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


export default function () {
    return (
        <Accordion multiple>
            <Accordion.Item summary="Первый элемент">Содержимое первого элемента</Accordion.Item>
            <Accordion.Item summary="Второй элемент">Содержимое второго элемента</Accordion.Item>
            <Accordion.Item summary="Третий элемент">Содержимое третьего элемента</Accordion.Item>
        </Accordion>
    );
}

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

export default function () {
    return (
        <Accordion multiple>
            <Accordion.Item summary="Первый элемент">Содержимое первого элемента</Accordion.Item>
            <Accordion.Item summary="Второй элемент">Содержимое второго элемента</Accordion.Item>
            <Accordion.Item summary="Третий элемент">Содержимое третьего элемента</Accordion.Item>
        </Accordion>
    );
}

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

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

Содержимое с пользовательским компонентом заголовка

Обычный заголовок

Содержимое с обычным свойством заголовка

import {Accordion, Button} from '@gravity-ui/uikit';


export default function () {
    return (
        <Accordion>
            <Accordion.Item value="custom">
                <Accordion.Summary>
                    {(props) => (
                        <Button {...props} view="flat" width="max">
                            Пользовательская кнопка заголовка
                        </Button>
                    )}
                </Accordion.Summary>
                Содержимое с пользовательским компонентом заголовка
            </Accordion.Item>
            <Accordion.Item summary="Обычный заголовок">
                Содержимое с обычным свойством заголовка
            </Accordion.Item>
        </Accordion>
    );
}

import {Accordion, Button} from '@gravity-ui/uikit';

export default function () {
    return (
        <Accordion>
            <Accordion.Item value="custom">
                <Accordion.Summary>
                    {(props) => (
                        <Button {...props} view="flat" width="max">
                            Пользовательская кнопка заголовка
                        </Button>
                    )}
                </Accordion.Summary>
                Содержимое с пользовательским компонентом заголовка
            </Accordion.Item>
            <Accordion.Item summary="Обычный заголовок">
                Содержимое с обычным свойством заголовка
            </Accordion.Item>
        </Accordion>
    );
}

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

Отдельные элементы аккордеона могут быть отключены с помощью свойства disabled.

Активный элемент

Этот элемент активен и может быть раскрыт

Отключенный элемент

Этот элемент отключен и не может быть раскрыт

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


export default function () {
    return (
        <Accordion>
            <Accordion.Item summary="Активный элемент">
                Этот элемент активен и может быть раскрыт
            </Accordion.Item>
            <Accordion.Item summary="Отключенный элемент" disabled>
                Этот элемент отключен и не может быть раскрыт
            </Accordion.Item>
        </Accordion>
    );
}

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

export default function () {
    return (
        <Accordion>
            <Accordion.Item summary="Активный элемент">
                Этот элемент активен и может быть раскрыт
            </Accordion.Item>
            <Accordion.Item summary="Отключенный элемент" disabled>
                Этот элемент отключен и не может быть раскрыт
            </Accordion.Item>
        </Accordion>
    );
}

Свойства

Accordion

Название	Описание	Тип	По умолчанию
size	Размер аккордеона	`"m"` `"l"` `"xl"`	`"m"`
view	Внешний вид аккордеона	`"solid"` `"top-bottom"`	`"solid"`
multiple	Разрешить одновременное раскрытие нескольких элементов	`boolean`	`false`
arrowPosition	Позиция индикатора стрелки	`"start"` `"end"`	`"end"`
defaultValue	Значение по умолчанию для неконтролируемого состояния	`string` `string[]` `null`
value	Текущее значение для контролируемого состояния	`string` `string[]` `null`
onUpdate	Функция обратного вызова, вызываемая при изменении состояния	`Function`
ariaLevel	Уровень заголовка для доступности	`number`	`3`
className	CSS класс	`string`
qa	HTML атрибут `data-qa`, используется для тестирования	`string`

Accordion.Item

Название	Описание	Тип	По умолчанию
value	Уникальный идентификатор элемента	`string`
summary	Заголовок элемента аккордеона	`React.ReactNode`
expanded	Контролируемое состояние раскрытия	`boolean`
defaultExpanded	Состояние раскрытия по умолчанию	`boolean`
disabled	Отключает элемент аккордеона	`boolean`	`false`
keepMounted	Сохранять содержимое в DOM даже при сворачивании	`boolean`
onUpdate	Функция обратного вызова, вызываемая при изменении состояния элемента	`Function`
className	CSS класс	`string`
qa	HTML атрибут `data-qa`, используется для тестирования	`string`

Accordion.Summary

Название	Описание	Тип	По умолчанию
children	Пользовательская функция рендеринга заголовка	`(props, defaultSummary) => React.ReactElement`
qa	HTML атрибут `data-qa`, используется для тестирования. Работает только если `qa` передан в Accordion.Item	`string`	`${accordion-item}-summary` если `qa` передан в Accordion.Item, `disclosure-summary` если нет

CSS API

Название	Описание
`--g-accordion-padding-inline`	Горизонтальные отступы для аккордеона

Accordion

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

§Размер

§Внешний вид

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

§Множественное раскрытие

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

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

§Свойства

§Accordion

§Accordion.Item

§Accordion.Summary

§CSS API

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

Размер

Внешний вид

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

Множественное раскрытие

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

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

Свойства

Accordion

Accordion.Item

Accordion.Summary

CSS API