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?)
Attribute Type Documentation Default Value
Required id * :string

component DOM id
class :string

wrapper CSS class
canvas_class :string

canvas CSS class
pen_color :string

Color used to draw the lines.

 Read more Read less
"black"

Can be any color format accepted by context.fillStyle
background_color :string

Color of the canvas background
"white"
min_pen_width :float

Minimum width of a line
0.5
max_pen_width :float

Maximum width of a line
2.5
data_url :string

Signature encoded as a base64 PNG data url

 Read more Read less

Example:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAA...
clear_button :boolean

Show a clear button
true
validate_button :boolean

Show a validate button
true