diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor new file mode 100644 index 00000000000..eb847bb216d --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor @@ -0,0 +1,77 @@ +@namespace BootstrapBlazor.Server.Components.Samples.Tutorials +@inject IStringLocalizer Localizer +@page "/tutorials/barcode" + +
+
+
+
@Localizer["SelectType"]
+
+ @foreach (var item in _contents) + { + @item + } +
+
+ @if (_activeContentType == "Text") + { + + + + + + +
+
+ + } + else if (_activeContentType == "Url") + { + + + + + + +
+
+ + } + else if (_activeContentType == "Wi-Fi") + { + + + + + + +
+
+ + } + else if (_activeContentType == "Email") + { + + +
+
+ + } +
+
+
+
@Localizer["Preview"]
+

@((MarkupString)_desc)

+
+ @if (!string.IsNullOrEmpty(_content)) + { + + } +
+
+
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor.cs new file mode 100644 index 00000000000..051ce61237e --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor.cs @@ -0,0 +1,74 @@ +// 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(argo@live.ca) Website: https://www.blazor.zone + +using Microsoft.AspNetCore.Components.Forms; + +namespace BootstrapBlazor.Server.Components.Samples.Tutorials; + +/// +/// BarCodeGenerator 组件示例代码 +/// +public partial class BarCodeGenerator +{ + private string _activeContentType = "Text"; + + private readonly List _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 _desc => _activeContentType switch + { + "Text" => Localizer["TextDesc"], + "Url" => Localizer["UrlDesc"], + "Wi-Fi" => Localizer["WiFiDesc"], + "Email" => Localizer["EmailDesc"], + _ => string.Empty + }; + + 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; + } +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor.css new file mode 100644 index 00000000000..0a41d8a2a4b --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/BarCodeGenerator.razor.css @@ -0,0 +1,28 @@ +.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); + } + +.bc-qr-content { + border: 2px solid var(--bb-primary-color); + border-radius: var(--bs-border-radius); + padding: .25rem; + display: flex; + height: calc(256px + .5rem + 4px); + width: calc(256px + .5rem + 4px); +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/EmailContent.cs b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/EmailContent.cs new file mode 100644 index 00000000000..c84ebe9cfa9 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/EmailContent.cs @@ -0,0 +1,40 @@ +// 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(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Samples.Tutorials; + +/// +/// EmailContent +/// +public class EmailContent +{ + /// + /// Gets or sets Email + /// + [Required] + public string? Email { get; set; } + + /// + /// Gets or sets Subject + /// + [Required] + public string? Subject { get; set; } + + /// + /// Gets or sets Message + /// + [Required] + [AutoGenerateColumn(Rows = 3)] + public string? Message { get; set; } + + /// + /// + /// + /// + public override string ToString() + { + return $"mailto:{Email}?subject={Uri.EscapeDataString(Subject ?? "")}&body={Uri.EscapeDataString(Message ?? "")}"; + } +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/TextContent.cs b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/TextContent.cs new file mode 100644 index 00000000000..6a1b63fcde3 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/TextContent.cs @@ -0,0 +1,24 @@ +// 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(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Samples.Tutorials; + +/// +/// TextContent +/// +public class TextContent +{ + /// + /// Gets or sets the content. + /// + [Required] + public string? Content { get; set; } + + /// + /// + /// + /// + public override string? ToString() => Content; +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/WiFiAuthentication.cs b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/WiFiAuthentication.cs new file mode 100644 index 00000000000..1797c2ce683 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/WiFiAuthentication.cs @@ -0,0 +1,32 @@ +// 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(argo@live.ca) Website: https://www.blazor.zone + +using System.ComponentModel; + +namespace BootstrapBlazor.Server.Components.Samples.Tutorials; + +/// +/// WiFiAuthentication enum +/// +public enum WiFiAuthentication +{ + /// + /// + /// + [Description("None")] + None, + + /// + /// + /// + [Description("WEP")] + WEP, + + /// + /// + /// + [Description("WPA")] + WPA +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/WiFiContent.cs b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/WiFiContent.cs new file mode 100644 index 00000000000..94fb0935ddc --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/WiFiContent.cs @@ -0,0 +1,48 @@ +// 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(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Samples.Tutorials; + +/// +/// WiFi content class +/// +public class WiFiContent +{ + /// + /// Gets or sets the authentication type. + /// + public WiFiAuthentication Authentication { get; set; } = WiFiAuthentication.WPA; + + /// + /// Gets or sets the SSID. + /// + [Required] + public string? SSID { get; set; } + + /// + /// Gets or sets the password. + /// + [Required] + public string? Password { get; set; } + + /// + /// + /// + /// + public override string ToString() + { + return $"WIFI:S:{EscapeInput(SSID ?? "")};T:{Authentication};P:{Password};;"; + } + + private static string EscapeInput(string content) + { + char[] array = ['\\', ';', ',', ':']; + foreach (char c in array) + { + content = content.Replace(c.ToString(), "\\" + c); + } + return content; + } +} diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index ee1e716d9e3..e8e0184e4ba 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -7108,5 +7108,13 @@ "SubTitle": "An implementation TOTP RFC 6238 and HOTP RFC 4226 Authenticator service.", "BaseUsageTitle": "Basic usage", "BaseUsageIntro": "By calling the Compute method of the ITotpService service instance, you can get the password in the current time window. By calling the Instance.GetRemainingSeconds method, you can display the remaining validity time of the current password. In this example, the progress bar is used for dynamic display." + }, + "BootstrapBlazor.Server.Components.Samples.Tutorials.BarCodeGenerator": { + "SelectType": "Select content type", + "Preview": "Preview", + "TextDesc": "Use your iPhone's camera or the QR code scanning function to scan the QR code below, then open the Safari browser and search for the current text using the default search engine.", + "UrlDesc": "Use your iPhone's camera or the QR code scanning function to scan the QR code below, then open the Safari browser and open the current address", + "WiFiDesc": "Use your iPhone's camera or the QR code scanner to scan the QR code below to automatically join the WiFi network.", + "EmailDesc": "Use your iPhone's camera or the QR code scanner to scan the QR code below, then open the Email app to send an email." } } diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 0b1c05db18e..ede716295d7 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -7108,5 +7108,13 @@ "SubTitle": "实现 TOTP RFC 6238 和 HOTP RFC 4226 认证器服务", "BaseUsageTitle": "基本用法", "BaseUsageIntro": "通过调用 ITotpService 服务实例方法 Compute 得到当前时间窗口内密码, 通过调用 Instance.GetRemainingSeconds 方法可以显示当前密码剩余有效时间，本例中通过进度条进行动态显示" + }, + "BootstrapBlazor.Server.Components.Samples.Tutorials.BarCodeGenerator": { + "SelectType": "选择一个类型", + "Preview": "预览", + "TextDesc": "使用 iPhone 手机相机或者扫描二维码功能扫描下方二维码后，打开 Safari 浏览器使用默认搜索引擎搜索当前文本", + "UrlDesc": "使用 iPhone 手机相机或者扫描二维码功能扫描下方二维码后，打开 Safari 浏览器并且打开当前地址", + "WiFiDesc": "使用 iPhone 手机相机或者扫描二维码功能扫描下方二维码后，自动加入 WiFi 网络", + "EmailDesc": "使用 iPhone 手机相机或者扫描二维码功能扫描下方二维码后，打开 Email 应用发送邮件" } }