Barcode: Add Color, BackgroundColor and StrokeWidth parameters (#194)

* Barcode Color

* Remove unnecessary expression

Author: mckaragoz

CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor

@@ -7,14 +7,14 @@
     }
     @if (content != null)
     {
-        <svg width="@Width" height="@Height">
+        <svg width="@Width" height="@Height" style="background-color:@BackgroundColor">
             @for (int y = 0; y < content.Rows; y++)
             {
                 @for(int x = 0; x < content.Columns; x++)
                 {
                     @if(content[x,y])
                     {
-                        <rect width="@content.ModuleSizeX" height="@content.ModuleSizeY" style="fill:black; stroke-width:1px; stroke:black" 
+                        <rect class="d-flex align-center justify-center" width="@content.ModuleSizeX" height="@content.ModuleSizeY" style="@($"fill:{Color}; stroke-width:{StrokeWidth}px; stroke:{Color}")"
                               x="@(x * content.ModuleSizeX)" y="@(y * content.ModuleSizeY)" />
                     }
                 }

CodeBeam.MudBlazor.Extensions/Components/Barcode/MudBarcode.razor.cs

@@ -24,6 +24,12 @@ public partial class MudBarcode : MudComponentBase
         [Parameter]
         public int Width { get; set; } = 200;
 
+        /// <summary>
+        /// Increase the stroke width if readers can not read the barcode easily.
+        /// </summary>
+        [Parameter]
+        public int StrokeWidth { get; set; }
+
         [Parameter]
         public int Height { get; set; } = 200;
 
@@ -33,6 +39,12 @@ public partial class MudBarcode : MudComponentBase
         [Parameter]
         public string Value { get; set; }
 
+        [Parameter]
+        public string Color { get; set; } = "black";
+
+        [Parameter]
+        public string BackgroundColor { get; set; } = "white";
+
         [Parameter]
         public EventCallback<string> ValueChanged { get; set; }
 

ComponentViewer.Docs/Pages/Components/QrCodePage.razor renamed to ComponentViewer.Docs/Pages/Components/BarcodePage.razor

@@ -2,6 +2,10 @@
 @using ComponentViewer.Docs.Pages.Examples
 
 <ExamplePage Title="MudBarcode">
+    <ExampleCard ExampleName="BarcodeExampleIntro" Title="Intro & Tips" Description="" ShowCodeSection="false">
+        <BarcodeExampleIntro />
+    </ExampleCard>
+
     <ExampleCard ExampleName="BarcodeExample1" Title="Usage" Description="Barcode shows different bar codes like QR code with defined value.">
         <BarcodeExample1 />
     </ExampleCard>

ComponentViewer.Docs/Pages/Examples/BarcodeExample1.razor

@@ -2,7 +2,7 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex justify-center">
-        <MudBarcode @ref="_barcode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" />
+        <MudBarcode @ref="_barcode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" Color="@_color" BackgroundColor="@_backgroundColor" StrokeWidth="_strokeWidth" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
@@ -13,6 +13,9 @@
             <MudSelectExtended ItemCollection="@(Enum.GetValues<BarcodeFormat>())" @bind-Value="_barcodeFormat" Label="Barcode Format" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
             <MudText Color="Color.Error">@(_barcode.ErrorText == null ? null : "Error: " + _barcode.ErrorText)</MudText>
             <MudSwitchM3 @bind-Checked="_clickable" Color="Color.Secondary" Label="Clickable" />
+            <MudTextField T="string" @bind-Value="_color" Label="Color" Variant="Variant.Outlined" Immediate="true" Margin="Margin.Dense" />
+            <MudTextField T="string" @bind-Value="_backgroundColor" Label="BackgroundColor" Variant="Variant.Outlined" Immediate="true" Margin="Margin.Dense" />
+            <MudNumericField @bind-Value="_strokeWidth" Label="StrokeWidth" Min="0" Max="10" Variant="Variant.Outlined" Margin="Margin.Dense" />
         </MudStack>
     </MudItem>
 </MudGrid>
@@ -24,4 +27,7 @@
     int _height = 200;
     BarcodeFormat _barcodeFormat = BarcodeFormat.QR_CODE;
     bool _clickable = false;
+    string _color = "black";
+    string _backgroundColor = "white";
+    int _strokeWidth = 0;
 }

ComponentViewer.Docs/Pages/Examples/BarcodeExampleIntro.razor

@@ -0,0 +1,8 @@
+@using Microsoft.AspNetCore.Components
+@using MudBlazor.Extensions
+
+<MudGrid>
+    <MudAlert Class="mud-width-full" Severity="Severity.Success"><b>If you feel barcode readers response slowly, increase the <CodeBlock>StrokeWidth</CodeBlock> value for a better read performance.</b></MudAlert>
+    <MudAlert Class="mud-width-full" Severity="Severity.Success"><b>You can independently set height and width, but for some barcode formats like QR, the component have to has same width and height (square sized).</b></MudAlert>
+    <MudAlert Class="mud-width-full" Severity="Severity.Success"><b>Remember that although you can freely specify colors, can get the best results with the highest contrast.</b></MudAlert>
+</MudGrid>