The Kendo UI for Vue Window component is a variety of the dialogs provided by the suite. The Window displays content in an element that can be moved along the page, resized, minified, or maximized, based on user interaction with it.
The Window component has a title area. The title provides a context of Window’s content. The title can contain custom text or stay blank.
In addition to its functionality to be initially positioned anywhere on the page, the Kendo UI for Vue Window can be easily repositioned by dragging. Click the title and drag the component around.Kendo UI for Vue Window Positioning and Dragging example
The title bar of the Window has built-in actions for its minimizing, maximizing, and closing.Kendo UI for Vue Window Minimizing and Maximizing example
When initialized, the Kendo UI for Vue Window will be sized with internally calculated width and height. These default dimensions can be easily overridden using the initialWidth and initialHeight props of the component.
The Kendo UI for Vue Window can be resized by dragging its edges or corners. To make the component resizable a single property can enable the resize functionality.
By default, the Window is initialized in an uncontrolled state. This allows its moving, resizing, etc. For the scenarios that require a controlled state, we can handle all aspects of the component using its properties.
The implementation of the Window component follows the WAI-ARIA and Section 508 standards. It is accessible by screen readers and other assistive technologies. The component also has an integrated Keyboard Navigation. This navigation enables the component’s moving and resizing using just the keyboard.