Modal

Использование​

Перед использованием убедитесь, что PopupProvider подключен. Компонент Modal во многом схож с Popup, добавляет при этом подложку(overlay), а также блокирует scroll и focus.

Live Editor
Result
Open in CodeSandbox

Использование стилизованной обертки​

Для использования стилизованного модального окна с отступами и крестиком для закрытия, добавьте свойство hasBody.

Live Editor
Result
Open in CodeSandbox

Подключение анимации​

Подключение анимации аналогично тому, как это происходит в Popup - через свойство withAnimation(управление через popupClasses, modalClasses). Для добавления анимации в оверлей необходимо использовать класс .modal-overlay через переменную modalClasses.overlay из пакета.

Пример:

import styled from 'styled-components';
import { Modal } from '@salutejs/sdds-cs';

const StyledModal = styled(Modal)`
    && > .${popupClasses.root}, .${modalClasses.overlay} {
        animation: fadeIn 1s forwards;
    }

    &&.${popupClasses.endAnimation} .${popupClasses.root} {
        animation: fadeOut 1s forwards;
    }

    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
        animation: fadeOut 1s forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
`;