Skip to content

Commit 50b9514

Browse files
mckaragozmckaragoz
authored
Barcode ChildContent (#517)
1 parent f8be652 commit 50b9514

File tree

6 files changed

+91
-24
lines changed

6 files changed

+91
-24
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<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%;">
55
<MudProgressCircular Style="color: white !important" Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
66
<MudText Class="mt-8" Typo="Typo.h4">@Component?.Component?.Name.Replace("`1", null)</MudText>
7-
<MudText Typo="Typo.h6">@Component?.Description</MudText>
7+
<MudText Class="pa-2" Align="Align.Center" Typo="Typo.h6">@Component?.Description</MudText>
88
</div>
99

1010
@if (FadeIn)

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,8 @@
99
<ExampleCard ComponentName="Barcode" ExampleName="BarcodeExample1" Title="Usage" AliasName="usage" Description="Barcode shows different bar codes like QR code with defined value.">
1010
<BarcodeExample1 />
1111
</ExampleCard>
12+
13+
<ExampleCard ComponentName="Barcode" ExampleName="BarcodeExample2" Title="Centered Icons" AliasName="icons" Description="ChildContent parameter allows to show an component at the center of the QrCode.">
14+
<BarcodeExample2 />
15+
</ExampleCard>
1216
</ExamplePage>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@namespace MudExtensions.Docs.Examples
2+
@using ZXing;
3+
4+
<MudGrid>
5+
<MudItem xs="12" sm="6" lg="4" Class="d-flex flex-column justify-center gap-4">
6+
<MudText>Icon Content</MudText>
7+
<MudBarcode Value="https://mudblazor.com" Width="200" Height="200" BarcodeFormat="BarcodeFormat.QR_CODE" Clickable="true">
8+
<ChildContent>
9+
<MudIcon Style="background: white; border-radius: 4px" Color="Color.Primary" Icon="@Icons.Custom.Brands.MudBlazor" />
10+
</ChildContent>
11+
</MudBarcode>
12+
</MudItem>
13+
14+
<MudItem xs="12" sm="6" lg="4" Class="d-flex flex-column justify-center gap-4">
15+
<MudText>Image Content</MudText>
16+
<MudBarcode Value="https://dotnet.microsoft.com/en-us/" Width="200" Height="200" BarcodeFormat="BarcodeFormat.QR_CODE" Clickable="true">
17+
<ChildContent>
18+
<MudImage Src="https://www.yusufsezer.com.tr/dosyalar/2019/03/net.png" Height="24" Width="24" />
19+
</ChildContent>
20+
</MudBarcode>
21+
</MudItem>
22+
23+
</MudGrid>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
<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>
55
<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>
66
<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>
7+
<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>
78
</MudGrid>

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

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
11
@namespace MudExtensions
22
@inherits MudComponentBase
33

4-
<a href="@(Clickable ? Value : null)" target="@Target">
5-
@{
6-
var content = GetCode();
7-
}
8-
@if (content != null)
9-
{
10-
var viewBoxWidth = @content.ModuleSizeX * content.Columns;
11-
var viewBoxHeight = @content.ModuleSizeY * content.Rows;
4+
<div class="@OuterClass" style="@OuterStylename">
5+
<a class="absolute mud-barcode-link" href="@(Clickable ? Value : null)" target="@Target">
6+
@{
7+
var content = GetCode();
8+
}
9+
@if (content != null)
10+
{
11+
var viewBoxWidth = @content.ModuleSizeX * content.Columns;
12+
var viewBoxHeight = @content.ModuleSizeY * content.Rows;
1213

13-
<svg width="@Width" height="@Height" class="@Class" style="background-color:@BackgroundColor; @Style" viewBox="0 0 @viewBoxWidth @viewBoxHeight">
14-
@for (int y = 0; y < content.Rows; y++)
15-
{
16-
@for (int x = 0; x < content.Columns; x++)
14+
<svg width="@Width" height="@Height" class="@Class" style="background-color:@BackgroundColor; @Style" viewBox="0 0 @viewBoxWidth @viewBoxHeight">
15+
@for (int y = 0; y < content.Rows; y++)
1716
{
18-
@if (content[x, y])
17+
@for (int x = 0; x < content.Columns; x++)
1918
{
20-
<rect class="d-flex align-center justify-center" width="@content.ModuleSizeX" height="@content.ModuleSizeY" style="@($"fill:{Color}; stroke-width:{StrokeWidth}px; stroke:{Color}")"
21-
x="@(x * content.ModuleSizeX)" y="@(y * content.ModuleSizeY)" />
19+
@if (content[x, y])
20+
{
21+
<rect class="d-flex align-center justify-center" width="@content.ModuleSizeX" height="@content.ModuleSizeY" style="@($"fill:{Color}; stroke-width:{StrokeWidth}px; stroke:{Color}")"
22+
x="@(x * content.ModuleSizeX)" y="@(y * content.ModuleSizeY)" />
23+
}
2224
}
2325
}
24-
}
25-
</svg>
26-
}
27-
else
28-
{
29-
<MudImage Height="Height" Width="Width" Class="@Class" Style="@Style" />
30-
}
31-
</a>
26+
</svg>
27+
}
28+
else
29+
{
30+
<MudImage Src="@EmptySrc" Height="Height" Width="Width" Class="@Class" Style="@Style" />
31+
}
32+
<div class="absolute mud-barcode-child" style="top:50%; left:50%; transform: translate(-50%, -50%)">
33+
@ChildContent
34+
</div>
35+
</a>
36+
</div>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
using Microsoft.AspNetCore.Components;
22
using MudBlazor;
3+
using MudBlazor.Utilities;
34
using ZXing;
45

56
namespace MudExtensions
@@ -9,6 +10,15 @@ namespace MudExtensions
910
/// </summary>
1011
public partial class MudBarcode : MudComponentBase
1112
{
13+
/// <summary>
14+
///
15+
/// </summary>
16+
protected string? OuterStylename =>
17+
new StyleBuilder()
18+
.AddStyle("height", Height + "px")
19+
.AddStyle("width", Width + "px")
20+
.AddStyle(OuterStyle)
21+
.Build();
1222
private static readonly Writer Encoder = new MultiFormatWriter();
1323

1424
/// <summary>
@@ -17,6 +27,24 @@ public partial class MudBarcode : MudComponentBase
1727
[Parameter]
1828
public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
1929

30+
/// <summary>
31+
/// The outer div classname.
32+
/// </summary>
33+
[Parameter]
34+
public string? OuterClass { get; set; }
35+
36+
/// <summary>
37+
/// The outer div classname.
38+
/// </summary>
39+
[Parameter]
40+
public string? OuterStyle { get; set; }
41+
42+
/// <summary>
43+
/// The image source shows when the value is null.
44+
/// </summary>
45+
[Parameter]
46+
public string? EmptySrc { get; set; }
47+
2048
/// <summary>
2149
/// If true, it goes to specified href when click.
2250
/// </summary>
@@ -83,6 +111,12 @@ public partial class MudBarcode : MudComponentBase
83111
[Parameter]
84112
public EventCallback<string> ValueChanged { get; set; }
85113

114+
/// <summary>
115+
/// Shows a component inside the barcode.
116+
/// </summary>
117+
[Parameter]
118+
public RenderFragment? ChildContent { get; set; }
119+
86120
/// <summary>
87121
/// Barcode process that returns BarcodeResult. Returns null if value is also null or empty.
88122
/// </summary>

0 commit comments

Comments
 (0)