@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/docs/api/SignatureProps.md

@@ -0,0 +1,1592 @@
+---
+title: SignatureProps
+description: "Learn how to build custom functionality when working with the React Inputs by Kendo UI with the help of the SignatureProps."
+api_reference: true
+type: inner_api
+slug: api_inputs_signatureprops
+---
+
+# SignatureProps
+Represents the props of the [KendoReact Signature component]({% slug overview_signature %}).
+
+
+<table class="api-table api-table-properties">
+<thead>
+<tr>
+<th class="th-name">Name</th>
+<th class="th-type">Type</th>
+<th class="th-default">Default</th>
+<th class="th-desc">Description</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td class="table-cell-name">
+
+
+#### ariaDescribedBy?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+For example these elements could contain error or hint message.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### ariaLabel?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+The accessible label of the component.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### ariaLabelledBy?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Identifies the element(s) which will label the component.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### backgroundColor?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+'#ffffff'
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+The background color of the signature.
+
+Accepts CSS color names and hex values.
+
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### className?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets a class of the Signature DOM element.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### color?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+'#000000'
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+The stroke color of the signature.
+
+Accepts CSS color names and hex values.
+
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### dir?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Represents the `dir` HTML attribute.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### disabled?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Determines whether the Signature is in its disabled state.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### exportScale?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+2
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+The scale factor for the exported image.
+
+The Signature width and height will be multiplied by the scale when converting the signature to an image.
+
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### fillMode?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+"null" | "flat" | "outline" | "solid"
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+`solid`
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Configures the `fillMode` of the Signature.
+
+The available options are:
+- solid
+- outline
+- flat
+- null&mdash;Does not set a fillMode `className`.
+
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### height?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Specifies the height of the Signature in pixels.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### hideLine?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+false
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+A flag indicating whether the dotted line should be displayed in the background.
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### inputStyle?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+React.CSSProperties
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Represents the input element `style` HTML attribute.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### maximizable?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+true
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+A flag indicating if the signature can be maximized.
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### name?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Specifies the name of the Signature input.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### open?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the open and close state of the Signature.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### popupScale?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+3
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+The scale factor for the popup.
+
+The Signature width and height will be multiplied by the scale when showing the popup.
+
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### readOnly?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Determines whether the Signature is in its read-only state.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### required?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Specifies if `null` is a valid value for the component.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### rounded?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+"null" | "small" | "medium" | "full" | "large"
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+`medium`
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Configures the `roundness` of the Signature.
+
+The available options are:
+- small
+- medium
+- large
+- full
+- null&mdash;Does not set a rounded `className`.
+
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### size?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+"null" | "small" | "medium" | "large"
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+`medium`
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Configures the `size` of the Signature.
+
+The available options are:
+- small
+- medium
+- large
+- null&mdash;Does not set a size `className`.
+
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### smooth?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+false
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+A flag indicating whether to smooth out signature lines.
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### strokeWidth?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+<code>
+
+
+1
+
+
+</code>
+
+
+</td>
+<td class="table-cell-comment">
+
+
+The stroke width of the signature.
+
+
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### style?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+React.CSSProperties
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Represents the `style` HTML attribute.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### tabIndex?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Sets the `tabIndex` property of the Signature.
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### valid?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Overrides the validity state of the component.
+If `valid` is set, the `required` property will be ignored.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### validationMessage?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Controls the form error message of the component. If set to an empty string, no error will be thrown.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### validityStyles?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+boolean
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+If set to `false`, no visual representation of the invalid state of the component will be applied.
+
+This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### value?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+string
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Specifies the value of the Signature.
+
+The value is an image encoded as a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
+
+
+
+</td>
+</tr>
+<tr>
+<td class="table-cell-name">
+
+
+#### width?
+
+
+</td>
+<td type class="table-cell-type">
+
+
+<code>
+
+
+number
+
+
+</code>
+
+
+</td>
+<td class="table-cell-default">
+
+
+
+
+</td>
+<td class="table-cell-comment">
+
+
+Specifies the width of the Signature in pixels.
+
+
+</td>
+</tr>
+</tbody>
+</table>
+
+
+
+## Methods
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onBlur
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+The event handler that will be fired when Signature is blurred.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[SignatureBlurEvent]({% slug api_inputs_signatureblurevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onChange
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+Determines the event handler that will be fired when the user edits the value.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[SignatureChangeEvent]({% slug api_inputs_signaturechangeevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onClose
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+The event handler that will be fired when Signature popup is closed.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[SignatureCloseEvent]({% slug api_inputs_signaturecloseevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onFocus
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+The event handler that will be fired when Signature is focused.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[SignatureFocusEvent]({% slug api_inputs_signaturefocusevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+<table class="api-table api-table-methods">
+<thead class="api-table-methods-head">
+<tr>
+<th>
+
+
+#### onOpen
+
+
+</th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+The event handler that will be fired when Signature popup is open.
+
+
+</td>
+</tr>
+<tr class="nested-table">
+<td>
+<table class="api-table api-table-parameters">
+<thead class="api-table-parameters-head">
+<tr>
+<th class="th-name">Parameters</th>
+<th class="th-type"></th>
+<th class="th-desc"></th>
+</tr>
+</thead>
+<tbody class="api-table-body">
+<tr>
+<td>
+
+
+event
+
+
+</td>
+<td type>
+
+
+<code>
+
+
+[SignatureOpenEvent]({% slug api_inputs_signatureopenevent %})
+
+
+</code>
+
+
+</td>
+<td>
+
+
+
+
+
+</td>
+</tr>
+</tbody>
+</table>
+</td>
+</tr>
+
+</tbody>
+</table>
+
+
+