Dialog

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

Согласно дизайн-системе Платформы имеет несколько вариантов отображения.
В качестве дочерних компонентов рекомендуется использовать компонент 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-стилей компонента	array
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
DisableFooter	Признак отображения подвала	boolean	False
DisablePaddings	Признак отображения внутреннего отступа	boolean	False
ExtraCloseButton	Дополнительная кнопка закрытия диалогового окна	boolean	True
Flayouts	Сторона экрана, у которой отображается всплывающее окно	enum		- Окно отображается с выравниванием по центру экрана Left - Окно отображается на экране слева Right - Окно отображается на экране справа
Height	Высота окна в пикселях (используется по умолчанию) или процентах	string
Hidden	Признак состояния компонента Скрыт	boolean	False
Hint	Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста	any
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
KeyboardEvents	Возможность управления диалоговым окном с клавиатуры: ESC — закрыть окно без отправки данных; ENTER — отправить данные и закрыть окно	boolean	False
Model	Псевдоним свойств Visible и OutputValue	any
NextBtn	Параметры кнопки Вперед: Видима (Visible), Отключена (Disabled)	object
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnClose	Обработчик события нажатия на кнопку закрытия диалогового окна	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnNextBtnClick	Обработчик события листания вправо	undefined
OnPrevBtnClick	Обработчик события листания влево	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputValue	Переменная, определенная в коде экранной формы, для записи признака открытого или закрытого диалогового окна	boolean	False
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>