Skip to content

Commit 65731a3

Browse files
ArgoZhangArgoZhang
committed
doc: 增加示例
1 parent cd3c0c9 commit 65731a3

File tree

4 files changed

+89
-5
lines changed

4 files changed

+89
-5
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/ShieldBadges.razor‎

Lines changed: 66 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,74 @@
11
@page "/shield-badge"
22
@inject IStringLocalizer<ShieldBadges> Localizer
33

4-
<h3>@Localizer["ShieldBadgeTitle"]</h3>
5-
<h4>@Localizer["ShieldBadgeIntro"]</h4>
4+
<h3>@Localizer["Title"]</h3>
5+
<h4>@Localizer["SubTitle"]</h4>
66

77
<DemoBlock Title="@Localizer["ShieldBadgeNormalTitle"]"
88
Introduction="@Localizer["ShieldBadgeNormalIntro"]"
99
Name="Normal">
10-
<ShieldBadge Icon="fa-solid fa-flag" Label="download" Text="12M"></ShieldBadge>
10+
<section ignore>
11+
<div class="row form-inline g-3">
12+
<div class="col-12 col-sm-4">
13+
<BootstrapInputGroup>
14+
<BootstrapInputGroupLabel DisplayText="Icon" Width="96"></BootstrapInputGroupLabel>
15+
<BootstrapInput @bind-Value="@_icon"></BootstrapInput>
16+
</BootstrapInputGroup>
17+
</div>
18+
<div class="col-12 col-sm-4">
19+
<BootstrapInputGroup>
20+
<BootstrapInputGroupLabel DisplayText="IconColor" Width="96"></BootstrapInputGroupLabel>
21+
<ColorPicker @bind-Value="@_iconColor"></ColorPicker>
22+
</BootstrapInputGroup>
23+
</div>
24+
<div class="col-12 col-sm-4">
25+
</div>
26+
<div class="col-12 col-sm-4">
27+
<BootstrapInputGroup>
28+
<BootstrapInputGroupLabel DisplayText="Label" Width="96"></BootstrapInputGroupLabel>
29+
<BootstrapInput @bind-Value="@_label"></BootstrapInput>
30+
</BootstrapInputGroup>
31+
</div>
32+
<div class="col-12 col-sm-4">
33+
<BootstrapInputGroup>
34+
<BootstrapInputGroupLabel DisplayText="LabelColor" Width="96"></BootstrapInputGroupLabel>
35+
<ColorPicker @bind-Value="@_labelColor"></ColorPicker>
36+
</BootstrapInputGroup>
37+
</div>
38+
<div class="col-12 col-sm-4">
39+
<BootstrapInputGroup>
40+
<BootstrapInputGroupLabel DisplayText="LabelBgColor" Width="96"></BootstrapInputGroupLabel>
41+
<ColorPicker @bind-Value="@_labelBackgroundColor"></ColorPicker>
42+
</BootstrapInputGroup>
43+
</div>
44+
<div class="col-12 col-sm-4">
45+
<BootstrapInputGroup>
46+
<BootstrapInputGroupLabel DisplayText="Text" Width="96"></BootstrapInputGroupLabel>
47+
<BootstrapInput @bind-Value="@_text"></BootstrapInput>
48+
</BootstrapInputGroup>
49+
</div>
50+
<div class="col-12 col-sm-4">
51+
<BootstrapInputGroup>
52+
<BootstrapInputGroupLabel DisplayText="TextColor" Width="96"></BootstrapInputGroupLabel>
53+
<ColorPicker @bind-Value="@_textColor"></ColorPicker>
54+
</BootstrapInputGroup>
55+
</div>
56+
<div class="col-12 col-sm-4">
57+
<BootstrapInputGroup>
58+
<BootstrapInputGroupLabel DisplayText="TextBgColor" Width="96"></BootstrapInputGroupLabel>
59+
<ColorPicker @bind-Value="@_textBackgroundColor"></ColorPicker>
60+
</BootstrapInputGroup>
61+
</div>
62+
<div class="col-12 col-sm-4">
63+
<BootstrapInputGroup>
64+
<BootstrapInputGroupLabel DisplayText="Radius" Width="96"></BootstrapInputGroupLabel>
65+
<Slider @bind-Value="@_radius" Min="0" Max="10"></Slider>
66+
</BootstrapInputGroup>
67+
</div>
68+
</div>
69+
</section>
70+
<ShieldBadge Icon="@_icon" IconColor="@_iconColor"
71+
Label="download" LabelColor="@_labelColor" LabelBackgroundColor="@_labelBackgroundColor"
72+
Text="12M" TextColor="@_textColor" TextBackgroundColor="@_textBackgroundColor"
73+
Radius="@_radius"></ShieldBadge>
1174
</DemoBlock>
12-
13-

‎src/BootstrapBlazor.Server/Components/Samples/ShieldBadges.razor.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,16 @@ namespace BootstrapBlazor.Server.Components.Samples;
1010
/// </summary>
1111
public partial class ShieldBadges
1212
{
13+
private string? _icon = "fa-brands fa-github";
14+
private string? _iconColor;
1315

16+
private string? _label = "download";
17+
private string? _labelColor;
18+
private string? _labelBackgroundColor;
19+
20+
private string? _text = "12M";
21+
private string? _textColor;
22+
private string? _textBackgroundColor;
23+
24+
private int _radius = 3;
1425
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3666,6 +3666,12 @@
36663666
"IsPill": "Capsule style",
36673667
"ButtonSpan": "The primary button"
36683668
},
3669+
"BootstrapBlazor.Server.Components.Samples.ShieldBadges": {
3670+
"Title": "ShieldBadge",
3671+
"SubTitle": "Badge component with icon label text like Shields Badge",
3672+
"ShieldBadgeNormalTitle": "Basic usage",
3673+
"ShieldBadgeNormalIntro": "Use <code>Icon</code> to set the icon, <code>Label</code> to set the left text, and <code>Text</code> to set the right text"
3674+
},
36693675
"BootstrapBlazor.Server.Components.Samples.BarcodeReaders": {
36703676
"Title": "BarcodeReader",
36713677
"SubTitle": "This component scans the bar code by calling the camera to obtain the bar code content bar code/QR code",

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3666,6 +3666,12 @@
36663666
"IsPill": "胶囊样式",
36673667
"ButtonSpan": "主要按钮"
36683668
},
3669+
"BootstrapBlazor.Server.Components.Samples.ShieldBadges": {
3670+
"Title": "ShieldBadge 徽章组件",
3671+
"SubTitle": "带图标标签文本的徽章组件高仿 Shields Badge",
3672+
"ShieldBadgeNormalTitle": "基础用法",
3673+
"ShieldBadgeNormalIntro": "通过 <code>Icon</code> 设置图标，通过 <code>Label</code> 设置左侧文本，通过 <code>Text</code> 设置右侧文本"
3674+
},
36693675
"BootstrapBlazor.Server.Components.Samples.BarcodeReaders": {
36703676
"Title": "BarcodeReader 条码扫描",
36713677
"SubTitle": "本组件通过调用摄像头对条码进行扫描，获取到条码内容条码/QR码",

0 commit comments

Comments
 (0)