Signature Pad · API
Clear the canvas from client bindings, client JS, or a server event.
Hex doc
Phoenix
Clear (Client binding)
<div class="layout__row">
<.action phx-click={Corex.SignaturePad.clear("signature-api-cb")} class="button button--sm">
Clear
</.action>
</div>
<.signature_pad class="signature-pad">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
Clear
<div class="layout__row">
<button
type="button"
class="button button--sm"
onclick="document.getElementById('signature-api-cjs')?.dispatchEvent(new CustomEvent('corex:signature-pad:clear', { bubbles: false, detail: { id: 'signature-api-cjs' } }))"
>
Clear
</button>
</div>
<.signature_pad class="signature-pad">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
const el = document.getElementById("signature-api-cjs");
el?.dispatchEvent(
new CustomEvent("corex:signature-pad:clear", {
bubbles: false,
detail: { id: "signature-api-cjs" }
})
);
const el: HTMLElement | null = document.getElementById("signature-api-cjs");
el?.dispatchEvent(
new CustomEvent("corex:signature-pad:clear", {
bubbles: false,
detail: { id: "signature-api-cjs" }
})
);
Clear
<div class="layout__row">
<.action phx-click="signature_api_clear" class="button button--sm">
Clear
</.action>
</div>
<.signature_pad class="signature-pad">
<:label>Sign here</:label>
<:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
def handle_event("signature_api_clear", _params, socket) do
{:noreply, Corex.SignaturePad.clear(socket, "signature-api-srv")}
end