Signature

Signature component.

Signature, Personalization Blocks

Example:

TallStackUi::personalize()
    ->signature()
    ->block('block', 'classes');

# Concept

Many modern applications need to capture a user's signature, and the signature component is ideal for this. The signature component capturing and exporting signatures. The signature will be a base64 that you can display as an image or store in your database.

You should use it inside Livewire components with wire:model to some property as a string.

# Basic Usage

<x-signature />

# Label & Hint

Sign your name

You can revert if you have written something wrong.

<x-signature label="Sign your name" hint="You can revert if you have written something wrong." />

# Pen Color

<x-signature color="#ff0000" />

# Background Color

<x-signature background="#cc1002" />

# Line Weight

<x-signature line="10" />

# Height

<x-signature height="500" />

# Clearable

<x-signature clearable />

# Exportable

<x-signature exportable />
 
<!-- You can set "jpeg" to export as jpeg -->
<x-signature exportable jpeg />

# Events

<!-- $event.detail will receive: {signature: url} -->
 
<x-signature exportable x-on:export="alert('Exported!')" />