Appearance Settings
You can control the appearance of the DatePicker by setting the following attribute:
Size
You can increase or decrease the size of the DatePicker by setting the Size
attribute to a member of the Telerik.Blazor.ThemeConstants.DatePicker.Size
class:
Class members | Manual declarations |
---|---|
Small |
sm |
Medium |
md |
Large |
lg |
The built-in sizes
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.DatePicker.Size)
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
| System.Reflection.BindingFlags.FlattenHierarchy)
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
foreach (var field in fields)
{
string size = field.GetValue(null).ToString();
<div style="float:left; margin: 20px;">
<TelerikDatePicker @bind-Value="@DateValue" Size="@size"></TelerikDatePicker>
</div>
}
}
@code {
private DateTime DateValue { get; set; } = DateTime.Now;
}
Rounded
The Rounded
attribute applies the border-radius
CSS rule to the DatePicker to achieve curving of the edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.DatePicker.Rounded
class:
Class members | Manual declarations |
---|---|
Small |
sm |
Medium |
md |
Large |
lg |
Full |
full |
The built-in values of the Rounded attribute
@* The built-in values of the Rounded attribute. *@
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.DatePicker.Rounded)
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
| System.Reflection.BindingFlags.FlattenHierarchy)
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
foreach (var field in fields)
{
string rounded = field.GetValue(null).ToString();
<div style="float:left; margin: 20px;">
<TelerikDatePicker @bind-Value="@DateValue" Rounded="@rounded"></TelerikDatePicker>
</div>
}
}
@code {
private DateTime DateValue { get; set; } = DateTime.Now;
}
FillMode
The FillMode
controls how the TelerikDatePicker is filled. You can set it to a member of the Telerik.Blazor.ThemeConstants.DatePicker.FillMode
class:
Class members | Result |
---|---|
Solid default value |
solid |
Flat |
flat |
Outline |
outline |
The built-in Fill modes
@* These are all built-in fill modes *@
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.DatePicker.FillMode)
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
| System.Reflection.BindingFlags.FlattenHierarchy)
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
foreach (var field in fields)
{
string fillmode = field.GetValue(null).ToString();
<div style="float:left; margin: 20px;">
<TelerikDatePicker @bind-Value="@DateValue" FillMode="@fillmode"></TelerikDatePicker>
</div>
}
}
@code {
private DateTime DateValue { get; set; } = DateTime.Now;
}