Merge pull request #59 from MarvinKlein1508/custom-clear-button

Add support to set custom buttons

Author: MarvinKlein1508

BlazorSRRDemo/BlazorSRRDemo/Components/Pages/CustomButton.razor

@@ -0,0 +1,3 @@
+@page "/CustomButton"
+
+<CustomClearButtonDemo @rendermode="InteractiveServer" />

BlazorServerDemo/Pages/CustomButton.razor

@@ -0,0 +1,3 @@
+@page "/CustomButton"
+
+<CustomClearButtonDemo />

BlazorWebAssemblyDemo/Pages/CustomButton.razor

@@ -0,0 +1,3 @@
+@page "/CustomButton"
+
+<CustomClearButtonDemo />

Demos.Core/NavMenu.razor

@@ -35,6 +35,12 @@
             </NavLink>
         </div>
 
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="CustomButton" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Custom button
+            </NavLink>
+        </div>
+
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="BGColorDemo" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> BG Color

Demos.Core/SignaturePadDemos/CustomClearButtonDemo.razor

@@ -0,0 +1,44 @@
+@inject NavigationManager navigationManager
+@inject SignatureInMemoryService memoryService
+
+<h1>SignaturePad Custom Clear Button Demo</h1>
+<SignaturePad @bind-Value="Input.Signature" style="width: 100%;">
+    <ClearButtonTemplate Context="pad">
+        <button type="button" class="btn btn-danger" @onclick="pad.Clear">Clear</button>
+    </ClearButtonTemplate>
+</SignaturePad>
+
+
+@if (Input.Signature.Any())
+{
+    <h2>Signature</h2>
+    <img src="@Input.SignatureAsBase64" />
+    <button type="button" class="btn btn-primary" @onclick="SaveSignature">Save signature</button>
+    <button type="button" class="btn btn-primary" @onclick="OpenSignature">Open signature</button>
+}
+
+@if (memoryService.Signature.Any())
+{
+    <button type="button" class="btn btn-primary ms-1" @onclick="ReadSignature">Read signature</button>
+}
+
+@code {
+    public MyInput Input { get; set; } = new();
+    private SignaturePad signaturePad = default!;
+
+    private void SaveSignature()
+    {
+        memoryService.Signature = Input.Signature;
+    }
+
+    private void OpenSignature()
+    {
+        navigationManager.NavigateTo(Input.SignatureAsBase64);
+    }
+
+    private void ReadSignature()
+    {
+        Input.Signature = memoryService.Signature;
+        StateHasChanged();
+    }
+}

SignaturePad/SignaturePad.razor

@@ -7,6 +7,13 @@
 
 @if (ShowClearButton && !Disabled)
 {
-    <button type="button" class="@ClearButtonClass" @onclick="Clear">@ClearButtonText</button>
+    if(ClearButtonTemplate is not null)
+    {
+        @ClearButtonTemplate(this);
+    }
+    else
+    {
+        <button type="button" class="@ClearButtonClass" @onclick="Clear">@ClearButtonText</button>
+    }
 }
 

SignaturePad/SignaturePad.razor.cs

@@ -27,7 +27,8 @@ public partial class SignaturePad
     public string ClearButtonText { get; set; } = "Clear Signature";
     [Parameter]
     public bool Disabled { get; set; }
-
+    [Parameter]
+    public RenderFragment<SignaturePad>? ClearButtonTemplate { get; set; }
 
 
     /// <summary>