Skip to content

Commit 695dac6

Browse files
Ashwini-SF5049Ashwini-SF5049
committed
983104: Updated
1 parent a47e37e commit 695dac6

17 files changed

+697
-731
lines changed

‎blazor/toast/action-buttons.md‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,27 @@ documentation: ug
99

1010
# Action Buttons in Blazor Toast Component
1111

12-
Add action buttons to the Toast component by defining the ToastButtons collection with one or more ToastButton items. Each button can include its own OnClick callback to perform actions such as dismissing the toast or triggering custom logic.
12+
Add action buttons to the Blazor Toast component by defining the **ToastButtons** collection with one or more **ToastButton** items. Each button can include its own **OnClick** callback to perform actions such as dismissing the toast or triggering custom logic.
1313

14-
In the following example, toast buttons are configured using the ToastButtons collection, and both buttons invoke an OnClick handler to hide the toast.
14+
For more details, see:
15+
- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/
16+
- Toast events: https://blazor.syncfusion.com/documentation/toast/events/
1517

1618
```cshtml
17-
1819
@using Syncfusion.Blazor.Buttons
1920
@using Syncfusion.Blazor.Notifications
2021
2122
<SfToast @ref="ToastObj" Title="Anjolie Stokes" Width="280" Height="120" Icon="e-laura" Content="@ToastContent">
2223
<ToastPosition X="Right" Y="Bottom"></ToastPosition>
2324
<ToastButtons>
24-
<ToastButton Content = "Ignore" OnClick="@HideToast"></ToastButton>
25-
<ToastButton Content = "reply" OnClick="@HideToast"></ToastButton>
25+
<ToastButton Content="Ignore" OnClick="@(args => HideToast())"></ToastButton>
26+
<ToastButton Content="Reply" OnClick="@(args => HideToast())"></ToastButton>
2627
</ToastButtons>
2728
</SfToast>
2829
2930
<div class="col-lg-12 col-sm-12 col-md-12 center">
3031
<div id="toastBtnDefault" style="margin: auto; text-align: center">
31-
<SfButton @onclick="@ShowToast"> Show Toast </SfButton>
32+
<SfButton OnClick="@(args => ShowToast())">Show Toast</SfButton>
3233
</div>
3334
</div>
3435
@@ -42,32 +43,27 @@ In the following example, toast buttons are configured using the ToastButtons co
4243
margin: 0 10px 0 0;
4344
width: 60px;
4445
}
45-
46-
#elementToastTime .e-toast-message {
47-
padding: 10px;
48-
}
4946
</style>
5047
5148
@code {
52-
SfToast ToastObj;
49+
private SfToast ToastObj;
5350
5451
private string ToastContent { get; set; } = "Thanks for the update!";
5552
5653
private async Task ShowToast()
5754
{
58-
await this.ToastObj.ShowAsync();
55+
await ToastObj.ShowAsync();
5956
}
6057
6158
private async Task HideToast()
6259
{
63-
await this.ToastObj.HideAsync();
60+
await ToastObj.HideAsync();
6461
}
6562
}
66-
6763
```
6864

6965
![Blazor Toast with Action button](./images/blazor-toast-action-button.png)
7066

7167
## See Also
7268

73-
* [Configuring options](./config)
69+
- [Configuring options](./config)

‎blazor/toast/animation.md‎

Lines changed: 55 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,22 @@ documentation: ug
99

1010
# Animation in Blazor Toast Component
1111

12-
The Blazor Toast component supports configurable animations for both showing and hiding notifications through ToastAnimationSettings, which contains ToastShowAnimationSettings and ToastHideAnimationSettings. Animation effects are selected from the ToastEffect enum. By default, the toast uses FadeIn for showing and FadeOut for hiding.
12+
The Blazor Toast component supports configurable animations for both showing and hiding notifications through **ToastAnimationSettings**, which contains **ToastShowAnimationSettings** and **ToastHideAnimationSettings**. Animation effects are selected from the **ToastEffect** enum. By default, the toast uses FadeIn for showing and FadeOut for hiding.
13+
14+
For more details, see:
15+
- Blazor Toast overview: https://blazor.syncfusion.com/documentation/toast/
16+
- Toast events: https://blazor.syncfusion.com/documentation/toast/events/
17+
- SfToast API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.SfToast.html
18+
- ToastEffect enum: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Notifications.ToastEffect.html
1319

