DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

Alert

in namespace DotVVM.BusinessPack.Controls

Renders a contextual feedback message for users.

Properties

Name Type Description Notes Default Value
AllowDismiss Boolean Gets or sets whether a close icon should be displayed in the Alert box.
attribute
inner element
static value
bindable
default
False
AnimationDuration Double Gets or sets how long will the show and hide animations run (in seconds). If the value is equal to 0, Alert is not animated The default is 0.2 seconds.
attribute
inner element
static value
bindable
default
0.2
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
AutoHideTimeout Double Gets or sets after how many seconds is the Alert message automatically hidden. If the value is equal to 0, Alert is not AutoHide The default values is 0 seconds.
attribute
inner element
static value
bindable
default
0
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
Static
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.
attribute
inner element
static value
bindable
default
DismissIconCssClass String Gets or sets the CSS class for the close icon displayed when the Alert is dismissible. The default value is FaClose.
attribute
inner element
static value
bindable
default
fa fa-close
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
IsDisplayed Boolean Gets or sets the value indicating whether the Alert is actually visible. The value is ignored when Visible property is set to .
attribute
inner element
static value
bindable
default
True
ShowDefaultTypeIcon Boolean
attribute
inner element
static value
bindable
default
True
Text String Gets or sets the text displayed inside the Alert box.
attribute
inner element
static value
bindable
default
Type AlertType Gets or sets the type (color, severity) of the Alert message.
attribute
inner element
static value
bindable
default
Success
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description
Dismissed Command Gets or sets the command triggered when the Alert message is dismissed by the user.

Usage & Scenarios

Renders an alert message of a specified type. It can be used for to indicate errors, warnings, info or success messages.

The user can dismiss it by clicking an icon. The alert can be also hidden after a specified timeout.

HTML Rendered by the Control

Sample 1: Alert Types

The Type of the alert can be Success, Info, Warning and Danger.

Use the Text property to specify the text. Alternatively, you can place any content inside the Alert control.

<bp:Alert Type="Success" Text="Plain text success alert" />

<bp:Alert Type="Danger">
    Danger alert with <a href="#">hyperlinks</a>
    <br />
    and custom content
</bp:Alert>

Sample 2: Dismiss

The AllowDismiss property will add an icon to the right side of the alert, allowing the user to hide the alert.

The DismissIconCssClass can be used to specify the CSS class for the dismiss icon. The default value is fa fa-close (the Fontawesome close icon).

<bp:Alert Type="Warning"
          AllowDismiss="true"
          Text="This alert can be dismissed." />

<bp:Alert Type="Danger"
          AllowDismiss="true"
          DismissIconCssClass="fa fa-delete"
          Text="This alert can be dismissed and uses a custom dismiss icon." />

Sample 3: Animations

When the alert appears or disappears, the fade in and fade out animation is used.

If you need to change the length of the animation, use the AnimationDuration property.

<bp:Alert Type="Info"
          AnimationDuration="0.5"
          AllowDismiss="true"
          Text="This alert is animated." />

Sample 4: Alert Display State

You can use the IsDisplayed property to determine or specify, whether the alert is displayed.

If you set this property to true, the alert will be displayed. When the user dismisses the alert, the property will be switched to false.

<bp:Alert Type="Warning"
          IsDisplayed="{value: IsDisplayed}"
          AllowDismiss="true"
          Text="Warning" />

<bp:CheckBox Text="Is warning displayed"
             Checked="{value: IsDisplayed}" />
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Alert.sample4
{
    public class ViewModel
    {
        public bool IsDisplayed { get; set; }
    }
}

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