doc: 增加二维码生成示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor

@@ -0,0 +1,75 @@
+@namespace BootstrapBlazor.Server.Components.Samples.Tutorials
+@page "/tutorials/barcode"
+
+<div class="bc-main">
+    <div class="row g-3">
+        <div class="col-12 col-sm-6">
+            <h5>选择一个类型</h5>
+            <div class="bc-type-list">
+                @foreach (var item in _contents)
+                {
+                    <span class="@GetItemClassString(item)" @onclick="@(() => OnActiveType(item))">@item</span>
+                }
+            </div>
+            <div class="bc-content-main">
+                @if (_activeContentType == "Text")
+                {
+                    <ValidateForm Model="_textContent" OnValidSubmit="OnTextSubmit">
+                        <EditorForm TModel="TextContent" ItemsPerRow="1">
+                            <FieldItems>
+                                <EditorItem @bind-Field="@context.Content" Rows="3" Text="Text"></EditorItem>
+                            </FieldItems>
+                        </EditorForm>
+                        <div class="form-footer">
+                            <Button ButtonType="@ButtonType.Submit" Text="Submit" />
+                        </div>
+                    </ValidateForm>
+                }
+                else if (_activeContentType == "Url")
+                {
+                    <ValidateForm Model="_urlContent" OnValidSubmit="OnUrlSubmit">
+                        <EditorForm TModel="TextContent" ItemsPerRow="1">
+                            <FieldItems>
+                                <EditorItem @bind-Field="@context.Content" PlaceHolder="https://" Text="Url"></EditorItem>
+                            </FieldItems>
+                        </EditorForm>
+                        <div class="form-footer">
+                            <Button ButtonType="@ButtonType.Submit" Text="Submit" />
+                        </div>
+                    </ValidateForm>
+                }
+                else if (_activeContentType == "Wi-Fi")
+                {
+                    <ValidateForm Model="_wifiContent" OnValidSubmit="OnWiFiSubmit">
+                        <EditorForm TModel="WiFiContent" ItemsPerRow="1">
+                            <FieldItems>
+                                <EditorItem @bind-Field="@context.Password" ComponentType="typeof(BootstrapPassword)"></EditorItem>
+                            </FieldItems>
+                        </EditorForm>
+                        <div class="form-footer">
+                            <Button ButtonType="@ButtonType.Submit" Text="Submit" />
+                        </div>
+                    </ValidateForm>
+                }
+                else if (_activeContentType == "Email")
+                {
+                    <ValidateForm Model="_emailContent" OnValidSubmit="OnEmailSubmit">
+                        <EditorForm TModel="EmailContent" ItemsPerRow="1"></EditorForm>
+                        <div class="form-footer">
+                            <Button ButtonType="@ButtonType.Submit" Text="Submit" />
+                        </div>
+                    </ValidateForm>
+                }
+            </div>
+        </div>
+        <div class="col-12 col-sm-6">
+            <h5>预览</h5>
+            <div class="bc-qr-content">
+                @if (!string.IsNullOrEmpty(_content))
+                {
+                    <QRCode Content="@_content"></QRCode>
+                }
+            </div>
+        </div>
+    </div>
+</div>

src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor.cs

@@ -0,0 +1,65 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
+
+/// <summary>
+/// BarCodeGenerator 组件示例代码
+/// </summary>
+public partial class BarCodeGenerator
+{
+    private string _activeContentType = "Text";
+
+    private readonly List<string> _contents = ["Text", "Url", "Wi-Fi", "Email"];
+
+    private readonly WiFiContent _wifiContent = new();
+
+    private readonly EmailContent _emailContent = new();
+
+    private readonly TextContent _textContent = new();
+
+    private readonly TextContent _urlContent = new();
+
+    private string? _content;
+
+    private string? GetItemClassString(string item) => CssBuilder.Default("bc-type-item")
+        .AddClass("active", _activeContentType == item)
+        .Build();
+
+    private void OnActiveType(string item)
+    {
+        _activeContentType = item;
+    }
+
+    private Task OnTextSubmit(EditContext context)
+    {
+        _content = _textContent.ToString();
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private Task OnUrlSubmit(EditContext context)
+    {
+        _content = _urlContent.ToString();
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private Task OnWiFiSubmit(EditContext context)
+    {
+        _content = _wifiContent.ToString();
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private Task OnEmailSubmit(EditContext context)
+    {
+        _content = _emailContent.ToString();
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+}

src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor.css

@@ -0,0 +1,19 @@
+.bc-type-list {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.bc-type-item {
+    padding: .25rem 1rem;
+    border: 2px solid var(--bb-primary-color);
+    border-radius: 50px;
+    line-height: 1.8em;
+    cursor: pointer;
+}
+
+    .bc-type-item.active {
+        background-color: var(--bb-primary-color);
+        color: var(--bs-white);
+    }