Skip to content

Commit 447e76a

Browse files
marin-bratanovmarin-bratanov
committed
chore(window): updates for 2.0.0
1 parent 12d9d99 commit 447e76a

File tree

4 files changed

+122
-57
lines changed

4 files changed

+122
-57
lines changed

‎components/window/overview.md‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -68,70 +68,83 @@ The `Visible` property lets you control whether the window component is shown (a
6868
>caption Bind the visibility of the window
6969
7070
````CSHTML
71-
Use property binding to control the state of the window programmatically
71+
@*Use property binding to control the state of the window programmatically*@
7272
7373
<button @onclick="ShowWindow">Show the Window</button>
7474
<button @onclick="CloseWindow">Close the Window</button>
7575
76-
<TelerikWindow Visible="@isVisible" Centered="true">
77-
<WindowTitle>
78-
<strong>The Title</strong>
79-
</WindowTitle>
80-
<WindowContent>
81-
This is my window <strong>popup</strong> content.
82-
</WindowContent>
76+
<TelerikWindow @bind-Visible="@isVisible">
77+
<WindowTitle>
78+
<strong>The Title</strong>
79+
</WindowTitle>
80+
<WindowContent>
81+
This is my window <strong>popup</strong> content.
82+
</WindowContent>
83+
<WindowActions>
84+
<WindowAction Name="Minimize"></WindowAction>
85+
<WindowAction Name="Maximize"></WindowAction>
86+
<WindowAction Name="Close"></WindowAction>
87+
</WindowActions>
8388
</TelerikWindow>
8489
8590
@code {
8691
bool isVisible { get; set; }
87-
88-
public void ShowWindow()
89-
{
90-
isVisible = true;
91-
}
9292
93-
public void CloseWindow()
94-
{
95-
isVisible = false;
96-
}
93+
public void ShowWindow()
94+
{
95+
isVisible = true;
96+
}
97+
98+
public void CloseWindow()
99+
{
100+
isVisible = false;
101+
}
97102
}
98103
````
99104

100-
>caption React to the visibility change event
105+
The `Visible` parameter also exposes an event - `VisibleChanged`. You can use it to get notifications when the user tries to close the window. You can effectively cancel the event by not propagating the new visibility state to the variable the `Visible` property is bound to.
106+
107+
>caption React to the user closing the window
101108
102109
````CSHTML
103110
@result
104111
105-
<button @onclick="ToggleWindow">Toggle the Window</button>
112+
<button @onclick="ToggleWindow">Toggle the Window</button>
106113
107-
<TelerikWindow Visible="@isVisible" VisibleChanged="@VisibleChangedHandler" Centered="true">
114+
<TelerikWindow Visible="@isVisible" VisibleChanged="@VisibleChangedHandler">
108115
<WindowTitle>
109116
<strong>The Title</strong>
110117
</WindowTitle>
111118
<WindowContent>
112119
This is my window <strong>popup</strong> content.
113120
</WindowContent>
114-
<WindowActions>
115-
<WindowAction Name="Close" />
116-
</WindowActions>
117-
</TelerikWindow>
121+
<WindowActions>
122+
<WindowAction Name="Close" />
123+
</WindowActions>
124+
</TelerikWindow>
118125
119126
@code {
120127
bool isVisible { get; set; }
121-
string result { get; set; }
128+
string result { get; set; }
122129
123-
void VisibleChangedHandler()
130+
void VisibleChangedHandler(bool currVisible)
124131
{
132+
isVisible = currVisible; // if you don't do this, the window won't close because of the user action
133+
125134
result = $"the window is now visible: {isVisible}";
126135
}
127-
136+
128137
public void ToggleWindow()
129138
{
130139
isVisible = !isVisible;
140+
141+
result = $"the window is now visible: {isVisible}";
131142
}
132143
}
133144
````
134145

146+
>tip You may also find useful handling the `StateChanged` event - it provides similar functionality for the minimized/maximized/standard state of the window.
147+
135148
## Styling
136149

137150
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.

‎components/window/position.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ The `Centered` property adds a CSS class that sets the window position to `top:
3232

3333
If the `Top` and/or `Left` properties are set, they will take precedence, because they render as rules in an inline `style` attribute.
3434

35+
>tip The `Centered` parameter is `true` by default.
36+
3537
>caption Center the Window
3638
3739
````CSHTML

‎components/window/size.md‎

Lines changed: 77 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ position: 1
1010

1111
# Window Size
1212

13-
The Window offers two ways for you to control its size:
13+
The Window offers three ways for you to control its size:
1414

1515
* the `Width` and `Height` properties (read more in the [Dimensions]({%slug common-features/dimensions%}) article)
1616
* predefined dimensions through the `Size` property
17+
* binding to its [State](#maximize-and-minimize) to control whether it is minimized, maximized or has the default appearance.
1718

1819
>caption Set Width and Height to a Window
1920
@@ -57,45 +58,93 @@ The `Telerik.Blazor.WindowSize` enum provides the following options:
5758

5859
The user can maximize and minimize the Window through [action buttons in its titlebar]({%slug components/window/actions%}).
5960

60-
The developer can invoke those actions through binding its `Maximized` and `Minimized` properties.
61+
The developer can invoke those actions through binding the `State` parameter. It takes a member of the `Telerik.Blazor.WindowState` enum:
62+
* `Default` - the size and position as defined by the `Top`, `Left`, `Centered`, `Width`, `Height`, `Size` parameters.
63+
* `Minimized` - the window is just a narrow titlebar and does not render its content.
64+
* `Maximized` - the window takes up the entire viewport.
6165

6266
>caption Maximize, Minimze and Restore the Window programmatically
6367
6468
````CSHTML
65-
When both Maxmized and Minimized are set to false, the default state is restored
69+
@* The user actions also change the state when two-way binding is used *@
70+
71+
<select @bind=@State>
72+
<option [email protected]>Default</option>
73+
<option [email protected]>Minimized</option>
74+
<option [email protected]>Maximized</option>
75+
</select>
76+
77+
<TelerikWindow @bind-State="@State" Width="500px" Height="300px" Visible="true"
78+
Top="500px" Left="600px">
79+
<WindowTitle>
80+
<strong>Lorem ipsum</strong>
81+
</WindowTitle>
82+
<WindowActions>
83+
<WindowAction Name="Minimize"></WindowAction>
84+
<WindowAction Name="Maximize"></WindowAction>
85+
<WindowAction Name="Close"></WindowAction>
86+
</WindowActions>
87+
<WindowContent>
88+
<select @bind=@State>
89+
<option [email protected]>Default</option>
90+
<option [email protected]>Minimized</option>
91+
<option [email protected]>Maximized</option>
92+
</select>
93+
</WindowContent>
94+
</TelerikWindow>
6695
67-
<button @onclick="MaximizeWindow">Change Maximize state of the Window</button>
68-
<button @onclick="MinimizeWindow">Change Minimize state of the Window</button>
96+
@code {
97+
public WindowState State { get; set; } = WindowState.Default;
98+
}
99+
````
69100

70-
<TelerikWindow Maximized="@isMaximized" Minimized="@isMinimized" Visible="true">
71-
<WindowTitle>
72-
<strong>The Title</strong>
73-
</WindowTitle>
74-
<WindowContent>
75-
<button @onclick="MaximizeWindow">Change Maximize state of the Window</button>
76-
<button @onclick="MinimizeWindow">Change Minimize state of the Window</button>
77-
</WindowContent>
101+
The `State` parameter also exposes an event - `StateChanged`. You can use it to get notifications when the user tries to minimize, maximize or restore the window. You can effectively cancel the event by not propagating the new state to the variable the `State` property is bound to.
102+
103+
>caption React to the user actions to minimize, restore or maximize the window
104+
105+
````CSHTML
106+
@lastUserAction
107+
108+
<select @bind=@State>
109+
<option [email protected]>Default</option>
110+
<option [email protected]>Minimized</option>
111+
<option [email protected]>Maximized</option>
112+
</select>
113+
114+
<TelerikWindow State="@State" StateChanged="@StateChangedHandler" Width="500px" Height="300px" Visible="true"
115+
Top="500px" Left="600px">
116+
<WindowTitle>
117+
<strong>Lorem ipsum</strong>
118+
</WindowTitle>
119+
<WindowActions>
120+
<WindowAction Name="Minimize"></WindowAction>
121+
<WindowAction Name="Maximize"></WindowAction>
122+
<WindowAction Name="Close"></WindowAction>
123+
</WindowActions>
124+
<WindowContent>
125+
<select @bind=@State>
126+
<option [email protected]>Default</option>
127+
<option [email protected]>Minimized</option>
128+
<option [email protected]>Maximized</option>
129+
</select>
130+
</WindowContent>
78131
</TelerikWindow>
79132
80133
@code {
81-
bool isMaximized { get; set; }
82-
bool isMinimized { get; set; }
83-
84-
public void MaximizeWindow()
85-
{
86-
isMinimized = false;
87-
isMaximized = !isMaximized;
88-
}
89-
90-
public void MinimizeWindow()
91-
{
92-
isMaximized = false;
93-
isMinimized = !isMinimized;
94-
}
134+
public WindowState State { get; set; } = WindowState.Default;
135+
136+
string lastUserAction;
137+
138+
private void StateChangedHandler(WindowState windowState)
139+
{
140+
State = windowState; // if you don't do this, the window won't change because of the user action
141+
142+
lastUserAction = $"last user action was: {windowState}";
143+
}
95144
}
96145
````
97146

98-
147+
>tip You may also find useful handling the `VisibleChanged` event - it provides similar functionality for the shown/closed state of the window.
99148
100149
## See Also
101150

‎upgrade/breaking-changes/2-0-0.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,10 @@ This is a list of the components that had methods removed and the new approach o
100100

101101
### Window
102102

103-
* The `Open()`, `Close()`, `Minimize()`, `Maximize()`, `Restore()` methods are removed in favor of parameter binding.
103+
* The `Open()`, `Close()`, `Minimize()`, `Maximize()`, `Restore()` methods are removed in favor of parameter binding - for the `Visible` parameter and the new `State` parameter.
104+
* The `Minimized` and `Maximized` parameters are removed in favor of the `State` parameter.
104105
* The `AddAction()`, `RemoveAction()` methods are removed in favor of conditional markup.
105-
* The window renders at the root of the app and not in place. Thus, its position is relative to the root and maximizing fills it up, instead of the closest parent with special positioning.
106+
* The window renders at the root of the app and not in place. Thus, its position is relative to the root and maximizing fills it up, instead of the closest parent with special positioning. This also applies to the `Top` and `Left` offsets - they are now relative to the app root as well.
106107

107108
## Renamed Tags
108109

0 commit comments

Comments
 (0)