Allow to set custom class names for both signature & clear button #13 &

#12

README.md

@@ -16,7 +16,7 @@ Or via the Visual Studio package manger.
 ## Basic usage
 Start by adding the following using statement to your root `_Imports.razor`.
 ```
- @using SignaturePad
+@using SignaturePad
 ```
 
 Next you should define a property in your class. For example:
@@ -60,4 +60,10 @@ You can configure the SignaturePad by providing a `SignaturePadOptions` instance
  LineWidth = 20
  };
 }
-```
+```
+
+## Custom styling
+You can customize the looks of SignaturePad by either overriding the CSS classes or by specifiying your own classes.
+
+For the SignaturePad itself you can use the `Class` parameter and for the button to clear the SignaturePad you can use the `ClearButtonClass` parameter.
+

SignaturePad/SignaturePad.csproj

@@ -4,7 +4,7 @@
  <TargetFramework>net6.0</TargetFramework>
  <Nullable>enable</Nullable>
  <ImplicitUsings>enable</ImplicitUsings>
- <Version>7.3.0</Version>
+ <Version>7.4.0</Version>
  <Description>A simple to use blazor component to draw a signature.</Description>
  <Copyright>2023</Copyright>
  <RepositoryUrl>https://github.com/MarvinKlein1508/SignaturePad</RepositoryUrl>

SignaturePad/SignaturePad.razor

@@ -1,11 +1,11 @@
 @inject Microsoft.JSInterop.IJSRuntime jsRuntime
 
-<canvas class="signature @(Disabled ? "disabled" : string.Empty)" id="signature-@_id" style="width: 100%;">
+<canvas class="@Class @(Disabled ? "disabled" : string.Empty)" id="signature-@_id" style="width: 100%;">
  Get a better browser, bro.
 </canvas>
 
 @if (ShowClearButton && !Disabled)
 {
- <button type="button" class="btn btn-default" @onclick="Clear">@ClearButtonText</button>
+ <button type="button" class="@ClearButtonClass" @onclick="Clear">@ClearButtonText</button>
 }
 

SignaturePad/SignaturePad.razor.cs

@@ -27,6 +27,10 @@ public byte[] Value
  [Parameter] 
  public bool ShowClearButton { get; set; } = true;
  [Parameter]
+ public string ClearButtonClass { get; set; } = "btn btn-default";
+ [Parameter]
+ public string Class { get; set; } = "signature";
+ [Parameter]
  public string ClearButtonText { get; set; } = "Clear Signature";
  [Parameter]
  public bool Disabled { get; set; }