Signature Appearance
The Kendo UI for jQuery Signature enables you to change various appearance aspects about the widget.
The following example demonstrates a Signature widget with custom appearance settings.
<div id="signature"></div>
<script>
$(document).ready(function () {
$("#signature").kendoSignature({
backgroundColor: "#fad980",
color: "#212121",
width: 500,
height: 200,
strokeWidth: 4
});
});
</script>
Background Color
To modify the background color of the Signature container, use its backgroundColor property.
$("#signature").kendoSignature({
backgroundColor: "#fad980"
});
Stroke Color
You can also change the stroke color of the Signature by using its color property.
$("#signature").kendoSignature({
color: "#212121"
});
Stroke Width
To update the stroke width of the Signature, utilize its strokeWidth property.
$("#signature").kendoSignature({
strokeWidth: 4
});
Options
The Kendo UI Signature supports the following styling options:
-
size—configures the overall size of the component. -
rounded—configures the border radius of the component. -
fillMode—configures how the color is applied to the component.
Size
The size option controls how big or small the rendered Signature looks.
The following values are available for the size option:
-
sm—small size -
md—medium size -
lg—large size -
none—unset
The following example demonstrates how to configure the size of the component through the widget configuration:
<div id="signature"></div>
<script>
$("#signature").kendoSignature({
size: "medium"
});
</script>
Rounded
The rounded option controls how much border radius is applied to the rendered Signature.
The following values are available for the rounded option:
-
sm—small border radius -
md—medium border radius -
lg—large border radius -
full—largest border radius -
none—unset
The following example demonstrates how to configure the rounded of the component through the widget configuration:
<div id="signature"></div>
<script>
$("#signature").kendoSignature({
rounded: "medium"
});
</script>
FillMode
The fillMode option controls the way the color is applied to the rendered Signature.
The following values are available for the fillMode option:
solidflatoutlinenone
The following example demonstrates how to configure the fillMode of the component through the widget configuration:
<div id="signature"></div>
<script>
$("#signature").kendoSignature({
fillMode: "solid"
});
</script>