Skip to content

Commit e10b46d

Browse files
mckaragozmckaragoz
authored
New Component: MudQrCode (#172)
* Basic Start of QrGenerator * Docs and API * Finalize MudQrCode
1 parent 88f8462 commit e10b46d

File tree

8 files changed

+161
-1
lines changed

8 files changed

+161
-1
lines changed

‎CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
<PackageReference Include="BuildBundlerMinifier" Version="3.2.449" />
2626
<PackageReference Include="CsvHelper" Version="30.0.1" />
2727
<PackageReference Include="MudBlazor" Version="6.1.9" />
28+
<PackageReference Include="ZXing.Net" Version="0.16.9" />
29+
<PackageReference Include="ZXing.Net.Bindings.SkiaSharp" Version="0.16.13" />
2830
</ItemGroup>
2931

3032
<ItemGroup Condition=" '$(TargetFramework)' == 'net6.0' ">

‎CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
4+
<a href="@(Clickable ? Value : null)" target="@Target">
5+
@{
6+
var content = GetQrCode();
7+
}
8+
@if (content != null)
9+
{
10+
<MudImage Src="@(content == null ? null : String.Format("data:image/png;base64,{0}", Convert.ToBase64String(content)))" Height="Height" Width="Width" Class="@Class" Style="@Style" />
11+
}
12+
else
13+
{
14+
<MudImage Height="Height" Width="Width" Class="@Class" Style="@Style" />
15+
}
16+
</a>

‎CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
using Microsoft.AspNetCore.Components;
2+
using MudBlazor;
3+
using SkiaSharp;
4+
using ZXing;
5+
using ZXing.QrCode;
6+
using ZXing.SkiaSharp;
7+
8+
namespace MudExtensions
9+
{
10+
public partial class MudQrCode : MudComponentBase
11+
{
12+
[Parameter]
13+
public string Value { get; set; }
14+
15+
[Parameter]
16+
public EventCallback<string> ValueChanged { get; set; }
17+
18+
[Parameter]
19+
public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
20+
21+
[Parameter]
22+
public int Width { get; set; } = 200;
23+
24+
[Parameter]
25+
public int Height { get; set; } = 200;
26+
27+
/// <summary>
28+
/// If true, it goes to specified href when click.
29+
/// </summary>
30+
[Parameter]
31+
public bool Clickable { get; set; }
32+
33+
[Parameter]
34+
public string Target { get; set; } = "_blank";
35+
36+
[Parameter]
37+
public string ErrorText { get; set; }
38+
39+
/// <summary>
40+
/// If true, no text show on barcode format.
41+
/// </summary>
42+
[Parameter]
43+
public bool PureBarcode { get; set; }
44+
45+
protected byte[] GetQrCode()
46+
{
47+
if (string.IsNullOrEmpty(Value))
48+
{
49+
return null;
50+
}
51+
52+
try
53+
{
54+
BarcodeWriter writer = new BarcodeWriter
55+
{
56+
Format = BarcodeFormat,
57+
Options = new QrCodeEncodingOptions
58+
{
59+
Width = Width,
60+
Height = Height,
61+
PureBarcode = PureBarcode,
62+
}
63+
};
64+
65+
var qrCodeImage = writer.Write(Value);
66+
67+
using (var stream = new MemoryStream())
68+
{
69+
qrCodeImage.Encode(stream, SKEncodedImageFormat.Png, 100);
70+
ErrorText = null;
71+
return stream.ToArray();
72+
}
73+
}
74+
catch (Exception ex)
75+
{
76+
ErrorText = ex.Message;
77+
return null;
78+
}
79+
}
80+
81+
}
82+
}

‎ComponentViewer.Docs/Pages/Components/ApiPage.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -341,6 +341,27 @@
341341
</MudTable>
342342
</ExampleCard>
343343

344+
<ExampleCard Title="Api - MudQrCode" HasExpansionPanel="true">
345+
<MudTable Items="@(typeof(MudQrCode).GetProperties().Where(x => x.Name != "FieldId" && x.Name != "UserAttributes").OrderBy(x => x.Name).ToList())">
346+
<HeaderContent>
347+
<MudTh>Name</MudTh>
348+
<MudTh>Type</MudTh>
349+
<MudTh>Default</MudTh>
350+
</HeaderContent>
351+
<RowTemplate>
352+
<MudTd>@context.Name</MudTd>
353+
<MudTd>@context.PropertyType.Name</MudTd>
354+
<MudTd>
355+
@if (true)
356+
{
357+
MudQrCode instance = new();
358+
<MudText Typo="Typo.body2">@(context.GetValue(instance)?.ToString() ?? "null")</MudText>
359+
}
360+
</MudTd>
361+
</RowTemplate>
362+
</MudTable>
363+
</ExampleCard>
364+
344365
<ExampleCard Title="Api - MudScrollbar" HasExpansionPanel="true">
345366
<MudTable Items="@(typeof(MudScrollbar).GetProperties().Where(x => x.Name != "FieldId" && x.Name != "UserAttributes").OrderBy(x => x.Name).ToList())">
346367
<HeaderContent>

‎ComponentViewer.Docs/Pages/Components/QrCodePage.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@page "/mudqrcode"
2+
@using ComponentViewer.Docs.Pages.Examples
3+
4+
<ExamplePage Title="MudQrCode">
5+
<ExampleCard ExampleName="QrCodeExample1" Title="Usage" Description="QrCode shows the QR with defined value.">
6+
<QrCodeExample1 />
7+
</ExampleCard>
8+
</ExamplePage>

‎ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@using ZXing;
2+
3+
<MudGrid>
4+
<MudItem xs="12" sm="8" Class="d-flex justify-center">
5+
<MudQrCode @ref="_qrCode" @bind-Value="_qrValue" Width="_width" Height="_height" BarcodeFormat="_barcodeFormat" Clickable="_clickable" PureBarcode="_pureBarcode" />
6+
</MudItem>
7+
8+
<MudItem xs="12" sm="4">
9+
<MudStack Spacing="4">
10+
<MudTextField T="string" @bind-Value="_qrValue" Label="Value" Variant="Variant.Outlined" Immediate="true" Margin="Margin.Dense" />
11+
<MudNumericField @bind-Value="_width" Label="Width" Variant="Variant.Outlined" Margin="Margin.Dense" />
12+
<MudNumericField @bind-Value="_height" Label="Height" Variant="Variant.Outlined" Margin="Margin.Dense" />
13+
<MudSelectExtended ItemCollection="@(Enum.GetValues<BarcodeFormat>())" @bind-Value="_barcodeFormat" Label="Barcode Format" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
14+
<MudText Color="Color.Error">@(_qrCode.ErrorText == null ? null : "Error: " + _qrCode.ErrorText)</MudText>
15+
<MudSwitchM3 @bind-Checked="_clickable" Color="Color.Secondary" Label="Clickable" />
16+
<MudSwitchM3 @bind-Checked="_pureBarcode" Color="Color.Secondary" Label="Pure Barcode" />
17+
</MudStack>
18+
</MudItem>
19+
</MudGrid>
20+
21+
@code {
22+
MudQrCode _qrCode;
23+
string _qrValue;
24+
int _width = 200;
25+
int _height = 200;
26+
BarcodeFormat _barcodeFormat = BarcodeFormat.QR_CODE;
27+
bool _clickable = false;
28+
bool _pureBarcode = false;
29+
}

‎ComponentViewer.Docs/Pages/Index.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<MudScrollbar Width="8" Color="primary" HoverColor="secondary" />
99
<MudScrollToTop>
10-
<MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.ArrowUpward" />
10+
<MudFab Color="Color.Secondary" StartIcon="@Icons.Material.Filled.ArrowUpward" />
1111
</MudScrollToTop>
1212

1313
<MudAnimate @ref="_animate" Selector=".card-blur" AnimationType="AnimationType.Blur" Duration="0.3" Value="0" ValueSecondary="120" />
@@ -229,6 +229,7 @@
229229
new("MudPage", "A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan."),
230230
new("MudPasswordField", "A specialized textfield that designed for working easily with passwords."),
231231
new("MudPopup", "A mobile friendly popup content for several situations."),
232+
new("MudQrCode", "A QR code viewer with defined value."),
232233
new("MudScrollbar", "Handle all or selected scrollbar styles with a Mud component."),
233234
new("MudSpeedDial", "An expandable fab component."),
234235
new("MudSplitter", "A resizeable content splitter."),

‎ComponentViewer.Docs/Shared/MainLayout.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
<MudNavLink Href="/mudpage">Page & Section</MudNavLink>
5252
<MudNavLink Href="/mudpasswordfield">PasswordField</MudNavLink>
5353
<MudNavLink Href="/mudpopup">Popup</MudNavLink>
54+
<MudNavLink Href="/mudqrcode">QrCode</MudNavLink>
5455
<MudNavLink Href="/mudscrollbar">Scrollbar</MudNavLink>
5556
<MudNavLink Href="/mudselectextended">SelectExtended</MudNavLink>
5657
<MudNavLink Href="/mudspeeddial">SpeedDial</MudNavLink>

0 commit comments

Comments
 (0)