Skip to content

Commit 5661677

Browse files
dimodidimodi
committed
kb(window): Revamp Minimize Window KB and create a new example
1 parent 47d5b17 commit 5661677

File tree

3 files changed

+98
-87
lines changed

3 files changed

+98
-87
lines changed

‎knowledge-base/images/window-big-screen.gif‎

-346 KB
Binary file not shown.

‎knowledge-base/images/window-small-screen.gif‎

-419 KB
Binary file not shown.

‎knowledge-base/window-modal-minimize-popup.md‎

Lines changed: 98 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,131 @@
11
---
2-
title: How to minimize a popup window to the bottom of the page?
3-
description: Is there any way to collapse a window to the bottom of a page and how to create a responsive modal that can be minimized?
2+
title: Minimize a Window to the Bottom Right of the Page
3+
description: Learn how to to collapse a Window to the bottom of a page and create a responsive popup that is a chat bubble?
44
type: how-to
5-
page_title: How to minimize a popup window to the bottom of the page?
5+
page_title: How to Minimize a Popup Window to the Bottom Right of the Page
66
slug: window-modal-minimize-popup
7-
position:
8-
tags: window,modal,popup,collapse,minimize
9-
ticketid: 1542823
7+
tags: blazor, window, minimize
8+
ticketid: 1542823, 1676477
109
res_type: kb
1110
---
1211

1312
## Environment
13+
1414
<table>
15-
<tbody>
16-
<tr>
17-
<td>Product</td>
18-
<td>Window for Blazor</td>
19-
</tr>
20-
</tbody>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Window for Blazor</td>
19+
</tr>
20+
</tbody>
2121
</table>
2222

23-
2423
## Description
25-
Is there any way to collapse a window to the bottom of a page? How to create a responsive modal that can be minimized? How to minimize Modal Window as a chat for messages?
26-
27-
## Solution
28-
To implement a responsible popup that can be minimized to the bottom of the page:
2924

