Search results

Time out

The toast can be expired based on the TimeOut property. The toast can live till the time out reaches without user interaction, a time out value is considered as a millisecond.

  • The TimeOut delay can be visually represented using Progress Bar.

  • The ExtendedTimeOut property determines how long the toast should be displayed after a user hovers over it.

You can terminate the process by using the showCloseButton property for destroying the toast at any time.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Buttons
@using Syncfusion.EJ2.Blazor.Notifications
@using Syncfusion.EJ2.Blazor.Inputs

<div class="control-section toast-default-section">
    <EjsToast @ref="ToastObj" TimeOut="@ToastTimeOut" Title="Anjolie Stokes" Width="230" Height="250" Content="@ToastContent" >
        <ToastPosition X="Right" Y="Bottom"></ToastPosition>
        <ToastButtonModelProps>
            <ToastButtonModelProp Model="@IgnoreBtnObj" Clicked="@OnIgnore"></ToastButtonModelProp>
            <ToastButtonModelProp Model="@ReplyBtnObj"></ToastButtonModelProp>
        </ToastButtonModelProps>
    </EjsToast>
    <div class="col-lg-12 col-sm-12 col-md-12 center">
        <div id="toastBtnDefault" style="margin: auto; text-align: center">
            <div id="textbox-contain" style="text-align: initial; display: inline-block;">
                <EjsTextBox @ref="TextBoxObj" FloatLabelType="FloatLabelType.Auto" Value="@TextBoxVal" Placeholder="Enter timeOut" ValueChange="@OnValChange"></EjsTextBox>
            </div>
            <EjsButton @onclick="@ShowOnClick"> Show Toast </EjsButton>
        </div>
    </div>
    <br /><br />
    <div id='result'></div>
</div>

<style>
    #elementToastTime .e-toast-message {
        padding: 10px;
        text-align: center;
    }

    #textbox-contain {
        text-align: initial;
        display: inline-block
    }
</style>

@code {
    EjsTextBox TextBoxObj;
    EjsToast ToastObj;
    public string ToastContent { get;set; } = "<p><img src='https://ej2.syncfusion.com/demos/src/toast/resource/laura.png'></p>";
    public double ToastTimeOut { get;set; } = 0;
    public string TextBoxVal { get;set; } = "0";

    private void ShowOnClick()
    {
        this.ToastObj.Show();
    }

    private void OnValChange(object args)
    {
        this.ToastTimeOut = int.Parse(this.TextBoxObj.Value);
        this.TextBoxVal = this.TextBoxObj.Value;
        this.StateHasChanged();
    }

    private ButtonModel IgnoreBtnObj = new ButtonModel
    {
        Content = "Ignore"
    };

    private ButtonModel ReplyBtnObj = new ButtonModel
    {
        Content = "reply"
    };

    private void OnIgnore(object args)
    {
        this.ToastObj.Hide();
    }
}

The above code will give following output.

TimeOut

Static toast

You can prevent auto hiding in a toast as visible like static by setting zero (0) value in the timeOut Property.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Buttons
@using Syncfusion.EJ2.Blazor.Notifications
@using Syncfusion.EJ2.Blazor.Inputs

<EjsToast @ref="ToastObj" TimeOut=0 Title="Matt sent you a friend request" Content="@ToastContent">
    <ToastPosition X="Right"></ToastPosition>
</EjsToast>
<div class="col-lg-12 col-sm-12 col-md-12 center">
    <div id="toastBtnDefault" style="margin: auto; text-align: center">
        <EjsButton @onclick="@ShowOnClick"> Show Toast </EjsButton>
    </div>
</div>

<style>
    #elementToastTime .e-toast-message {
        padding: 10px;
        text-align: center;
    }
</style>

@code {
    EjsToast ToastObj;
    public string ToastContent = "You have a new friend request yet to accept";
    private void ShowOnClick()
    {
        this.ToastObj.Show();
    }
}

The output will be as follows.

TimeOut