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>
    );
}

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 {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 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 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 multiple>
            <Accordion.Item summary="Первый элемент">Содержимое первого элемента</Accordion.Item>
            <Accordion.Item 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>
    );
}

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


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