Phenix Storybook

Signature

Signature canvas Pad (work in progress …)

Read more Read less

TODO:

  • data saved as a PNG dataURL and loaded again do not preserve signature size
  • when clicking on the validate button:
    • the dataURL should be persisted in a hidden input field.
    • a custom event will be triggered. Parent liveview will handle the event and set the signature as readonly
  • must support a readonly attribute: disables the buttons, disables the canvas (transparent overlay?)
Default signature Open in playground 
<.signature id="signature-single-default-signature"/>
Custom colors Open in playground 
<.signature id="signature-single-custom-colors" background_color="#F0F0F0" pen_color="blue"/>
Custom pen width Open in playground 
<.signature id="signature-single-custom-pen-width" max_pen_width={1.5} min_pen_width={1.5}/>
With input data Open in playground 
<.signature
  id="signature-single-with-input-data"
  data_url="data:image/png;base64,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"
/>
No clear button Open in playground 
<.signature id="signature-single-no-clear-button"/>