diff --git a/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj b/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj
index c7ab7254..4d293711 100644
--- a/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj
+++ b/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj
@@ -25,6 +25,8 @@
+
+
diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor
new file mode 100644
index 00000000..986f9d98
--- /dev/null
+++ b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor
@@ -0,0 +1,16 @@
+@namespace MudExtensions
+@inherits MudComponentBase
+
+
+ @{
+ var content = GetQrCode();
+ }
+ @if (content != null)
+ {
+
+ }
+ else
+ {
+
+ }
+
\ No newline at end of file
diff --git a/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs
new file mode 100644
index 00000000..b4e5dc85
--- /dev/null
+++ b/CodeBeam.MudBlazor.Extensions/Components/QrGenerator/MudQrCode.razor.cs
@@ -0,0 +1,82 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using SkiaSharp;
+using ZXing;
+using ZXing.QrCode;
+using ZXing.SkiaSharp;
+
+namespace MudExtensions
+{
+ public partial class MudQrCode : MudComponentBase
+ {
+ [Parameter]
+ public string Value { get; set; }
+
+ [Parameter]
+ public EventCallback ValueChanged { get; set; }
+
+ [Parameter]
+ public BarcodeFormat BarcodeFormat { get; set; } = BarcodeFormat.QR_CODE;
+
+ [Parameter]
+ public int Width { get; set; } = 200;
+
+ [Parameter]
+ public int Height { get; set; } = 200;
+
+ ///
+ /// If true, it goes to specified href when click.
+ ///
+ [Parameter]
+ public bool Clickable { get; set; }
+
+ [Parameter]
+ public string Target { get; set; } = "_blank";
+
+ [Parameter]
+ public string ErrorText { get; set; }
+
+ ///
+ /// If true, no text show on barcode format.
+ ///
+ [Parameter]
+ public bool PureBarcode { get; set; }
+
+ protected byte[] GetQrCode()
+ {
+ if (string.IsNullOrEmpty(Value))
+ {
+ return null;
+ }
+
+ try
+ {
+ BarcodeWriter writer = new BarcodeWriter
+ {
+ Format = BarcodeFormat,
+ Options = new QrCodeEncodingOptions
+ {
+ Width = Width,
+ Height = Height,
+ PureBarcode = PureBarcode,
+ }
+ };
+
+ var qrCodeImage = writer.Write(Value);
+
+ using (var stream = new MemoryStream())
+ {
+ qrCodeImage.Encode(stream, SKEncodedImageFormat.Png, 100);
+ ErrorText = null;
+ return stream.ToArray();
+ }
+ }
+ catch (Exception ex)
+ {
+ ErrorText = ex.Message;
+ return null;
+ }
+ }
+
+ }
+}
diff --git a/ComponentViewer.Docs/Pages/Components/ApiPage.razor b/ComponentViewer.Docs/Pages/Components/ApiPage.razor
index 496f9753..9ecffa66 100644
--- a/ComponentViewer.Docs/Pages/Components/ApiPage.razor
+++ b/ComponentViewer.Docs/Pages/Components/ApiPage.razor
@@ -341,6 +341,27 @@
+
+ x.Name).ToList())">
+
+ Name
+ Type
+ Default
+
+
+ @context.Name
+ @context.PropertyType.Name
+
+ @if (true)
+ {
+ MudQrCode instance = new();
+ @(context.GetValue(instance)?.ToString() ?? "null")
+ }
+
+
+
+
+
x.Name).ToList())">
diff --git a/ComponentViewer.Docs/Pages/Components/QrCodePage.razor b/ComponentViewer.Docs/Pages/Components/QrCodePage.razor
new file mode 100644
index 00000000..e0ff3340
--- /dev/null
+++ b/ComponentViewer.Docs/Pages/Components/QrCodePage.razor
@@ -0,0 +1,8 @@
+@page "/mudqrcode"
+@using ComponentViewer.Docs.Pages.Examples
+
+
+
+
+
+
diff --git a/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor b/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor
new file mode 100644
index 00000000..2ab6d6bc
--- /dev/null
+++ b/ComponentViewer.Docs/Pages/Examples/QrCodeExample1.razor
@@ -0,0 +1,29 @@
+@using ZXing;
+
+
+
+
+
+
+
+
+
+
+
+
+ @(_qrCode.ErrorText == null ? null : "Error: " + _qrCode.ErrorText)
+
+
+
+
+
+
+@code {
+ MudQrCode _qrCode;
+ string _qrValue;
+ int _width = 200;
+ int _height = 200;
+ BarcodeFormat _barcodeFormat = BarcodeFormat.QR_CODE;
+ bool _clickable = false;
+ bool _pureBarcode = false;
+}
diff --git a/ComponentViewer.Docs/Pages/Index.razor b/ComponentViewer.Docs/Pages/Index.razor
index 1a2eda45..bccfc063 100644
--- a/ComponentViewer.Docs/Pages/Index.razor
+++ b/ComponentViewer.Docs/Pages/Index.razor
@@ -7,7 +7,7 @@
-
+
@@ -229,6 +229,7 @@
new("MudPage", "A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan."),
new("MudPasswordField", "A specialized textfield that designed for working easily with passwords."),
new("MudPopup", "A mobile friendly popup content for several situations."),
+ new("MudQrCode", "A QR code viewer with defined value."),
new("MudScrollbar", "Handle all or selected scrollbar styles with a Mud component."),
new("MudSpeedDial", "An expandable fab component."),
new("MudSplitter", "A resizeable content splitter."),
diff --git a/ComponentViewer.Docs/Shared/MainLayout.razor b/ComponentViewer.Docs/Shared/MainLayout.razor
index 09f5b91d..8690206d 100644
--- a/ComponentViewer.Docs/Shared/MainLayout.razor
+++ b/ComponentViewer.Docs/Shared/MainLayout.razor
@@ -51,6 +51,7 @@
Page & Section
PasswordField
Popup
+ QrCode
Scrollbar
SelectExtended
SpeedDial