
QRCode
Generate QR code
BootstrapBlazor.BarCode
, which needs to reference its component package when using this componentBootstrapBlazor.BarCode
componentdotnet add package BootstrapBlazor.BarCode
<PackageReference Include="BootstrapBlazor.BarCode" Version="7.0.0" />
Install-Package BootstrapBlazor.BarCode
Click the Generate button to generate a QRCode
Demo
Specify the contents of the QR code with the Content
parameter
Demo
Width
of the QRCode
Demo
DarkColor
set the black color,LightColor
set the white color
Demo
Attributes
@page "/qrcodes"
<h3>@Title</h3>
<h4>@SubTitle</h4>
<PackageTips Name="BootstrapBlazor.BarCode" />
<DemoBlock Title="Basic usage" Introduction="Click the Generate button to generate a <code>QRCode</code>" Name="Normal">
<QRCode OnGenerated="@OnGenerated" ShowButtons="true"></QRCode>
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Direct build" Introduction="Specify the contents of the QR code with the <code>Content</code> parameter" Name="Content">
<QRCode Content="https://www.blazor.zone"></QRCode>
</DemoBlock>
<DemoBlock Title="Size" Introduction="<code>Width</code> of the QRCode" Name="Width">
<QRCode Content="https://www.blazor.zone" Width="80"></QRCode>
</DemoBlock>
<DemoBlock Title="Color" Introduction="<code>DarkColor</code> set the black color,<code>LightColor</code> set the white color" Name="DarkColor">
<QRCode Content="https://www.blazor.zone" DarkColor="#50cd89"></QRCode>
</DemoBlock>
<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Services;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class QRCodes
{
[NotNull]
private string? Title { get; set; }
[NotNull]
private string? SubTitle { get; set; }
[NotNull]
private string? BaseUsageText { get; set; }
[NotNull]
private string? IntroText { get; set; }
[NotNull]
private string? SuccessText { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<QRCodes>? Localizer { get; set; }
[NotNull]
private BlockLogger? Trace { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Title ??= Localizer[nameof(Title)];
SubTitle ??= Localizer[nameof(SubTitle)];
BaseUsageText ??= Localizer[nameof(BaseUsageText)];
IntroText ??= Localizer[nameof(IntroText)];
SuccessText ??= Localizer[nameof(SuccessText)];
}
private Task OnGenerated()
{
Trace.Log(SuccessText);
return Task.CompletedTask;
}
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = nameof(QRCode.PlaceHolder),
Description = Localizer[nameof(QRCode.PlaceHolder)],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["PlaceHolderValue"]
},
new AttributeItem() {
Name = nameof(QRCode.Width),
Description = Localizer[nameof(QRCode.Width)],
Type = "int",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(QRCode.ClearButtonText),
Description = Localizer[nameof(QRCode.ClearButtonText)],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["ClearButtonTextValue"]
},
new AttributeItem() {
Name = nameof(QRCode.ClearButtonIcon),
Description = Localizer[nameof(QRCode.ClearButtonIcon)],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(QRCode.GenerateButtonText),
Description = Localizer[nameof(QRCode.GenerateButtonText)],
Type = "string",
ValueList = " — ",
DefaultValue = Localizer["GenerateButtonTextValue"]
},
new AttributeItem() {
Name = nameof(QRCode.GenerateButtonIcon),
Description = Localizer[nameof(QRCode.GenerateButtonIcon)],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(QRCode.ShowButtons),
Description = Localizer[nameof(QRCode.ShowButtons)],
Type = "boolean",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(QRCode.DarkColor),
Description = Localizer[nameof(QRCode.DarkColor)],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(QRCode.LightColor),
Description = Localizer[nameof(QRCode.LightColor)],
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = nameof(QRCode.OnGenerated),
Description = Localizer[nameof(QRCode.OnGenerated)],
Type = "Func<Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
}