Dialog

Диалоги информируют пользователей о задаче и могут содержать критическую информацию, требовать решения или включать несколько задач.

Диалог представляет собой тип модальных окон, который появляется над приложением, чтобы предоставить важную информацию или для предоставления решения. Диалоги отключают все функции приложения, когда они появляются, и остаются на экране до тех пор, пока не будут подтверждены, отклонены или пока не будут предприняты необходимые действия.

Диалоги целенаправленно останавливают, поэтому их следует использовать с осторожностью.

Простые диалоги

Простые диалоговые окна могут предоставить дополнительные сведения или действия об элементе списка. Например, они могут отображать аватары, иконки, уточнение подтекста, или действия (например, добавление учетной записи).

Особенности механики касаний:

Выбор опции немедленно фиксирует ее и закрывает меню
Касание за пределами диалога или нажатие Назад отменяет действие и закрывает диалоговое окно

Selected: user02@gmail.com

<Typography variant="subtitle1" component="div">
  Selected: {selectedValue}
</Typography>
<br />
<Button variant="outlined" onClick={handleClickOpen}>
  Open simple dialog
</Button>
<SimpleDialog
  selectedValue={selectedValue}
  open={open}
  onClose={handleClose}
/>

Оповещения

Оповещения - это срочные сообщения, требующие подтверждения, которые информируют пользователя о ситуации.

Большинство предупреждений не нужны заголовки. They summarize a decision in a sentence or two by either:

Задать вопрос (например, «Удалить этот разговор?»)
Создать заявления, связанное с кнопками действий

Use title bar alerts only for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the title and button text alone.

Если требуется название:

Используйте четкий вопрос или утверждение с пояснением в области содержимого, например «Очистить USB-накопитель?».
Избегайте извинений, двусмысленности или вопросов, таких как «Предупреждение!» Или «Вы уверены?»

Переходы

Вы также можете поменять анимацию, в следующем примере используется Slide.

Диалоги с формой

Диалоги с формой позволяют пользователям заполнять поля формы внутри диалога. Например, если ваш сайт предлагает потенциальным подписчикам заполнить свой адрес электронной почты, они могут заполнить поле электронной почты и нажать «Отправить».

Индивидуальные диалоги

Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.

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

Полноэкранные диалоги

Опциональные размеры

Вы можете установить максимальную ширину диалога с помощью числового значения maxWidth в сочетании с булевым значением fullWidth. Когда свойство fullWidth имеет значение true, диалоговое окно будет адаптировано на основе значения maxWidth.

Отзывчивый полноэкранный режим

You may make a dialog responsively full screen using useMediaQuery.

import useMediaQuery from '@material-ui/core/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return <Dialog fullScreen={fullScreen} />
}

Диалоги подтверждения

Диалоги подтверждения требуют, чтобы пользователи явно подтвердили свой выбор, прежде чем их выбор будет сохранен. Например, пользователи могут прослушивать несколько мелодий, но сделать окончательный выбор только после нажатия «ОК.».

Нажатие кнопки «Отмена» в диалоговом окне подтверждения или нажатие «Назад» отменяет действие, отменяет любые изменения и закрывает диалоговое окно.

Interruptions

Phone ringtone

Dione

Default notification ringtone

Tethys

Перетаскиваемый диалог

Вы можете создать перетаскиваемый диалог, используя react-draggable. Для этого вы можете передать импортированный компонент Draggable как компонент PaperComponent компонента Dialog. Это сделает весь диалог перетаскиваемым.

Прокрутка длинного контента

Когда диалоги становятся слишком длинными для окна просмотра или устройства пользователя, они их прокручивают.

scroll = paper содержимое диалогового окна прокручивается внутри элемента paper.
scroll = body содержимое диалога прокручивается внутри элемента body.

Попробуйте демо ниже, чтобы увидеть, что мы имеем в виду:

Производительность

Перейдите в раздел Modal performance section.

Ограничения

Follow the Modal limitations section.

Доступность

Смотри раздел доступности модальных окон.