Badge
in namespace DotVVM.Framework.Controls.Bootstrap
Renders a Bootstrap badge component.
Usage & Scenarios
Renders a Boostrap badge component.
Sample 1: Basic Badge
Place the contents of the Badge inside the control, or use the Text property.
<bs:Badge Text="100"/>
<bs:Badge>
<h1>9000+</h1>
</bs:Badge>
Sample 2: Badge in a Button
If you need to use the Badge inside the button, don't forget to set the ButtonTagName to Button.
Otherwise, the button would be rendered as <input type="text"> which supports only a plain text values.
<bs:Button Click="{command: Increment()}" ButtonTagName="button">
Number of clicks: <bs:Badge Text="{value: Clicks}"/>
</bs:Button>using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Badge.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public int Clicks { get; set; } = 0;
public void Increment()
{
Clicks++;
}
}
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
1 |
|
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
static value
bindable
|
null |
|
ID | String | Gets or sets the unique control ID. |
attribute
static value
|
null |
|
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null |
|
Text | String | Gets or sets the text inside the badge. |
attribute
static value
bindable
|
null |
|
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |