Skip to content

Commit 04b67ec

Browse files
ArgoZhangArgoZhang
authored
doc(QRCode): add QRCode app sample (#5932)
* refactor: 增加二维码类型 * doc: 增加二维码生成示例 * refactor: 调整样式 * doc: 增加本地化
1 parent 0d9f89f commit 04b67ec

9 files changed

Lines changed: 339 additions & 0 deletions

File tree

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@namespace BootstrapBlazor.Server.Components.Samples.Tutorials
2+
@inject IStringLocalizer<BarCodeGenerator> Localizer
3+
@page "/tutorials/barcode"
4+
5+
<div class="bc-main">
6+
<div class="row g-3">
7+
<div class="col-12 col-sm-6">
8+
<h5>@Localizer["SelectType"]</h5>
9+
<div class="bc-type-list">
10+
@foreach (var item in _contents)
11+
{
12+
<span class="@GetItemClassString(item)" @onclick="@(() => OnActiveType(item))">@item</span>
13+
}
14+
</div>
15+
<div class="bc-content-main">
16+
@if (_activeContentType == "Text")
17+
{
18+
<ValidateForm Model="_textContent" OnValidSubmit="OnTextSubmit">
19+
<EditorForm TModel="TextContent" ItemsPerRow="1">
20+
<FieldItems>
21+
<EditorItem @bind-Field="@context.Content" Rows="3" Text="Text"></EditorItem>
22+
</FieldItems>
23+
</EditorForm>
24+
<div class="form-footer">
25+
<Button ButtonType="@ButtonType.Submit" Text="Submit" />
26+
</div>
27+
</ValidateForm>
28+
}
29+
else if (_activeContentType == "Url")
30+
{
31+
<ValidateForm Model="_urlContent" OnValidSubmit="OnUrlSubmit">
32+
<EditorForm TModel="TextContent" ItemsPerRow="1">
33+
<FieldItems>
34+
<EditorItem @bind-Field="@context.Content" PlaceHolder="https://" Text="Url"></EditorItem>
35+
</FieldItems>
36+
</EditorForm>
37+
<div class="form-footer">
38+
<Button ButtonType="@ButtonType.Submit" Text="Submit" />
39+
</div>
40+
</ValidateForm>
41+
}
42+
else if (_activeContentType == "Wi-Fi")
43+
{
44+
<ValidateForm Model="_wifiContent" OnValidSubmit="OnWiFiSubmit">
45+
<EditorForm TModel="WiFiContent" ItemsPerRow="1">
46+
<FieldItems>
47+
<EditorItem @bind-Field="@context.Password" ComponentType="typeof(BootstrapPassword)"></EditorItem>
48+
</FieldItems>
49+
</EditorForm>
50+
<div class="form-footer">
51+
<Button ButtonType="@ButtonType.Submit" Text="Submit" />
52+
</div>
53+
</ValidateForm>
54+
}
55+
else if (_activeContentType == "Email")
56+
{
57+
<ValidateForm Model="_emailContent" OnValidSubmit="OnEmailSubmit">
58+
<EditorForm TModel="EmailContent" ItemsPerRow="1"></EditorForm>
59+
<div class="form-footer">
60+
<Button ButtonType="@ButtonType.Submit" Text="Submit" />
61+
</div>
62+
</ValidateForm>
63+
}
64+
</div>
65+
</div>
66+
<div class="col-12 col-sm-6">
67+
<h5>@Localizer["Preview"]</h5>
68+
<p>@((MarkupString)_desc)</p>
69+
<div class="bc-qr-content">
70+
@if (!string.IsNullOrEmpty(_content))
71+
{
72+
<QRCode Content="@_content" Width="256"></QRCode>
73+
}
74+
</div>
75+
</div>
76+
</div>
77+
</div>

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
5+
6+
using Microsoft.AspNetCore.Components.Forms;
7+
8+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
9+
10+
/// <summary>
11+
/// BarCodeGenerator 组件示例代码
12+
/// </summary>
13+
public partial class BarCodeGenerator
14+
{
15+
private string _activeContentType = "Text";
16+
17+
private readonly List<string> _contents = ["Text", "Url", "Wi-Fi", "Email"];
18+
19+
private readonly WiFiContent _wifiContent = new();
20+
21+
private readonly EmailContent _emailContent = new();
22+
23+
private readonly TextContent _textContent = new();
24+
25+
private readonly TextContent _urlContent = new();
26+
27+
private string? _content;
28+
29+
private string _desc => _activeContentType switch
30+
{
31+
"Text" => Localizer["TextDesc"],
32+
"Url" => Localizer["UrlDesc"],
33+
"Wi-Fi" => Localizer["WiFiDesc"],
34+
"Email" => Localizer["EmailDesc"],
35+
_ => string.Empty
36+
};
37+
38+
private string? GetItemClassString(string item) => CssBuilder.Default("bc-type-item")
39+
.AddClass("active", _activeContentType == item)
40+
.Build();
41+
42+
private void OnActiveType(string item)
43+
{
44+
_activeContentType = item;
45+
}
46+
47+
private Task OnTextSubmit(EditContext context)
48+
{
49+
_content = _textContent.ToString();
50+
StateHasChanged();
51+
return Task.CompletedTask;
52+
}
53+
54+
private Task OnUrlSubmit(EditContext context)
55+
{
56+
_content = _urlContent.ToString();
57+
StateHasChanged();
58+
return Task.CompletedTask;
59+
}
60+
61+
private Task OnWiFiSubmit(EditContext context)
62+
{
63+
_content = _wifiContent.ToString();
64+
StateHasChanged();
65+
return Task.CompletedTask;
66+
}
67+
68+
private Task OnEmailSubmit(EditContext context)
69+
{
70+
_content = _emailContent.ToString();
71+
StateHasChanged();
72+
return Task.CompletedTask;
73+
}
74+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.bc-type-list {
2+
display: flex;
3+
align-items: center;
4+
gap: 0.5rem 0.5rem;
5+
margin-bottom: 1rem;
6+
}
7+
8+
.bc-type-item {
9+
padding: .25rem 1rem;
10+
border: 2px solid var(--bb-primary-color);
11+
border-radius: 50px;
12+
line-height: 1.8em;
13+
cursor: pointer;
14+
}
15+
16+
.bc-type-item.active {
17+
background-color: var(--bb-primary-color);
18+
color: var(--bs-white);
19+
}
20+
21+
.bc-qr-content {
22+
border: 2px solid var(--bb-primary-color);
23+
border-radius: var(--bs-border-radius);
24+
padding: .25rem;
25+
display: flex;
26+
height: calc(256px + .5rem + 4px);
27+
width: calc(256px + .5rem + 4px);
28+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/EmailContent.cs‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
7+
8+
/// <summary>
9+
/// EmailContent
10+
/// </summary>
11+
public class EmailContent
12+
{
13+
/// <summary>
14+
/// Gets or sets Email
15+
/// </summary>
16+
[Required]
17+
public string? Email { get; set; }
18+
19+
/// <summary>
20+
/// Gets or sets Subject
21+
/// </summary>
22+
[Required]
23+
public string? Subject { get; set; }
24+
25+
/// <summary>
26+
/// Gets or sets Message
27+
/// </summary>
28+
[Required]
29+
[AutoGenerateColumn(Rows = 3)]
30+
public string? Message { get; set; }
31+
32+
/// <summary>
33+
/// <inheritdoc/>
34+
/// </summary>
35+
/// <returns></returns>
36+
public override string ToString()
37+
{
38+
return $"mailto:{Email}?subject={Uri.EscapeDataString(Subject ?? "")}&body={Uri.EscapeDataString(Message ?? "")}";
39+
}
40+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/TextContent.cs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
7+
8+
/// <summary>
9+
/// TextContent
10+
/// </summary>
11+
public class TextContent
12+
{
13+
/// <summary>
14+
/// Gets or sets the content.
15+
/// </summary>
16+
[Required]
17+
public string? Content { get; set; }
18+
19+
/// <summary>
20+
/// <inheritdoc/>
21+
/// </summary>
22+
/// <returns></returns>
23+
public override string? ToString() => Content;
24+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/WiFiAuthentication.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
5+
6+
using System.ComponentModel;
7+
8+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
9+
10+
/// <summary>
11+
/// WiFiAuthentication enum
12+
/// </summary>
13+
public enum WiFiAuthentication
14+
{
15+
/// <summary>
16+
///
17+
/// </summary>
18+
[Description("None")]
19+
None,
20+
21+
/// <summary>
22+
///
23+
/// </summary>
24+
[Description("WEP")]
25+
WEP,
26+
27+
/// <summary>
28+
///
29+
/// </summary>
30+
[Description("WPA")]
31+
WPA
32+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/BarCodeGenerator/WiFiContent.cs‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials;
7+
8+
/// <summary>
9+
/// WiFi content class
10+
/// </summary>
11+
public class WiFiContent
12+
{
13+
/// <summary>
14+
/// Gets or sets the authentication type.
15+
/// </summary>
16+
public WiFiAuthentication Authentication { get; set; } = WiFiAuthentication.WPA;
17+
18+
/// <summary>
19+
/// Gets or sets the SSID.
20+
/// </summary>
21+
[Required]
22+
public string? SSID { get; set; }
23+
24+
/// <summary>
25+
/// Gets or sets the password.
26+
/// </summary>
27+
[Required]
28+
public string? Password { get; set; }
29+
30+
/// <summary>
31+
/// <inheritdoc/>
32+
/// </summary>
33+
/// <returns></returns>
34+
public override string ToString()
35+
{
36+
return $"WIFI:S:{EscapeInput(SSID ?? "")};T:{Authentication};P:{Password};;";
37+
}
38+
39+
private static string EscapeInput(string content)
40+
{
41+
char[] array = ['\\', ';', ',', ':'];
42+
foreach (char c in array)
43+
{
44+
content = content.Replace(c.ToString(), "\\" + c);
45+
}
46+
return content;
47+
}
48+
}

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7108,5 +7108,13 @@
71087108
"SubTitle": "An implementation TOTP RFC 6238 and HOTP RFC 4226 Authenticator service.",
71097109
"BaseUsageTitle": "Basic usage",
71107110
"BaseUsageIntro": "By calling the <code>Compute</code> method of the <code>ITotpService</code> service instance, you can get the password in the current time window. By calling the <code>Instance.GetRemainingSeconds</code> method, you can display the remaining validity time of the current password. In this example, the progress bar is used for dynamic display."
7111+
},
7112+
"BootstrapBlazor.Server.Components.Samples.Tutorials.BarCodeGenerator": {
7113+
"SelectType": "Select content type",
7114+
"Preview": "Preview",
7115+
"TextDesc": "Use your iPhone's camera or the QR code scanning function to scan the QR code below, then open the <code>Safari</code> browser and search for the current text using the default search engine.",
7116+
"UrlDesc": "Use your iPhone's camera or the QR code scanning function to scan the QR code below, then open the <code>Safari</code> browser and open the current address",
7117+
"WiFiDesc": "Use your iPhone's camera or the QR code scanner to scan the QR code below to automatically join the <code>WiFi</code> network.",
7118+
"EmailDesc": "Use your iPhone's camera or the QR code scanner to scan the QR code below, then open the <code>Email</code> app to send an email."
71117119
}
71127120
}

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7108,5 +7108,13 @@
71087108
"SubTitle": "实现 TOTP RFC 6238 和 HOTP RFC 4226 认证器服务",
71097109
"BaseUsageTitle": "基本用法",
71107110
"BaseUsageIntro": "通过调用 <code>ITotpService</code> 服务实例方法 <code>Compute</code> 得到当前时间窗口内密码, 通过调用 <code>Instance.GetRemainingSeconds</code> 方法可以显示当前密码剩余有效时间，本例中通过进度条进行动态显示"
7111+
},
7112+
"BootstrapBlazor.Server.Components.Samples.Tutorials.BarCodeGenerator": {
7113+
"SelectType": "选择一个类型",
7114+
"Preview": "预览",
7115+
"TextDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，打开 <code>Safari</code> 浏览器使用默认搜索引擎搜索当前文本",
7116+
"UrlDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，打开 <code>Safari</code> 浏览器并且打开当前地址",
7117+
"WiFiDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，自动加入 <code>WiFi</code> 网络",
7118+
"EmailDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，打开 <code>Email</code> 应用发送邮件"
71117119
}
71127120
}

0 commit comments

Comments
 (0)