Перейти к основному содержимому

Dialog

Отображает диалоговое окно

Диалоговое окно имеет несколько вариантов отображения.
В качестве дочерних компонентов рекомендуется использовать компонент Group. Компоненты Group рекомендуется использовать следующим образом:

  • первый компонент Group содержит текст в диалоговом окне;
  • второй компонент Group содержит кнопки внизу диалогового окна;
  • третий компонент Group содержит заголовок диалогового окна.
<Dialog Text="Пример 1"  Model-var="foo" Style="Info">
  <Group>
    <Text Value="В проверке «№ОД-2011-734 / 12.11.2018 –12.12.2018» есть дефекты со статусом «Черновик»." />
  </Group>
  <Group>
    <Button Text="Продолжить" />
    <Button Style="TertiaryGray" Text="Отменить" CSS={['ml-16']} />
  </Group>
</Dialog>

Свойства​

AdditionText​

Текст справа от заголовка

Тип: string

Badge​

Текст слева от заголовка

Тип: string

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

DisableFooter​

Признак отображения подвала в окне

Тип: boolean

DisablePaddings​

Признак отображения внутреннего отступа

Тип: boolean

ExtraCloseButton​

Дополнительная кнопка закрытия диалогового окна

Тип: boolean

Значение по умолчанию: True

Flayouts​

Сторона экрана, у которой отображается всплывающее окно

Тип: enum

Возможные значения:

  • Окно отображается с выравниванием по центру экрана Left - Окно отображается на экране слева Right - Окно отображается на экране справа

Height​

Высота окна в пикселях (используется по умолчанию) или процентах

Тип: string

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

KeyboardEvents​

Возможность управления диалоговым окном с клавиатуры: ESC — закрыть окно без отправки данных; ENTER — отправить данные и закрыть окно

Тип: boolean

Model​

Псевдоним свойств Visible и OutputValue

Тип: any

NextBtn​

Параметры кнопки Вперед: Видима (Visible), Отключена (Disabled)

Тип: object

OnClick​

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

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnClose​

Обработчик события нажатия кнопки закрытия диалогового окна. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent или типа KeyboardEvent.

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnNextBtnClick​

Обработчик события листания вправо. Не имеет параметров. Пример:

OnNextBtnClickt={() => { // Вывод сообщения в консоль console.log("Нажата кнопка листания вправо") } }

Тип: undefined

OnPrevBtnClick​

Обработчик события листания влево. Не имеет параметров. Пример:

OnPrevBtnClickt={() => { // Вывод сообщения в консоль console.log("Нажата кнопка листания влево") } }

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

OutputValue​

Переменная, определенная в коде экранной формы, для записи признака открытого или закрытого диалогового окна

Тип: boolean

PrevBtn​

Параметры кнопки Назад: Видима (Visible), Отключена (Disabled)

Тип: object

ShowOverlay​

Признак отображения темной подложки

Тип: boolean

Значение по умолчанию: True

Slot​

Именованное пространство во фрагменте экранной формы.

Тип: string

Style​

Стиль диалогового окна согласно дизайн-системе Платформы: заголовок со значком Информация/Предупреждение/Ошибка

Тип: enum

Возможные значения:

  • Диалоговое окно без определенного стиля Info - Диалоговое окно для информирования Warning - Диалоговое окно с предупреждением Error - Диалоговое окно с сообщением об ошибке

Subtitle​

Подзаголовок диалогового окна

Тип: string

Text​

Заголовок диалогового окна

Тип: string

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Visible​

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

Width​

Ширина окна в пикселях (используется по умолчанию) или процентах

Тип: string

Примеры​

JSX:

<Group>
  <Button
      Text="Стандартный"
      OnClick={() => {
        setState({ foo: !getValue('foo') });
      }}
  />
  <Dialog Text="Пример 1"  Model-var="foo" Style="Info">
    <Group>
      <Text Value="В проверке «№ОД-2011-734 / 12.11.2018 –12.12.2018» есть дефекты со статусом «Черновик»." />
    </Group>
    <Group>
      <Button 
        Text="Продолжить" 
        OnClick={() => {
          setState({ foo: !getValue('foo') });
        }}
      />
      <Button
        Style="TertiaryGray"
        Text="Отменить"
        CSS={['ml-16']}
        OnClick={() => {
          setState({ foo: !getValue('foo') });
        }}
      />
    </Group>
  </Dialog>
    <Button
      Text="Справа"
      OnClick={() => {
        setState({ foo1: !getValue('foo1') });
      }}
  />
  <Dialog Flayouts="Right" Text="Пример 2" Width="300"  Model-var="foo1" Style="Info" ShowOverlay={false}>
    <Group>
      <Text Value="В проверке «№ОД-2011-734 / 12.11.2018 –12.12.2018» есть дефекты со статусом «Черновик»." />
    </Group>
    <Group>
      <Button 
        Text="Продолжить" 
        OnClick={() => {
          setState({ foo1: !getValue('foo1') });
        }}
      />
      <Button
        Style="TertiaryGray"
        Text="Отменить"
        CSS={['ml-16']}
        OnClick={() => {
          setState({ foo1: !getValue('foo1') });
        }}
      />
    </Group>
  </Dialog>
</Group>