The Telerik Blazor Window component displays content in a modal or non-modal HTML window. You can alert users or present important information to them in a friendly and stylish way in both Blazor WebAssembly (WASM) and Server-side Blazor apps. The Window component consists of a content container and a title bar with predefined actions such as minimize, maximize and close. You can fully customize the Window by adapting its size, position and adding custom action buttons to its titlebar.
The Blazor Window component provides several options for defining its size. You can either use the predefined sizing options, set the width and height properties, or maximize and minimize the Window through action buttons in its title bar or through code.
The Window component allows full control over its position that can be achieved by setting the three parameters it provides: Top, Left and Centered.
The Window component offers three built-in actions: Maximize, Minimize and Close. You can define custom action buttons such as Edit or Save and provide different settings for the action button properties.
You can easily switch the Window to modal mode, so that users cannot interact with the rest of the Blazor page until it is closed.
The Window component exposes several events to let you easily handle user action and control the application logic of the Blazor app. You can use the VisibleChanged event to get notifications when the user tries to close the window, or the StateChanged even when the user tries to minimize, maximize or restore the window. In addition to that, the window action buttons expose the OnClick event that enables you to quickly to implement custom buttons and invoke application logic from the Window's title bar.
Like all other Telerik UI for Blazor components, the Window component supports out of the box Keyboard Navigation and web accessibility standards implementation (WCAG, Section 508 and WAI-ARIA attributes for screen readers). This enables easy navigation through it by using just the keyboard, as well as access to the component content through assistive technologies.
The Telerik Blazor Window has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.