Window Overview
This article provides basic information about the Window component.
To create a Telerik Window:
- use the
TelerikWindowtag - set its
Visibleproperty totrueto see it immediately - add some content to its
WindowContentinner tag - optionally, add a title text in its
WindowTitletag - optionally, add the built-in actions to its titlebar
Basic example of showing content in a Window popup and allowing built-in actions
<TelerikWindow Visible="true">
<WindowTitle>
<strong>The Title</strong>
</WindowTitle>
<WindowContent>
This is my window <strong>popup</strong> content.
</WindowContent>
<WindowActions>
<WindowAction Name="Minimize"></WindowAction>
<WindowAction Name="Maximize"></WindowAction>
<WindowAction Name="Close"></WindowAction>
</WindowActions>
</TelerikWindow>
The result from the code snippet above
Component namespace and reference
@using Telerik.Blazor.Components
<TelerikWindow Visible="true" Centered="true" @ref="@myWindowRef">
<WindowTitle>
<strong>The Title</strong>
</WindowTitle>
<WindowContent>
This is my window <strong>popup</strong> content.
</WindowContent>
</TelerikWindow>
@code {
Telerik.Blazor.Components.TelerikWindow myWindowRef { get;set; }
}
Show and Close
The Visible property lets you control whether the window component is shown (and rendered).
Bind the visibility of the window
@*Use property binding to control the state of the window programmatically*@
<button @onclick="ShowWindow">Show the Window</button>
<button @onclick="CloseWindow">Close the Window</button>
<TelerikWindow @bind-Visible="@isVisible">
<WindowTitle>
<strong>The Title</strong>
</WindowTitle>
<WindowContent>
This is my window <strong>popup</strong> content.
</WindowContent>
<WindowActions>
<WindowAction Name="Minimize"></WindowAction>
<WindowAction Name="Maximize"></WindowAction>
<WindowAction Name="Close"></WindowAction>
</WindowActions>
</TelerikWindow>
@code {
bool isVisible { get; set; }
public void ShowWindow()
{
isVisible = true;
}
public void CloseWindow()
{
isVisible = false;
}
}
Styling
The Class property lets you define a CSS class that will be rendered on the popup element so you can cascade through it in order to change the appearane of both the content, and the built-in elements of the Window.
Use a Class to change the appearance and style of the Window
<TelerikWindow Class="MyClass" Visible="true">
<WindowTitle>
<strong>The Title</strong>
</WindowTitle>
<WindowContent>
This is my window <strong>popup</strong> content.
</WindowContent>
</TelerikWindow>
<style>
.MyClass { /* targets the entire popup element */
border: 5px solid red;
}
.MyClass .k-window-content { /* targets the content element */
background: yellow;
}
.MyClass .k-window-title { /* targets the title container */
color: blue;
}
.MyClass .k-window-titlebar { /* targets the entire titlebar */
background: gold;
}
</style>
The result from the code snippet above
