Appearance Settings
You can control the appearance of the DateRangePicker by setting the following parameters:
Size
You can increase or decrease the size of the DateRangePicker by setting the Size attribute to a member of the Telerik.Blazor.ThemeConstants.DateRangePicker.Size class:
| Class members | Manual declarations |
|---|---|
Small | sm |
Medium | md |
Large | lg |
The built-in sizes
Rounded
The Rounded parameter applies the border-radius CSS rule to the DateRangePicker. You can set it to a member of the Telerik.Blazor.ThemeConstants.DateRangePicker.Rounded class:
| Class members | Manual declarations |
|---|---|
Small | sm |
Medium | md |
Large | lg |
Full | full |
The built-in values of the Rounded attribute
FillMode
The FillMode controls how the TelerikDateRangePicker is filled. You can set it to a member of the Telerik.Blazor.ThemeConstants.DateRangePicker.FillMode class:
| Class members | Result |
|---|---|
Solid default value | solid |
Flat | flat |
Outline | outline |
The built-in Fill modes
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.