Signature Settings
You can control the appearance of the Signature component by using the following parameters:
You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
BackgroundColor
Use the BackgroundColor parameter to change the background color of the Blazor Signature.
Change the background color of the Signature
@* Provide a valid CSS color for the background color of the Signature *@
@* This example sets red with HEX code *@
<TelerikSignature @bind-Value="@SignatureValue" Width="300px" Height="300px" BackgroundColor="#FF0000">
</TelerikSignature>
@code {
private string SignatureValue { get; set; }
}
Color
Use the Color parameter to change the color of the Signature's stroke.
Change the color of the stroke
@* Provide a valid CSS color for the background color of the Signature *@
@* This example sets red with the plain text color name *@
<TelerikSignature @bind-Value="@SignatureValue" Width="300px" Height="300px" Color="red" DebounceDelay="400">
</TelerikSignature>
@code {
private string SignatureValue { get; set; }
}
FillMode
The FillMode parameter controls how the TelerikSignature is filled. It takes a member of the Telerik.Blazor.ThemeConstants.Signature.FillMode static class:
| Class members | Manual declarations |
|---|---|
Solid ( default value) |
solid |
Flat |
flat |
Outline |
outline |
@* These are all built-in fill modes *@
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.Signature.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="display: inline-block; margin: 20px;">
@fillmode
<TelerikSignature @bind-Value="@SignatureValue"
Width="300px"
Height="300px"
FillMode="@fillmode">
</TelerikSignature>
</div>
}
}
@code {
private string SignatureValue { get; set; }
}
Rounded
The Rounded parameter applies the border-radius CSS style to the button to achieve curving of the edges. It takes a member of the Telerik.Blazor.ThemeConstants.Signature.FillMode static class:
| Class members | Manual declarations |
|---|---|
Small |
sm |
Medium ( default value) |
md |
Large |
lg |
The built-in values of the Rounded attribute
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.Signature.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="display: inline-block; margin: 20px;">
<TelerikSignature @bind-Value="@SignatureValue"
Width="300px"
Height="300px"
Rounded="@rounded">
</TelerikSignature>
</div>
}
}
@code {
private string SignatureValue { get; set; }
}
Size
Use the Size parameter to apply the min-height CSS style to the <div class="k-signature"> element. Set the Size parameter to a member of the Telerik.Blazor.ThemeConstants.Signature.Size static class:
| Class members | Manual declarations |
|---|---|
Small |
sm |
Medium ( default value) |
md |
Large |
lg |
Set the Size parameter
<TelerikSignature @bind-Value="@SignatureValue"
Width="300px"
Height="300px"
Size="@Telerik.Blazor.ThemeConstants.Signature.Size.Large">
</TelerikSignature>
@code {
private string SignatureValue { 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.