new
Livewire Volt extension for VSCode. Voltage →
maryUI

Signature

This component is a wrapper around signature_pad, for more details refer to its docs.

Setup 

<head>
    ...
 
    {{-- Signature Pad  --}}
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.2.0/dist/signature_pad.umd.min.js"></script>
</head>

Usage

It just extracts the signature as a base64 string after the end of each stroke.

Please, sign it.
<x-signature wire:model="signature1" hint="Please, sign it." />

So, you can display it later as a regular image. 

@php                                                  
    $signature2 = $this->signature2;     
@endphp                                             
<img src="{{ $signature2 }}" class="bg-pink-100 h-24 rounded-lg" />

Customize 

{{-- Do not set the `width`. It is always 100% --}}
 
<x-signature
    wire:model="signature3"
    clear-text="Delete it!"
    height="100"
    class="border-4 !bg-info" />

If you want to set the width use an outer div. 

<div class="w-44">
    <x-signature ... />
</div>

You can set any configuration describe at signature_pad docs. 

<x-signature wire:model="signature4" :config="['penColor' => 'red']" />
maryUI
Sponsor