Signature
Represents the KendoVue Signature component. Accepts properties of type SignatureProps. Use the Signature to let the user draw a handwritten signature.
Definition
Package:@progress/kendo-vue-inputs
Properties Interface:SignatureProps
Syntax:
<Signature :stroke-width="2" :smooth="true" :maximizable="false" />Properties
ariaDescribedBy?
string
Sets the IDs of the elements that describe the Signature, like the HTML aria-describedby attribute. For example, these elements can contain an error or a hint message.
ariaLabel?
string
Sets the accessible label of the Signature.
ariaLabelledBy?
string
Sets the IDs of the elements that label the Signature.
backgroundColor?
string
Sets the background color of the signature.
Accepts CSS color names and hex values.
When you do not set it, the theme $kendo-input-bg variable sets the color.
color?
string
Sets the stroke color of the signature.
Accepts CSS color names and hex values.
When you do not set it, the theme $kendo-input-text variable sets the color.
dir?
string
Sets the dir HTML attribute of the Signature.
disabled?
boolean
Sets whether the Signature is disabled.
exportScale?
number
Sets the scale factor for the exported image.
The Signature multiplies its width and height by this scale when it converts the signature to an image.
2
fillMode?
"flat" | "solid" | "outline"
Sets the fillMode of the Signature. The fill mode controls the background and the border.
The available options are:
- solid
- outline
- flat
undefined
hideLine?
boolean
Hides the dotted line in the background when you set it to true.
false
id?
string
Sets the id of the Signature DOM element.
inputStyle?
object
Sets the style HTML attribute of the input element.
maximizable?
boolean
Sets whether the user can maximize the Signature.
true
modelValue?
string
Sets the value of the Signature when you use v-model.
name?
string
Sets the name of the Signature input.
onBlur?
(event: SignatureBlurEvent) => void
Fires when the Signature loses the focus. The event name is blur.
onChange?
(event: SignatureChangeEvent) => void
Fires each time the user changes the value. The event name is change.
onClose?
(event: SignatureCloseEvent) => void
Fires when the Signature popup closes. The event name is close.
onFocus?
(event: SignatureFocusEvent) => void
Fires when the Signature gets the focus. The event name is focus.
onOpen?
(event: SignatureOpenEvent) => void
Fires when the Signature popup opens. The event name is open.
open?
boolean
Sets whether the Signature popup is open. Use it to control the popup state.
popupScale?
number
Sets the scale factor for the popup.
The Signature multiplies its width and height by this scale when it shows the popup.
3
readOnly?
boolean
Sets whether the Signature is read-only.
required?
boolean
Sets whether the Signature requires a value.
false
rounded?
"small" | "medium" | "large" | "none" | "full"
Sets the border radius of the Signature.
The available options are:
- none
- small
- medium
- large
- full
undefined
size?
"small" | "medium" | "large"
Sets the size of the Signature.
The available options are:
- small
- medium
- large
undefined
smooth?
boolean
Sets whether the Signature smooths out the signature lines.
false
strokeWidth?
number
Sets the stroke width of the signature.
1
tabIndex?
number
Sets the tabIndex of the Signature.
valid?
boolean
Overrides the validity state of the component.
When you set valid, the component ignores the required property.
validationMessage?
string
Sets the validation message of the Signature.
validityStyles?
boolean
Sets whether the Signature shows the validity styles.
true
References
The Signature ref.