Version: 2.0 |

Toast

in namespace DotVVM.Framework.Controls.Bootstrap4

Properties

Name Type Description Notes Default Value
AddCloseButton Boolean Gets or sets whether the close button will be added to the header.
attribute
inner element
static value
bindable
default
True
Animation ToastAnimation Gets or sets which animation will be used. Animation can be also disable by setting animation to None.
attribute
inner element
static value
bindable
default
Fade
AutoHideDelay Double? Gets or sets how many seconds 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
ContentTemplate ITemplate Gets or sets the content of the toast.
attribute
inner element
static value
bindable
default
HeaderTemplate ITemplate Gets or sets the content of the header.
attribute
inner element
static value
bindable
default
HeaderText String Gets or sets the header text.
attribute
inner element
static value
bindable
default
IsDisplayed Boolean Gets or sets whether the Toast is displayed.
attribute
inner element
static value
bindable
default
False
Text String Gets or sets the inner text of the toast.
attribute
inner element
static value
bindable
default

Events

Name Type Description
OnHide Command Triggers when the Toast is hidden.
OnShow Command Triggers when the Toast is shown.

Usage & Scenarios

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

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

HTML Rendered by the Control

Sample 1: Basic Toast

The header content of Toast can be set be one of two ways, by HeaderText property or by using HeaderTemplate.
The main content can be set by Text or by ContentTemlate.
It`s not required to provide both header and content, but at least one required is.

Showing / hidding of Toast is done using IsDisplayed property.

<bs:Toast IsDisplayed="{value: Displayed}" HeaderText="Header" >
    <ContentTemplate>
        Content
    </ContentTemplate>
</bs:Toast>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

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

Sample 2: Animation

Default animation used by Toast during showing and hiding is fade.
This can be changed using the Animation property.

<bs:Toast IsDisplayed="{value: Displayed}" Text="Content" Animation="None" />
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

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

Sample 3: Hiding

Default way how to hide Toast is by CloseButton which is automatically generated into header.

Automatic adding of CloseButton can be disabled by setting AddCloseButton to false.

Alternative way how to hide Toast is by setting AutoHideDelay property.
AutoHideDelay property represents number (double) in seconds. And can be set to null when we want want auto hide functionality.

<bs:Toast IsDisplayed="{value: Displayed}" Text="Content" AutoHideDelay="3" AddCloseButton="false" />
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ModalDialog.sample2
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = false;
    }
}

Sample 4: Callbacks

When we need to perform some action after the toast is shown / hidden than we can use OnShow and OnHide command properties.

    <bs:Toast IsDisplayed="{value: Displayed}" OnShow="{command: Shown()}" OnHide="{command: Hidden()}" >
        <HeaderTemplate>
            Header
        </HeaderTemplate>
        <ContentTemplate>
            Content
        </ContentTemplate>
    </bs:Toast>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ModalDialog.sample2
{
    public class ViewModel
    {
        public bool Displayed { get; set; } = false;

        public void Shown(){

        }

        public void Hidden(){
            
        }
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message