UI виджет Window

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

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

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

Размер и положение окна

По умолчанию, виджет Window будет такой же высоты, что и виджет, который находится в окне. Если окно пустое, то оно свернется. Вы также можете задать высоту и ширину окна вручную.

Чтобы определить положение окна, вы можете задать отступ в пикселях относительно верхней и левой границ страницы приложения. Относительное позиционирование окна позволяет разместить окно по центру или в верху экрана. Когда выбрана опция 'top', окно появляется и скрывается с анимацией 'скольжение'.

Изменение размера Window

Вы можете разрешить пользователям изменять размер окна. В этом случае в правом нижнем углу окна появится иконка, потянув за которую пользователи смогут увеличивать или уменьшать окно.

Шапка и основная часть окна

Виджет Window состоит из двух частей: шапка (header) и основная часть (body). Шапка может включать обычный текст, который поясняет содержимое окна. Вместо шапки, вы можете добавить панель инструментов. Основная часть включает любой виджет Webix.