Skip to content

Commit 520a6e9

Browse files
author
Yohapuja Selvakumaran
committed
Bug(BLAZ-124241): Corrected the dialog docs
1 parent 0da8bbe commit 520a6e9

File tree

1 file changed

+121
-142
lines changed

1 file changed

+121
-142
lines changed

‎blazor/dialog/how-to/add-minimize-and-maximize-button.md

Lines changed: 121 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -21,93 +21,90 @@ Blazor Dialog allows end users to either minimize or maximize the Dialog compone
2121

2222
<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
2323

24-
<SfDialog @ref="@DialogObj" Width="50%" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible" CssClass="@dialogClass">
25-
<DialogTemplates>
26-
<Header>
27-
Dialog
28-
@if (!IsMaximized)
29-
{
30-
<span class="e-icons sf-icon-Maximize" id="max-btn" title="Maximize" @onclick="@maximize"></span>
31-
}
32-
else
33-
{
34-
<span class="e-icons sf-icon-Restore" id="max-btn" title="Maximize" @onclick="@maximize"></span>
35-
}
36-
37-
@if (!IsMinimized)
38-
{
39-
<span class="e-icons sf-icon-Minimize" id="min-btn" title="Minimize" @onclick="@minimize"></span>
40-
}
41-
else
42-
{
43-
<span class="e-icons sf-icon-Restore" id="min-btn" title="Minimize" @onclick="@minimize"></span>
44-
}
45-
46-
</Header>
47-
<Content>
48-
<p>This is a dialog with minimize and maximize buttons</p>
49-
</Content>
50-
</DialogTemplates>
51-
<DialogButtons>
52-
<DialogButton Content="Ok" IsPrimary="true" OnClick="@CloseDialog" />
53-
<DialogButton Content="Cancel" OnClick="@CloseDialog" />
54-
</DialogButtons>
55-
<DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>
56-
</SfDialog>
57-
58-
<style>
59-
.e-dialog .e-dlg-header {
24+
<SfDialog @ref="@DialogObj" Width="50%" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible" CssClass="@dialogClass">
25+
<DialogTemplates>
26+
<Header>
27+
Dialog
28+
@if (!IsMaximized)
29+
{
30+
<span class="e-icons sf-icon-Maximize" title="Maximize" @onclick="@maximize"></span>
31+
}
32+
else
33+
{
34+
<span class="e-icons sf-icon-Restore" title="Restore" @onclick="@maximize"></span>
35+
}
36+
@if (!IsMinimized)
37+
{
38+
<span class="e-icons sf-icon-Minimize" title="Minimize" @onclick="@minimize"></span>
39+
}
40+
else
41+
{
42+
<span class="e-icons sf-icon-Restore" title="Restore" @onclick="@minimize"></span>
43+
}
44+
</Header>
45+
<Content>
46+
<p>This is a dialog with minimize and maximize buttons</p>
47+
</Content>
48+
</DialogTemplates>
49+
<DialogButtons>
50+
<DialogButton Content="Ok" IsPrimary="true" OnClick="@CloseDialog" />
51+
<DialogButton Content="Cancel" OnClick="@CloseDialog" />
52+
</DialogButtons>
53+
</SfDialog>
54+
55+
<style>
56+
.e-dialog .e-dlg-header {
6057
width: auto;
61-
}
62-
63-
.e-dialog .e-dlg-header .e-icons.sf-icon-Maximize::before,
64-
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize::before,
65-
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore::before {
66-
position: relative;
67-
}
68-
69-
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
70-
.e-dialog .e-dlg-header .e-icons.sf-icon-Maximize,
71-
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
72-
font-size: 12px;
73-
width: 30px;
74-
height: 30px;
75-
line-height: 16px;
76-
float: right;
77-
position: relative;
78-
text-align: center;
79-
cursor: pointer;
80-
color: grey;
81-
}
58+
}
59+
60+
.e-dialog .e-dlg-header .e-icons.sf-icon-Maximize::before,
61+
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize::before,
62+
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore::before {
63+
position: relative;
64+
}
65+
66+
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
67+
.e-dialog .e-dlg-header .e-icons.sf-icon-Maximize,
68+
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
69+
font-size: 12px;
70+
width: 30px;
71+
height: 30px;
72+
line-height: 16px;
73+
float: right;
74+
position: relative;
75+
text-align: center;
76+
cursor: pointer;
77+
color: grey;
78+
}
8279

83-
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize:hover, .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize:hover,
84-
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore:hover {
85-
/* background-color: #e0e0e0;
86-
border-color: transparent;
87-
box-shadow: 0 0 0 transparent;
88-
border-radius: 50%;*/
89-
color: black;
90-
}
80+
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize:hover, .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize:hover,
81+
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore:hover {
82+
/* background-color: #e0e0e0;
83+
border-color: transparent;
84+
box-shadow: 0 0 0 transparent;
85+
border-radius: 50%;*/
86+
color: black;
87+
}
9188

