Skip to content

Commit ef38b0e

Browse files
author
Yohapuja Selvakumaran
committed
Bug(BLAZ-124241): Corrected the dialog docs
1 parent 9f46d40 commit ef38b0e

File tree

1 file changed

+108
-126
lines changed

1 file changed

+108
-126
lines changed

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

Lines changed: 108 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -21,50 +21,49 @@ 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+
37+
@if (!IsMinimized)
38+
{
39+
<span class="e-icons sf-icon-Minimize" title="Minimize" @onclick="@minimize"></span>
40+
}
41+
else
42+
{
43+
<span class="e-icons sf-icon-Restore" title="Restore" @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+
</SfDialog>
56+
57+
<style>
58+
.e-dialog .e-dlg-header {
6059
width: auto;
61-
}
60+
}
6261

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-
}
62+
.e-dialog .e-dlg-header .e-icons.sf-icon-Maximize::before,
63+
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize::before,
64+
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore::before {
65+
position: relative;
66+
}
6867

6968
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
7069
.e-dialog .e-dlg-header .e-icons.sf-icon-Maximize,
@@ -80,34 +79,34 @@ Blazor Dialog allows end users to either minimize or maximize the Dialog compone
8079
color: grey;
8180
}
8281

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-
}
82+
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize:hover, .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize:hover,
83+
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore:hover {
84+
/* background-color: #e0e0e0;
85+
border-color: transparent;
86+
box-shadow: 0 0 0 transparent;
87+
border-radius: 50%;*/
88+
color: black;
89+
}
9190

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-
}
91+
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
92+
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
93+
padding-left: 5px;
94+
padding-right: 5px;
95+
}
9796

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

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

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

112111

113112

@@ -151,76 +150,59 @@ Blazor Dialog allows end users to either minimize or maximize the Dialog compone
151150
.e-dialog.hide-content .e-dlg-content, .e-dialog.hide-content .e-footer-content {
152151
display: none;
153152
}
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()
171-
{
172-
this.IsVisible = false;
173-
}
174-
private void maximize()
153+
</style>
154+
155+
@code {
156+
public bool IsMaximized { get; set; } = false;
157+
public bool IsMinimized { get; set; } = false;
158+
private SfDialog DialogObj;
159+
private bool IsVisible { get; set; } = false;
160+
public string dialogClass = "";
161+
162+
private void OpenDialog() => IsVisible = true;
163+
private void CloseDialog() => IsVisible = false;
164+
165+
private async Task maximize()
166+
{
167+
IsMaximized = !IsMaximized;
168+
if (IsMaximized)
175169
{
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-
}
170+
await JsRuntime.InvokeVoidAsync("Dialog.maximize");
186171
}
187-
private void minimize()
172+
173+
}
174+
175+
private async Task minimize()
176+
{
177+
IsMinimized = !IsMinimized;
178+
if (IsMinimized)
188179
{
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-
}
180+
await JsRuntime.InvokeVoidAsync("Dialog.minimize");
208181
}
209182
}
183+
}
184+
210185

211186
{% endhighlight %}
212187

213188
{% highlight cshtml tabtitle="Host.cshtml" hl_lines="4" %}
214189

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>
190+
<script>
191+
window.Dialog = {
192+
minimize: function () {
193+
var dialogElem = document.querySelector('.e-dialog');
194+
if (dialogElem) {
195+
dialogElem.classList.remove('e-dlg-fullscreen');
196+
}
197+
},
198+
maximize: function () {
199+
var dialogElem = document.querySelector('.e-dialog');
200+
if (dialogElem) {
201+
dialogElem.classList.add('e-dlg-fullscreen');
202+
}
203+
}
204+
}
205+
</script>
224206

225207
{% endhighlight %}
226208
{% endtabs %}

0 commit comments

Comments
 (0)