Edit on Github

Toast

in namespace DotVVM.Bootstrap5.Controls

Renders a Boostrap Toast alert message

Usage & Scenarios

Toast is a component designed to display push notifications we know from various mobile and desktop operating systems.

https://getbootstrap.com/docs/5.2/components/toasts/

Sample 1: Basic Toast

The header content of Toast can be set be one of two ways: using the HeaderText property or using HeaderTemplate.

The main content can be set using Text or ContentTemplate. This property is required, so it must be set.

Showing and hiding the toast can be using the IsDisplayed property.

page.dothtml
ViewModel.cs

<bs:Toast IsDisplayed="{value: Displayed}" HeaderText="Header" >
    <ContentTemplate>
        Content
    </ContentTemplate>
</bs:Toast>

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Toast.sample1
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = true;
    }
}

Sample 2: Animation

The default animation used by Toast during showing and hiding is fade.

This can be changed using the Animation property.

page.dothtml
ViewModel.cs

<bs:Toast IsDisplayed="{value: Displayed}" Text="None Animation" Animation="None" />

<bs:Toast IsDisplayed="{value: Displayed}" Text="Fade Animation" Animation="Fade" />

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Toast.sample1
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = true;
    }
}

Sample 3: Hiding

The default way for hiding Toast is the CloseButton which is automatically created in header.

You can remove the default CloseButton by setting AddCloseButton to false.

An alternative way for hiding the Toast is by setting the AutoHideDelay property. The delay is in miliseconds.

page.dothtml
ViewModel.cs

<bs:Toast IsDisplayed="{value: Displayed}" Text="Content" AutoHideDelay="3000" AddCloseButton="false" />

<bs:Button Text="Show / Hide with delay" Click="{staticCommand: Displayed = !Displayed}" />

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Toast.sample1
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = true;
    }
}

Sample 4: Callbacks

You can use OnShow and OnHide commands to perform some actions when the toast changes its state.

page.dothtml
ViewModel.cs

<bs:Toast IsDisplayed="{value: Displayed}" OnShow="{command: Shown()}" OnHide="{command: Hidden()}">
    <HeaderTemplate>
        Header
    </HeaderTemplate>
    <ContentTemplate>
        Content
    </ContentTemplate>
</bs:Toast>

<bs:Button Text="Show" Click="{staticCommand: Displayed = true}" />

<pre>{{value: Log}}</pre>

public class ViewModel
{
    public bool Displayed { get; set; } = false;

    public string Log { get; set; }

    public void Shown()
    {
        Log += "shown\r\n";
    }

    public void Hidden()
    {
        Log += "hidden\r\n";
    }
}

Sample 5: Color and Font Color

The Color property allows to change the background color of toast.

The FontColor property allows to change the font color of texts in toast.

Basic Color which can be use as Color and FontColor can be found in Bootstrap Color documentation

page.dothtml

<bs:Toast IsDisplayed="{value: true}" Text="Content" HeaderText="Header Primary" Color="Secondary" FontColor="Primary" />

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
AddCloseButton	Boolean	Gets or sets the whether the close button will be added. The CloseButton component can be used to achieve the same behavior.	attribute inner element static value bindable default	True
Animation	ToastAnimation	Gets or sets which animation will be used. Animation can be also disabled by setting animation to None.	attribute inner element static value bindable default	Fade
AutoHideDelay	Int32?	Gets or sets how many miliseconds it will take before the toast closes. When set to null than the toast will never close automatically.	attribute inner element static value bindable default	null
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
Color	ToastColor	Gets or sets the color of the toast.	attribute inner element static value bindable default	None
Content	List<DotvvmControl>	Gets or sets the content placed inside the control.	attribute inner element static value bindable default	null
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
HeaderTemplate	ITemplate	Gets or sets the content inside the toast header.	attribute inner element static value bindable default	null
HeaderText	String	Gets or sets a single text inside the toast header.	attribute inner element static value bindable default	null
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
IsDisplayed	Boolean	Gets or sets whether the Toast is displayed.	attribute inner element static value bindable default	null
Text	String	Gets or sets the text inside the control.	attribute inner element static value bindable default	null
TextColor	ToastTextColor	Gets or sets the font color of the toast.	attribute inner element static value bindable default	None
Visible	Boolean	Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True