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 | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
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
static value
bindable
|
null | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
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 |