background

Kendo UI for Vue

Vue Window

  • Displays content in a non-modal HTML window which can be moved, resized and closed.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Example of a Window created using the component
  • Minimizing and Maximizing

    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
    Window - Minimizing and Maximizing
  • Dimensions

    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.

    Kendo UI for Vue Window Dimensions example

    Window – Dimensions
  • Resizing

    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. 

    Kendo UI for Vue Window Resizing example

    Window - Resizing
  • Controlled and Uncontrolled Modes

    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.

    Kendo UI for Vue Window Controlled mode example

  • Keyboard Navigation & Accessibility

    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.

    Kendo UI for Vue Window Keyboard Navigation example

    Accessibility
  • Overview

    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.

    See Kendo UI for Vue Window overview demo

    Window - Overview
  • Title

    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.

    Kendo UI for Vue Window Title demo

    Window – Title
  • Positioning and Dragging

    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
    Window - Positioning & Dragging
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka