From e32daf05876ea08cb58c7ba1ab14a3c1b14798d2 Mon Sep 17 00:00:00 2001 From: Matthew Parker Date: Mon, 12 Feb 2024 01:58:03 +0000 Subject: [PATCH] Added playground and docs pages --- .../BlazorAutoNet8.Client.csproj | 4 - .../Pages/Playground.razor | 123 ++++++++ .../Components/Pages/Docs.razor | 285 ++++++++++++++++++ src/BlazorAutoNet8/BlazorAutoNet8/Program.cs | 4 +- 4 files changed, 410 insertions(+), 6 deletions(-) create mode 100644 src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor create mode 100644 src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Docs.razor diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/BlazorAutoNet8.Client.csproj b/src/BlazorAutoNet8/BlazorAutoNet8.Client/BlazorAutoNet8.Client.csproj index c3281fc..82534a1 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8.Client/BlazorAutoNet8.Client.csproj +++ b/src/BlazorAutoNet8/BlazorAutoNet8.Client/BlazorAutoNet8.Client.csproj @@ -16,8 +16,4 @@ - - - - diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor new file mode 100644 index 0000000..90d0c40 --- /dev/null +++ b/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor @@ -0,0 +1,123 @@ +@page "/playground" +@rendermode RenderMode.InteractiveWebAssembly + +Playground | PinguApps.Blazor.QRCode + +

Playground

+ +

+ 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. +

+ +

+ 📃 Contents +

+ + + +

+ ✅ Features +

+ + + +

+ 🔧 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. +

+ + + + + + + + + + + + + + + +
TypeRequired?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. +

+ + + + + + + + + + + + + + + + + +
TypeRequired?Default ValuePossible Values
ErrorCorrection❌ErrorCorrection.Low + ErrorCorrection.Low
+ ErrorCorrection.Medium
+ ErrorCorrection.Quartile
+ ErrorCorrection.High
+
+ +

+ Size +

+

+ Sets the width and height of the generated SVG. +

+ + + + + + + + + + + + + + + + + +
TypeRequired?Default ValuePossible Values
String❌100%Any valid html size for width & height
+ +

+ PaddingCells +

+

+ The number of empty cells as padding around the QR code. +

+ + + + + + + + + + + + + + + +
TypeRequired?Default Value
Int❌1
+ +

+ ForeColor +

+

+ Sets the foreground color of the QR code. +

+ + + + + + + + + + + + + + + + + +
TypeRequired?Default ValuePossible Values
String❌#000000Any valid html color
+ +

+ BackColor +

+

+ Sets the background color of the QR code. +

+ + + + + + + + + + + + + + + + + +
TypeRequired?Default ValuePossible Values
String❌#ffffffAny 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. +

+ + + + + + + + + + + + + + + +
TypeRequired?Default Value
String❌QR Code
+ +

+ Class +

+

+ Optional CSS class to be applied to the QR code. +

+ + + + + + + + + + + + + + + +
TypeRequired?Default Value
String?❌null
+ +

+ Id +

+

+ Optional ID to be applied to the QR code. +

+ + + + + + + + + + + + + + + +
TypeRequired?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();