New to Kendo UI for Vue? Start a free 30-day trial

SignatureProps

Interface

Represents the props of the Kendo UI for Vue Signature component.

Definition

Package:@progress/kendo-vue-inputs

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.

Default:

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

Default:

undefined

hideLine?

boolean

Hides the dotted line in the background when you set it to true.

Default:

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.

Default:

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.

Parameters:eventSignatureBlurEvent

onChange?

(event: SignatureChangeEvent) => void

Fires each time the user changes the value. The event name is change.

Parameters:eventSignatureChangeEvent

onClose?

(event: SignatureCloseEvent) => void

Fires when the Signature popup closes. The event name is close.

Parameters:eventSignatureCloseEvent

onFocus?

(event: SignatureFocusEvent) => void

Fires when the Signature gets the focus. The event name is focus.

Parameters:eventSignatureFocusEvent

onOpen?

(event: SignatureOpenEvent) => void

Fires when the Signature popup opens. The event name is open.

Parameters:eventSignatureOpenEvent

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.

Default:

readOnly?

boolean

Sets whether the Signature is read-only.

required?

boolean

Sets whether the Signature requires a value.

Default:

false

rounded?

"small" | "medium" | "large" | "none" | "full"

Sets the border radius of the Signature.

The available options are:

none
small
medium
large
full

Default:

undefined

size?

"small" | "medium" | "large"

Sets the size of the Signature.

The available options are:

small
medium
large

Default:

undefined

smooth?

boolean

Sets whether the Signature smooths out the signature lines.

Default:

false

strokeWidth?

number

Sets the stroke width of the signature.

Default:

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.

Default:

true

value?

string

Sets the value of the Signature.

The value is an image encoded as a Data URL.