Access specific toast in Blazor Toast Component
27 Sep 20212 minutes to read
In the toast, the particular toast can be accessed by passing the Key
value in ShowModes
, and the Key
should be unique in ShowModels
. To close the specific toast, you also need to pass the corresponding toast Key
value in the Hide
method. The added Key
value can be got in the toast Opened
and Closed
event.
In the following example, Toast is closed by calling the Hide
method with the key value that is returned in the Opened
event
@using Syncfusion.Blazor.Notifications
<div id="target">
<SfToast @ref="toast" ShowCloseButton="true" Height="150px" Width="200px" Timeout="60" Target="@target" Icon="e-meeting" Title="@title" >
<ToastEvents Opened="OnOpen"></ToastEvents>
</SfToast>
<div class="col-lg-12 col-sm-12 col-md-12 center">
<div id="toastBtnDefault" style="margin: auto;text-align: center">
<button class="e-btn" id="toastBtnShow" @onclick="showOnclick">Show Toasts</button>
<button class="e-btn" id="toastBtnHide" @onclick="hideOnclick">Hide All</button>
<button class="e-btn" id="toastBtnHide" @onclick="HideOnclick">Hide</button>
</div>
</div>
</div>
<style>
#toast_default .e-meeting::before {
content: "\e705";
font-size: 17px;
}
</style>
@code{
SfToast toast;
private string target = "#target";
private string title = "This is Toast Title";
private int key { get; set; } = 0;
private async Task showOnclick()
{
await this.toast.ShowAsync( new ToastModel {Key = key , Content = key.ToString() , Timeout = 10000 });
key++;
}
private async Task OnOpen(ToastOpenArgs args)
{
await this.toast.HideAsync(args.Key);
}
private async Task HideOnclick()
{
await this.toast.HideAsync();
}
private async Task hideOnclick()
{
await this.toast.HideAsync("All");
}
}