Search results

Template

The Template property in toast can be defined as HTML element, this can be either a string or ChildContent.

The HTML element tag can be given as a string for the Template property.

The Template property allows getting the template content using the queryselector. Here, the template given as direct child content to Toast Component.

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

<EjsToast @ref="ToastObj" ExtendedTimeout=0 TimeOut=120000>
    <ToastPosition X="Right" Y="Bottom"></ToastPosition>
    <div>
        <div id='template_toast'>
            <div class="horizontal-align">
                <div class='toast-content'>
                    <div class='toast-title'>
                        Weekend Alarm
                    </div>
                    <div class='toast-message'>
                        With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E.
                        Olive Way by 10:00PM
                    </div>
                </div>
            </div>
            <img src="https://ej2.syncfusion.com/demos/src/toast/resource/map.jpg" width="100%" height="70%">
        </div>
    </div>
</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;
    }
    #template_toast {
        display: none;
    }
    #element .e-toast-message .e-toast-content #template_toast {
        display: block;
    }
</style>

@code {
    EjsToast ToastObj;

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