ModalCardBase

Ключевые элементы

Визуальные компоненты

Иконка

Задаётся свойством icon. Рекомендуется использовать:

• контурные иконки размером 56px (<Icon56...Outline />);
• аватары размером 72px(<Avatar size={72} src={...} />).

Текстовые блоки

• Свойство title отвечает за основной заголовок.
• Свойство description отвечает за поясняющий текст.

Интерактивные элементы

• Свойство actions используется для задания группы кнопок (Button).
• Свойство outsideButtons используется для дополнительных элементов управления (только для десктопа). Рекомендуется использовать компонент ModalOutsideButton

Блокировка закрытия

Свойство preventClose отключает закрытие по нажатию, свайпу или клавише ESC.

Размеры и адаптивность

Компонент автоматически адаптируется под все устройства, но с помощью свойство size можно определить максимальную ширину для десктопа (по умолчанию 450px).

Кнопка для закрытия

Через свойство dismissButtonMode=inside|outside|none можно задать вид кнопки закрытия. Согласно нашим дизайн-гайдам, dismissButtonMode=outside отображается только для compact-режима (десктопная и планшетные версии). Для iOS всегда будет применяться dismissButtonMode=inside в regular-режиме (мобильная версия).

Отступы между контентом и кнопками действий (actions)

По умолчанию верхний отступ от кнопок действий actions равняется 16px. Согласно дизайн-системе отступ может быть больше в зависимости от того какие данные отображаются внутри ModalCardBase. Если необходимо увеличить отступ, то передавайте в actions компонент Spacing.

Доступность (a11y)

Если ModalCardBase является модальным окном, то ему, или его родителю, надо добавить аттрибуты role="dialog" и aria-modal="true", чтобы пользователи клавиатуры или скринридера не могли выйти за пределы модального окна пока оно не закрылось.

Также у ModalCardBase обязательно должно быть имя — краткое название. Благодаря этому пользователи вспомогательных технологий знают, что это за элемент и какое у него содержимое.

Задать имя можно с помощью следующих способов:

• используя свойство title. Тогда следует также передать aria-labelledby и titleId так, чтобы они имели одинаковые значения, чтобы можно было связать title и модальное окно. Мы не делаем этого автоматически потому что не можем быть уверены на каком уровне будут заданы role и aria-modal;
• используя свойство aria-label;
• используя свойство aria-labelledby. Если не использовать свойство title, то можно передать id любого контейнера с текстом;

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

Свойства и методы