Textbox
in namespace DotVVM.Bootstrap5.Controls
Usage & Scenarios
Extends the built-in TextBox control to allow applying Bootstrap CSS classes.
Sample 1: TextBox Sizing
Use the Size
property to set the size of the TextBox.
<bs:TextBox Size="Small" Text="{value: Text}" />
<bs:TextBox Size="Default" Text="{value: Text}" />
<bs:TextBox Size="Large" Text="{value: Text}" />
namespace DotvvmWeb.Views.Docs.Controls.bootstrap5.TextBox.sample1
{
public class ViewModel
{
public string Text { get; set; } = "DotVVM";
}
}
Sample 2: TextBox Type
Use the Type
property to set the type of the TextBox.
<bs:TextBox Type="Normal" Text="Normal textbox"/>
<bs:TextBox Type="Password" Text="Password"/>
<bs:TextBox Type="Multiline" Text="Multiline textbox"/>
<bs:TextBox Type="Color" Text="Color textbox"/>
<bs:TextBox Type="Date" Text="Date textbox"/>
Sample 3: TextBox Update Text on Input
Use UpdateTextOnInput
to set wheter viewmodel property will be updated. Set True to update immediately or set False to update on focus loose.
<bs:TextBox Text="{value: Text}" UpdateTextOnInput="true" />
<bs:TextBox Text="{value: Text}" UpdateTextOnInput="false" />
<p>{{value: Text}}</p>
namespace DotvvmWeb.Views.Docs.Controls.bootstrap5.TextBox.sample1
{
public class ViewModel
{
public string Text { get; set; } = "DotVVM";
}
}