Dialog
Диалоги информируют пользователей о задаче и могут содержать критическую информацию, требовать решения или включать несколько задач.
Диалог представляет собой тип модальных окон, который появляется над приложением, чтобы предоставить важную информацию или для предоставления решения. Диалоги отключают все функции приложения, когда они появляются, и остаются на экране до тех пор, пока не будут подтверждены, отклонены или пока не будут предприняты необходимые действия.
Диалоги целенаправленно останавливают, поэтому их следует использовать с осторожностью.
Простые диалоги
Простые диалоговые окна могут предоставить дополнительные сведения или действия об элементе списка. Например, они могут отображать аватары, иконки, уточнение подтекста, или действия (например, добавление учетной записи).
Особенности механики касаний:
- Выбор опции немедленно фиксирует ее и закрывает меню
- Касание за пределами диалога или нажатие Назад отменяет действие и закрывает диалоговое окно
<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-накопитель?».
- Avoid apologies, ambiguity, or questions, such as "Warning!" or "Are you sure?"
Диалоги с формой
Диалоги с формой позволяют пользователям заполнять поля формы внутри диалога. Например, если ваш сайт предлагает потенциальным подписчикам заполнить свой адрес электронной почты, они могут заполнить поле электронной почты и нажать «Отправить».
Индивидуальные диалоги
Ниже находится пример кастомизации компонента. 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} />
}Диалоги подтверждения
Диалоги подтверждения требуют, чтобы пользователи явно подтвердили свой выбор, прежде чем их выбор будет сохранен. For example, users can listen to multiple ringtones but only make a final selection upon touching "OK".
Touching "Cancel" in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog.
Перетаскиваемый диалог
Вы можете создать перетаскиваемый диалог, используя react-draggable. Для этого вы можете передать импортированный компонент Draggable как компонент PaperComponent компонента Dialog. Это сделает весь диалог перетаскиваемым.
Прокрутка длинного контента
When dialogs become too long for the user's viewport or device, they scroll.
scroll = paperсодержимое диалогового окна прокручивается внутри элемента paper.scroll = bodyсодержимое диалога прокручивается внутри элемента body.
Попробуйте демо ниже, чтобы увидеть, что мы имеем в виду:
Производительность
Перейдите в раздел Modal performance section.
Ограничения
Follow the Modal limitations section.