Appearance Settings
You can control the appearance of the ComboBox by setting the following attribute:
Size
You can increase or decrease the size of the ComboBox by setting the Size
attribute to a member of the Telerik.Blazor.ThemeConstants.ComboBox.Size
class:
Class members | Manual declarations |
---|---|
Small |
sm |
Medium |
md |
Large |
lg |
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.ComboBox.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;">
<TelerikComboBox Data="@myComboData"
Size="@size"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="selectedValue"
Placeholder="Select an item..."
ClearButton="true"
Filterable="true">
</TelerikComboBox>
</div>
}
}
@code {
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
int selectedValue { get; set; }
protected override void OnInitialized()
{
selectedValue = 3;
}
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
Rounded
The Rounded
attribute applies the border-radius
CSS rule to the ComboBox to achieve curving of the edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.ComboBox.Rounded
class:
Class members | Manual declarations |
---|---|
Small |
sm |
Medium |
md |
Large |
lg |
Full |
full |
@* The built-in values of the Rounded attribute. *@
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.ComboBox.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;">
<TelerikComboBox Data="@myComboData"
Rounded="@rounded"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="selectedValue"
Placeholder="Select an item..."
ClearButton="true"
Filterable="true">
</TelerikComboBox>
</div>
}
}
@code {
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
int selectedValue { get; set; }
protected override void OnInitialized()
{
selectedValue = 3;
}
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
FillMode
The FillMode
controls how the TelerikComboBox is filled. You can set it to a member of the Telerik.Blazor.ThemeConstants.ComboBox.FillMode
class:
Class members | Result |
---|---|
Solid default value |
solid |
Flat |
flat |
Outline |
outline |
@* These are all built-in fill modes *@
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.ComboBox.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;">
<TelerikComboBox Data="@myComboData"
FillMode="@fillMode"
TextField="MyTextField"
ValueField="MyValueField"
@bind-Value="selectedValue"
Placeholder="Select an item..."
ClearButton="true"
Filterable="true">
</TelerikComboBox>
</div>
}
}
@code {
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
int selectedValue { get; set; }
protected override void OnInitialized()
{
selectedValue = 3;
}
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
ThemeBuilder
To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.
ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.