1420
The following example demonstrates several animation effects that can be applied to the Toast component.
1521

1622
```cshtml
17-
1823
@using Syncfusion.Blazor.Buttons
1924
@using Syncfusion.Blazor.DropDowns
2025
@using Syncfusion.Blazor.Notifications
2126
22-
<SfToast @ref="ToastObj" Title="Matt sent you a friend request" Content="@ToastContent">
27+
<SfToast @ref="ToastObj" Title="Notification" Content="@ToastContent">
2328
<ToastPosition X="Right" Y="Bottom"></ToastPosition>
2429
<ToastAnimationSettings>
2530
<ToastShowAnimationSettings Effect="@ShowAnimation"></ToastShowAnimationSettings>
@@ -31,82 +36,68 @@ The following example demonstrates several animation effects that can be applied
3136
<div id="toastBtnDefault" style="margin: auto; text-align: center">
3237
<div id="textbox-contain">
3338
<div>
34-
<label> Show Animation </label>
39+
<label>Show Animation</label>
3540
</div>
36-
<SfDropDownList Placeholder="Select a animate type" DataSource="@Effects" TValue="string" TItem="DropDownFields">
41+
<SfDropDownList Placeholder="Select an animation type"
42+
DataSource="@Effects"
43+
TValue="string"
44+
TItem="DropDownFields">
3745
<DropDownListEvents ValueChange="@ShowAnimationChange" TValue="string"></DropDownListEvents>
3846
<DropDownListFieldSettings Text="text" Value="id"></DropDownListFieldSettings>
3947
</SfDropDownList>
4048
41-
<div>
42-
<label> Hide Animation </label>
49+
<div style="margin-top:10px">
50+
<label>Hide Animation</label>
4351
</div>
44-
<SfDropDownList Placeholder="Select a animate type" DataSource="@Effects" TValue="string" TItem="DropDownFields">
52+
<SfDropDownList Placeholder="Select an animation type"
53+
DataSource="@Effects"
54+
TValue="string"
55+
TItem="DropDownFields">
4556
<DropDownListEvents ValueChange="@HideAnimationChange" TValue="string"></DropDownListEvents>
4657
<DropDownListFieldSettings Text="text" Value="id"></DropDownListFieldSettings>
4758
</SfDropDownList>
4859
</div>
49-
<SfButton @onclick="@ShowToast"> Show Toast </SfButton>
60+
61+
<div style="margin-top:12px">
62+
<SfButton OnClick="@ShowToast">Show Toast</SfButton>
63+
</div>
5064
</div>
5165
</div>
5266
53-
<style>
54-
#elementToastTime .e-toast-message {
55-
padding: 10px;
56-
text-align: center;
57-
}
58-
59-
#textbox-contain {
60-
text-align: initial;
61-
display: inline-block;
62-
width: 20%;
63-
margin: 0 auto;
64-
}
65-
66-
.top-row.px-4 {
67-
display: none;
68-
}
69-
70-
.content.px-4 {
71-
margin-top: 103px;
72-
margin-left: -12%;
73-
}
74-
</style>
75-
7667
@code {
77-
SfToast ToastObj;
68+
private SfToast ToastObj;
7869
7970
private ToastEffect ShowAnimation = ToastEffect.FadeIn;
8071
private ToastEffect HideAnimation = ToastEffect.FadeOut;
81-
private string ToastContent = "You have a new friend request yet to accept";
72+
private string ToastContent = "A new friend request is pending.";
8273
8374
public class DropDownFields
8475
{
85-
public string id { get; set; }
86-
public string text { get; set; }
76+
public string id { get; set; } = string.Empty;
77+
public string text { get; set; } = string.Empty;
8778
}
8879
89-
private List<DropDownFields> Effects = new List<DropDownFields>()
90-
{
91-
new DropDownFields(){ id= "FadeIn", text= "Fade In" },
92-
new DropDownFields(){ id= "FadeZoomIn", text= "Fade Zoom In" },
93-
new DropDownFields(){ id= "FadeZoomOut", text= "Fade Zoom Out" },
94-
new DropDownFields(){ id= "FlipLeftDownIn", text= "Flip Left Down In" },
95-
new DropDownFields(){ id= "FlipLeftDownOut", text= "Flip Left Down Out" },
96-
new DropDownFields(){ id= "FlipLeftUpIn", text= "Flip Left Up In" },
97-
new DropDownFields(){ id= "FlipRightDownIn", text= "Flip Right Up In" },
98-
new DropDownFields(){ id= "FlipRightDownOut", text= "Flip Right Down Out" },
99-
new DropDownFields(){ id= "FlipRightUpIn", text= "Flip Right Up In" },
100-
new DropDownFields(){ id= "FlipRightUpOut", text= "Flip Right Up Out" },
101-
new DropDownFields(){ id= "SlideBottomIn", text= "Slide Bottom In" },
102-
new DropDownFields(){ id= "SlideBottomOut", text= "Slide Bottom Out" },
103-
new DropDownFields(){ id= "SlideLeftIn", text= "Slide Left In" },
104-
new DropDownFields(){ id= "SlideLeftOut", text= "Slide Left Out" },
105-
new DropDownFields(){ id= "SlideRightIn", text= "Slide Right In" },
106-
new DropDownFields(){ id= "SlideRightOut", text= "Slide Right Out" },
107-
new DropDownFields(){ id= "SlideTopIn", text= "Slide Top In" },
108-
new DropDownFields(){ id= "ZoomIn", text= "Zoom In" },
109-
new DropDownFields(){ id= "ZoomOut", text= "Zoom Out" }
80+
private List<DropDownFields> Effects = new List<DropDownFields>
81+
{
82+
new DropDownFields { id = "FadeIn", text = "Fade In" },
83+
new DropDownFields { id = "FadeZoomIn", text = "Fade Zoom In" },
84+
new DropDownFields { id = "FadeZoomOut", text = "Fade Zoom Out" },
85+
new DropDownFields { id = "FlipLeftDownIn", text = "Flip Left Down In" },
86+
new DropDownFields { id = "FlipLeftDownOut", text = "Flip Left Down Out" },
87+
new DropDownFields { id = "FlipLeftUpIn", text = "Flip Left Up In" },
88+
new DropDownFields { id = "FlipRightDownIn", text = "Flip Right Down In" },
89+
new DropDownFields { id = "FlipRightDownOut", text = "Flip Right Down Out" },
90+
new DropDownFields { id = "FlipRightUpIn", text = "Flip Right Up In" },
91+
new DropDownFields { id = "FlipRightUpOut", text = "Flip Right Up Out" },
92+
new DropDownFields { id = "SlideBottomIn", text = "Slide Bottom In" },
93+
new DropDownFields { id = "SlideBottomOut", text = "Slide Bottom Out" },
94+
new DropDownFields { id = "SlideLeftIn", text = "Slide Left In" },
95+
new DropDownFields { id = "SlideLeftOut", text = "Slide Left Out" },
96+
new DropDownFields { id = "SlideRightIn", text = "Slide Right In" },
97+
new DropDownFields { id = "SlideRightOut", text = "Slide Right Out" },
98+
new DropDownFields { id = "SlideTopIn", text = "Slide Top In" },
99+
new DropDownFields { id = "ZoomIn", text = "Zoom In" },
100+
new DropDownFields { id = "ZoomOut", text = "Zoom Out" }
110101
};
111102
112103
private async Task ShowToast()
@@ -116,15 +107,18 @@ The following example demonstrates several animation effects that can be applied
116107
117108
private void ShowAnimationChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
118109
{
119-
this.ShowAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value);
110+
ShowAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value);
120111
StateHasChanged();
121112
}
122113
123114
private void HideAnimationChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
124115
{
125-
this.HideAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value);
116+
HideAnimation = (ToastEffect)System.Enum.Parse(typeof(ToastEffect), args.Value);
126117
StateHasChanged();
127118
}
128119
}
129-
130-
```
120+
```
121+
Preview of the code snippet:
122+
- Selecting animation types in the dropdowns configures the show and hide effects for the toast.
123+
- Clicking Show Toast displays a toast at the bottom-right using the selected show animation; when dismissed, the selected hide animation is applied.
124+
- Defaults are Fade In for showing and Fade Out for hiding.

0 commit comments

Comments
 (0)