+ Changing the QR code requires an interactive rendering mode, and so this page is rendered using WASM.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @foreach (var ecValue in Enum.GetValues(typeof(ErrorCorrection)))
+ {
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ Settings SettingsModel { get; set; } = new();
+
+ string Data { get; set; } = default!;
+ ErrorCorrection ErrorCorrection { get; set; }
+ string? Image { get; set; }
+ string Size { get; set; } = default!;
+ int PaddingCells { get; set; }
+ string ForeColor { get; set; } = default!;
+ string BackColor { get; set; } = default!;
+ string AriaDescription { get; set; } = default!;
+ string? Class { get; set; }
+ string? Id { get; set; }
+
+ protected override void OnInitialized()
+ {
+ base.OnInitialized();
+
+ UpdateQRCode();
+ }
+
+ void UpdateQRCode()
+ {
+ Data = SettingsModel.Data;
+ ErrorCorrection = SettingsModel.ErrorCorrection;
+ Image = SettingsModel.Image;
+ Size = SettingsModel.Size;
+ PaddingCells = SettingsModel.PaddingCells;
+ ForeColor = SettingsModel.ForeColor;
+ BackColor = SettingsModel.BackColor;
+ AriaDescription = SettingsModel.AriaDescription;
+ Class = SettingsModel.Class;
+ Id = SettingsModel.Id;
+ }
+
+ public class Settings
+ {
+ public string Data { get; set; } = "Welcome to the playground, where you are able to customise the QR code generated on this page to test the true capabilities of the library.";
+ public ErrorCorrection ErrorCorrection { get; set; } = ErrorCorrection.Quartile;
+ public string? Image { get; set; }
+ public string Size { get; set; } = "200px";
+ public int PaddingCells { get; set; } = 1;
+ public string ForeColor { get; set; } = "#000000";
+ public string BackColor { get; set; } = "#ffffff";
+ public string AriaDescription { get; set; } = "QR Code";
+ public string? Class { get; set; }
+ public string? Id { get; set; }
+ }
+}
\ No newline at end of file
diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Docs.razor b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Docs.razor
new file mode 100644
index 0000000..a4091d7
--- /dev/null
+++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Docs.razor
@@ -0,0 +1,285 @@
+@page "/docs"
+
+Docs | PinguApps.Blazor.QRCode
+
+
Docs
+
+
+ A Blazor component for generating QR codes. This component encodes specified data into a QR code image, which can be customized in terms of size, colors, and error correction level. The QR code is generated as an SVG for optimal scalability and clarity.
+
JavaScript-Free: No dependency on JavaScript, ensuring full functionality even in environments where JavaScript is disabled or not supported.
+
Static SSR & Prerendering Compatibility: Seamlessly works with static SSR (Server-Side Rendering) and prerendering scenarios, making it suitable for the static SSR pages of the new .NET Identity template as a 2FA QR code generator.
+
Option to add logo or image: Allows the ability to add your own image to the center of the QR Code. If using this then favour selecting higher error correction values.
+
Adjustable Error Correction: Allows setting the error correction level (Low, Medium, Quartile, High) to make the QR code decodable even when partially damaged or obscured.
+
Dynamic Data Encoding: Capable of encoding provided string data into the QR code, facilitating versatile usage scenarios.
+
Customizable Size: Supports setting the width and height of the generated SVG QR code, with a default of "100%" for flexible integration into various UI designs.
+
Configurable Padding: Allows specifying the number of empty cells as padding around the QR code to adjust its appearance, with a default setting of 1.
+
Foreground and Background Color Customization: Offers options to set the foreground and background colors of the QR code, defaulting to black (#000000) and white (#ffffff), respectively.
+
Accessibility Support: Enhances usability for screen reader users with an accessible description for the QR code, which is used as the aria-label attribute value of the SVG element.
+
Styling Options: Supports optional CSS class and ID attributes for the QR code, enabling further customization and styling flexibility.
+
+
+
+ 🔧 Installation
+
+
+
+ To install the package, you can either install with the following command: Install-Package PinguApps.Blazor.QRCode Or you can search in the Nuget package manager for PinguApps.Blazor.QRCode.
+
+
+
+ 🚀 Usage
+
+
+
+ Once the package is installed, you will want to add the following statement to your _Imports.razor:
+
+
+
+
+
+ Now you can simply use the component:
+
+
+")" />
+
+
+ 🟣 Parameters
+
+
+
+ Data
+
+
+ The data to be encoded into the QR code.
+
+
+
+
+
Type
+
Required?
+
Default Value
+
+
+
+
+
String
+
❌
+
string.Empty
+
+
+
+
+
+ ErrorCorrection
+
+
+ Sets the error correction level for the QR code, which enables it to be decoded even if partially damaged or obscured.
+
+ Sets the width and height of the generated SVG.
+
+
+
+
+
Type
+
Required?
+
Default Value
+
Possible Values
+
+
+
+
+
String
+
❌
+
100%
+
Any valid html size for width & height
+
+
+
+
+
+ PaddingCells
+
+
+ The number of empty cells as padding around the QR code.
+
+
+
+
+
Type
+
Required?
+
Default Value
+
+
+
+
+
Int
+
❌
+
1
+
+
+
+
+
+ ForeColor
+
+
+ Sets the foreground color of the QR code.
+
+
+
+
+
Type
+
Required?
+
Default Value
+
Possible Values
+
+
+
+
+
String
+
❌
+
#000000
+
Any valid html color
+
+
+
+
+
+ BackColor
+
+
+ Sets the background color of the QR code.
+
+
+
+
+
Type
+
Required?
+
Default Value
+
Possible Values
+
+
+
+
+
String
+
❌
+
#ffffff
+
Any valid html color
+
+
+
+
+
+ AriaDescription
+
+
+ Provides an accessible description for the QR code, enhancing usability for screen reader users. This description is used as the aria-label attribute value of the QR code's SVG element, offering context or details about the QR code's content or purpose.
+
+
+
+
+
Type
+
Required?
+
Default Value
+
+
+
+
+
String
+
❌
+
QR Code
+
+
+
+
+
+ Class
+
+
+ Optional CSS class to be applied to the QR code.
+
+
+
+
+
Type
+
Required?
+
Default Value
+
+
+
+
+
String?
+
❌
+
null
+
+
+
+
+
+ Id
+
+
+ Optional ID to be applied to the QR code.
+
+
+
+
+
Type
+
Required?
+
Default Value
+
+
+
+
+
String?
+
❌
+
null
+
+
+
\ No newline at end of file
diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Program.cs b/src/BlazorAutoNet8/BlazorAutoNet8/Program.cs
index b7e1ce5..9965a56 100644
--- a/src/BlazorAutoNet8/BlazorAutoNet8/Program.cs
+++ b/src/BlazorAutoNet8/BlazorAutoNet8/Program.cs
@@ -1,4 +1,4 @@
-//using BlazorAutoNet8.Client.Pages;
+using BlazorAutoNet8.Client.Pages;
using BlazorAutoNet8.Components;
var builder = WebApplication.CreateBuilder(args);
@@ -30,6 +30,6 @@
app.MapRazorComponents()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
- ;//.AddAdditionalAssemblies(typeof(Counter).Assembly);
+ .AddAdditionalAssemblies(typeof(Playground).Assembly);
app.Run();