Barcode: ChildContent

CodeBeam.MudBlazor.Extensions.Docs/Components/FixedTransition.razor

@@ -4,7 +4,7 @@
 <div class="fixed @(FadeIn ? "animated-background" : "animated-background-reverse") d-flex flex-column align-center justify-center mud-theme-secondary" style="width: 100vw; height: 100vh; z-index: 9999; background: linear-gradient(45deg, #E73C7E, #23A6D5, #E73C7E); background-size: 400%;">
     <MudProgressCircular Style="color: white !important" Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
     <MudText Class="mt-8" Typo="Typo.h4">@Component?.Component?.Name.Replace("`1", null)</MudText>
-    <MudText Typo="Typo.h6">@Component?.Description</MudText>
+    <MudText Class="pa-2" Align="Align.Center" Typo="Typo.h6">@Component?.Description</MudText>
 </div>
 
 @if (FadeIn)

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Barcode/BarcodePage.razor

@@ -9,4 +9,8 @@
     <ExampleCard ComponentName="Barcode" ExampleName="BarcodeExample1" Title="Usage" AliasName="usage" Description="Barcode shows different bar codes like QR code with defined value.">
         <BarcodeExample1 />
     </ExampleCard>
+
+    <ExampleCard ComponentName="Barcode" ExampleName="BarcodeExample2" Title="Centered Icons" AliasName="icons" Description="ChildContent parameter allows to show an component at the center of the QrCode.">
+        <BarcodeExample2 />
+    </ExampleCard>
 </ExamplePage>

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Barcode/Examples/BarcodeExample2.razor

@@ -0,0 +1,23 @@
+@namespace MudExtensions.Docs.Examples
+@using ZXing;
+
+<MudGrid>
+    <MudItem xs="12" sm="6" lg="4" Class="d-flex flex-column justify-center gap-4">
+        <MudText>Icon Content</MudText>
+        <MudBarcode Value="https://mudblazor.com" Width="200" Height="200" BarcodeFormat="BarcodeFormat.QR_CODE" Clickable="true">
+            <ChildContent>
+                <MudIcon Style="background: white; border-radius: 4px" Color="Color.Primary" Icon="@Icons.Custom.Brands.MudBlazor" />
+            </ChildContent>
+        </MudBarcode>
+    </MudItem>
+
+    <MudItem xs="12" sm="6" lg="4" Class="d-flex flex-column justify-center gap-4">
+        <MudText>Image Content</MudText>
+        <MudBarcode Value="https://dotnet.microsoft.com/en-us/" Width="200" Height="200" BarcodeFormat="BarcodeFormat.QR_CODE" Clickable="true">
+            <ChildContent>
+                <MudImage Src="https://www.yusufsezer.com.tr/dosyalar/2019/03/net.png" Height="24" Width="24" />
+            </ChildContent>
+        </MudBarcode>
+    </MudItem>
+
+</MudGrid>

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Barcode/Examples/BarcodeExampleIntro.razor

@@ -4,4 +4,5 @@
     <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). Use <CodeBlock>ForceHeight</CodeBlock> to set height for some barcode types like UPC_A and UPC_E.</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>
+    <MudAlert Class="mud-width-full" Severity="Severity.Warning"><b>Always check for the barcode with centered icons. It may not work if the icon is too big.</b></MudAlert>
 </MudGrid>

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

@@ -1,31 +1,36 @@
 @namespace MudExtensions
 @inherits MudComponentBase
 
-<a href="@(Clickable ? Value : null)" target="@Target">
-    @{
-        var content = GetCode();
-    }
-    @if (content != null)
-    {
-        var viewBoxWidth = @content.ModuleSizeX * content.Columns;
-        var viewBoxHeight = @content.ModuleSizeY * content.Rows;
+<div class="@OuterClass" style="@OuterStylename">
+    <a class="absolute mud-barcode-link" href="@(Clickable ? Value : null)" target="@Target">
+        @{
+            var content = GetCode();
+        }
+        @if (content != null)
+        {
+            var viewBoxWidth = @content.ModuleSizeX * content.Columns;
+            var viewBoxHeight = @content.ModuleSizeY * content.Rows;
 
-        <svg width="@Width" height="@Height" class="@Class" style="background-color:@BackgroundColor; @Style" viewBox="0 0 @viewBoxWidth @viewBoxHeight">
-            @for (int y = 0; y < content.Rows; y++)
-            {
-                @for (int x = 0; x < content.Columns; x++)
+                <svg width="@Width" height="@Height" class="@Class" style="background-color:@BackgroundColor; @Style" viewBox="0 0 @viewBoxWidth @viewBoxHeight">
+                @for (int y = 0; y < content.Rows; y++)
                 {
-                    @if (content[x, y])
+                    @for (int x = 0; x < content.Columns; x++)
                     {
-                        <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)" />
+                        @if (content[x, y])
+                        {
+                              <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)" />
+                        }
                     }
                 }
-            }
-        </svg>
-    }
-    else
-    {
-        <MudImage Height="Height" Width="Width" Class="@Class" Style="@Style" />
-    }
-</a>
+                </svg>
+        }
+        else
+        {
+                <MudImage Src="@EmptySrc" Height="Height" Width="Width" Class="@Class" Style="@Style" />
+        }
+        <div class="absolute mud-barcode-child" style="top:50%; left:50%; transform: translate(-50%, -50%)">
+            @ChildContent
+        </div>
+    </a>
+</div>

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

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using MudBlazor;
+using MudBlazor.Utilities;
 using ZXing;
 
 namespace MudExtensions
@@ -9,6 +10,15 @@ namespace MudExtensions
     /// </summary>
     public partial class MudBarcode : MudComponentBase
     {
+        /// <summary>
+        /// 
+        /// </summary>
+        protected string? OuterStylename =>
+            new StyleBuilder()
+            .AddStyle("height", Height + "px")
+            .AddStyle("width", Width + "px")
+            .AddStyle(OuterStyle)
+            .Build();
         private static readonly Writer Encoder = new MultiFormatWriter();
 
         /// <summary>
@@ -17,6 +27,24 @@ public partial class MudBarcode : MudComponentBase
         [Parameter]
         public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
 
+        /// <summary>
+        /// The outer div classname.
+        /// </summary>
+        [Parameter]
+        public string? OuterClass { get; set; }
+
+        /// <summary>
+        /// The outer div classname.
+        /// </summary>
+        [Parameter]
+        public string? OuterStyle { get; set; }
+
+        /// <summary>
+        /// The image source shows when the value is null.
+        /// </summary>
+        [Parameter]
+        public string? EmptySrc { get; set; }
+
         /// <summary>
         /// If true, it goes to specified href when click.
         /// </summary>
@@ -83,6 +111,12 @@ public partial class MudBarcode : MudComponentBase
         [Parameter]
         public EventCallback<string> ValueChanged { get; set; }
 
+        /// <summary>
+        /// Shows a component inside the barcode.
+        /// </summary>
+        [Parameter]
+        public RenderFragment? ChildContent { get; set; }
+
         /// <summary>
         /// Barcode process that returns BarcodeResult. Returns null if value is also null or empty.
         /// </summary>