92-
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
93-
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
94-
padding-left: 5px;
95-
padding-right: 5px;
96-
}
89+
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
90+
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
91+
padding-left: 5px;
92+
padding-right: 5px;
93+
}
9794

98-
.e-dialog .e-dlg-header {
99-
position: relative;
100-
top: 1px;
101-
}
95+
.e-dialog .e-dlg-header {
96+
position: relative;
97+
top: 1px;
98+
}
10299

103-
.e-dialog .e-dlg-content.hide-content, .e-dialog .e-footer-content.hide-content {
104-
display: none;
105-
}
100+
.e-dialog .e-dlg-content.hide-content, .e-dialog .e-footer-content.hide-content {
101+
display: none;
102+
}
106103

107-
.e-dialog .e-dlg-header span.title {
108-
width: 60px;
109-
display: inline-block;
110-
}
104+
.e-dialog .e-dlg-header span.title {
105+
width: 60px;
106+
display: inline-block;
107+
}
111108

112109

113110

@@ -151,76 +148,58 @@ Blazor Dialog allows end users to either minimize or maximize the Dialog compone
151148
.e-dialog.hide-content .e-dlg-content, .e-dialog.hide-content .e-footer-content {
152149
display: none;
153150
}
154-
</style>
155-
156-
@code {
157-
public bool IsMaximized { get; set; } = false;
158-
public bool IsMinimized { get; set; } = false;
159-
[Inject]
160-
IJSRuntime JsRuntime { get; set; }
161-
SfDialog DialogObj;
162-
private bool IsVisible { get; set; } = false;
163-
private string Xvalue = "center";
164-
private string Yvalue = "center";
165-
public string dialogClass = "";
166-
private void OpenDialog()
167-
{
168-
this.IsVisible = true;
169-
}
170-
private void CloseDialog()
151+
</style>
152+
153+
@code {
154+
public bool IsMaximized { get; set; } = false;
155+
public bool IsMinimized { get; set; } = false;
156+
private SfDialog DialogObj;
157+
private bool IsVisible { get; set; } = false;
158+
public string dialogClass = "";
159+
160+
private void OpenDialog() => IsVisible = true;
161+
private void CloseDialog() => IsVisible = false;
162+
163+
private async Task maximize()
164+
{
165+
IsMaximized = !IsMaximized;
166+
if (IsMaximized)
171167
{
172-
this.IsVisible = false;
168+
await JsRuntime.InvokeVoidAsync("Dialog.maximize");
173169
}
174-
private void maximize()
175-
{
176-
if (this.IsMaximized)
177-
{
178-
this.DialogObj.ShowAsync(false);
179-
this.IsMaximized = false;
180-
}
181-
else
182-
{
183-
this.DialogObj.ShowAsync(true);
184-
this.IsMaximized = true;
185-
}
186-
}
187-
private void minimize()
170+
171+
}
172+
173+
private async Task minimize()
174+
{
175+
IsMinimized = !IsMinimized;
176+
if (IsMinimized)
188177
{
189-
if (this.IsMinimized)
190-
{
191-
this.Xvalue = "center";
192-
this.Yvalue = "center";
193-
this.dialogClass = "";
194-
this.IsMinimized = false;
195-
}
196-
else
197-
{
198-
if (this.IsMaximized)
199-
{
200-
JsRuntime.InvokeAsync<string>("Dialog.minimize");
201-
this.IsMaximized = false;
202-
}
203-
this.Xvalue = "center";
204-
this.Yvalue = "bottom";
205-
this.dialogClass = "hide-content";
206-
this.IsMinimized = true;
207-
}
178+
await JsRuntime.InvokeVoidAsync("Dialog.minimize");
208179
}
209180
}
181+
}
210182

211-
{% endhighlight %}
212183

184+
{% endhighlight %}
213185
{% highlight cshtml tabtitle="Host.cshtml" hl_lines="4" %}
214186

215-
<script>
216-
window.Dialog = {
217-
minimize: function () {
218-
var maximizeIcon;
219-
var dialogElem = document.querySelector('.e-dialog');
220-
dialogElem.classList.remove('e-dlg-fullscreen');
221-
}
222-
}
223-
</script>
187+
<script>
188+
window.Dialog = {
189+
minimize: function () {
190+
var dialogElem = document.querySelector('.e-dialog');
191+
if (dialogElem) {
192+
dialogElem.classList.remove('e-dlg-fullscreen');
193+
}
194+
},
195+
maximize: function () {
196+
var dialogElem = document.querySelector('.e-dialog');
197+
if (dialogElem) {
198+
dialogElem.classList.add('e-dlg-fullscreen');
199+
}
200+
}
201+
}
202+
</script>
224203

225204
{% endhighlight %}
226205
{% endtabs %}

0 commit comments

Comments
 (0)