30-
1. Set the `Top` and `Left` parameters to control the position of the modal.
31-
2. Use boolean flags to show and hide the popup.
32-
3. Use the [MediaQuery](slug://mediaquery-overview) component to make the modal window responsive.
25+
This KB article answers the following questions:
3326

34-
>caption The result from the code snippet below on a big screen.
27+
* How to minimize the Telerik Window for Blazor to the bottom right?
28+
* How to collapse a Window to the bottom of a page?
29+
* How to create a responsive modal Window that can be minimized?
30+
* How to minimize a modal Window as a chat for messages?
3531

36-
![Blazor Window Big Screen](images/window-big-screen.gif)
32+
## Solution
3733

38-
>caption The result from the code snippet below on a small screen.
34+
### Minimize Window to the Bottom Right
3935

40-
![Blazor Window Small Screen](images/window-small-screen.gif)
36+
To minimize the Window at the bottom-right corner of the viewport:
4137

42-
````Razor
43-
@*Responsive minimizable popup.*@
38+
1. Set a custom CSS class to the Window with the `Class` parameter, for example, `minimized-at-bottom`.
39+
1. Apply the following styles to the `.k-window-minimized.minimized-at-bottom` CSS combinator:
40+
* `top` and `left` must be `auto !important`
41+
* `bottom` and `right` must be zero or an arbitrary some small value
42+
* `transform` must be `none`
4443

45-
<TelerikMediaQuery Media="(max-width: 960px)" OnChange="((changed) => Small = changed)"></TelerikMediaQuery>
44+
````RAZOR
45+
<TelerikButton OnClick="@( () => WindowVisible = !WindowVisible )">Toggle Window</TelerikButton>
4646
47-
<TelerikWindow Class="@myClass" Modal="@isModal"
48-
Top="@TopPosition"
49-
Left="@LeftPosition"
50-
@bind-Visible="@isModalVisible">
47+
<TelerikWindow @bind-Visible="@WindowVisible"
48+
Class="minimized-at-bottom">
49+
<WindowActions>
50+
<WindowAction Name="Minimize" />
51+
<WindowAction Name="Close" />
52+
</WindowActions>
5153
<WindowTitle>
52-
<strong>@Title</strong>
54+
Window Title
5355
</WindowTitle>
5456
<WindowContent>
55-
@if (isModal)
56-
{
57-
@Content
58-
}
57+
Window Content
58+
</WindowContent>
59+
</TelerikWindow>
60+
61+
<style>
62+
.k-window-minimized.minimized-at-bottom {
63+
top: auto !important;
64+
left: auto !important;
65+
bottom: 1em;
66+
right: 1em;
67+
transform: none;
68+
}
69+
</style>
70+
71+
@code {
72+
private bool WindowVisible { get; set; } = true;
73+
}
74+
````
75+
76+
### Create Responsive Chat Window
77+
78+
To configure a responsive popup Window that transforms to a chat bubble on small screens:
79+
80+
1. Use the [MediaQuery component](slug://mediaquery-overview) to make the Window responsive and change its configuration, depending on the browser viewport size.
81+
1. Use custom CSS classes and styles to tweak the Window appearance and make it look like a bubble when minimized.
82+
83+
````RAZOR
84+
<TelerikMediaQuery Media="(max-width: 960px)"
85+
OnChange="@( (bool matches) => IsSmallScreen = matches )" />
86+
87+
<TelerikWindow Class="@WindowClass"
88+
MinWidth="140px"
89+
@bind-State="@WindowState"
90+
ThemeColor="@ThemeConstants.Window.ThemeColor.Primary"
91+
Visible="true">
92+
<WindowTitle>@WindowTitle</WindowTitle>
93+
<WindowContent>
94+
<p>The Window title changes, depending on the browser viewport size.</p>
95+
<p>Reduce the browser width and minimize the Window to minimize it as a chart bubble at the bottom-right.</p>
5996
</WindowContent>
6097
<WindowActions>
61-
<WindowAction Name="MyMinimizer" Hidden="@(!isModal)" Icon="@SvgIcon.WindowMinimize" OnClick="@MyCustomMinimize" />
62-
<WindowAction Name="MyExpander" Hidden="@isModal" Icon="@SvgIcon.Window" OnClick="@MyCustomExpand" />
98+
<WindowAction Name="Minimize" />
6399
</WindowActions>
64100
</TelerikWindow>
65101
66-
@code {
67-
bool isModalVisible { get; set; } = true;
68-
bool isModal { get; set; } = true;
69-
private bool Small { get; set; }
70-
71-
string Title => Small == true && !isModal ? "M" : "My Responsive Popup";
72-
string Content = "---------- Welcome to our Minimized/Collapsed popup! ----------";
73-
string TopPosition => Small == true && !isModal ? "100px" : Top;
74-
string LeftPosition => Small == true && !isModal ? "300px" : Left;
75-
string Top = "40%";
76-
string Left = "40%";
77-
78-
string myClass => Small == true && !isModal ? "minimized" : "";
79-
80-
public void MyCustomMinimize()
81-
{
82-
Top = "90%";
83-
Left = "15%";
84-
isModal = false;
85-
StateHasChanged();
102+
<style>
103+
.k-window-minimized.minimized-at-bottom {
104+
top: auto !important;
105+
left: auto !important;
106+
bottom: 1em;
107+
right: 1em;
108+
transform: none;
86109
}
87110
88-
public void MyCustomExpand()
89-
{
90-
Top = "40%";
91-
Left = "40%";
92-
isModal = true;
93-
StateHasChanged();
111+
.chat-bubble-window {
112+
min-height: auto !important;
113+
padding: var(--kendo-spacing-4);
114+
border-radius: var(--kendo-border-radius-full);
115+
background-color: var(--kendo-color-primary);
116+
color: var(--kendo-color-on-primary);
94117
}
95-
}
118+
</style>
119+
120+
@code {
121+
private string WindowClass => IsSmallScreen && WindowState == WindowState.Minimized ? "minimized-at-bottom chat-bubble-window" : "";
122+
private WindowState WindowState { get; set; } = WindowState.Default;
123+
private string WindowTitle => IsSmallScreen ? "Chat" : "Customer Support Chat";
96124
97-
@if (!isModal)
98-
{
99-
<style>
100-
.k-window-content:last-child {
101-
display: none;
102-
}
103-
104-
.k-window-titlebar {
105-
border-style: none;
106-
}
107-
108-
.minimized {
109-
background-color: #ff6358;
110-
color: white;
111-
display: inline;
112-
padding: 14px;
113-
border-bottom-left-radius: 65%;
114-
border-bottom-right-radius: 65%;
115-
border-top-left-radius: 65%;
116-
border-top-right-radius: 65%;
117-
}
118-
</style>
125+
private bool IsSmallScreen { get; set; }
119126
}
120127
````
128+
129+
## See Also
130+
131+
* [Window Position](slug://components/window/position)

0 commit comments

Comments
 (0)