Accessibility in Vue Signature component

16 Mar 20231 minute to read

Keyboard interaction

The following list of keys can be used to interact with the Signature component.

Properties	Functionality
Ctrl + Z	Undo the last user action.
Ctrl + Y	Redo the last user action.
Ctrl + S	To save the signature.
delete	Erases all the signature strokes signed by user.

app.vue

<template>
  <div class='wrap'>
    <h4>Sign here</h4>
    <ejs-signature id="signature"></ejs-signature>
  </div>
</template>

<script>
import Vue from 'vue';
import { SignaturePlugin } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(SignaturePlugin);

export default {}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

#signature {
    border: 1px solid lightgray;
    height: 100%;
    width: 100%;
}

.wrap {
    height: 300px;
    width: 550px;
}
</style>