Skip to content

Commit 8b8edf7

Browse files
ArgoZhangArgoZhang
authored
doc(Select): update bind enum data type sample code (#5044)
* style: 增加 InputGroup 样式 * doc: 修复 Select 绑定布尔值示例 * doc: 更新 Slider 示例
1 parent 89283d2 commit 8b8edf7

File tree

4 files changed

+89
-84
lines changed

4 files changed

+89
-84
lines changed

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<DemoBlock Title="@Localizer["SelectsNormalTitle"]"
1111
Introduction="@Localizer["SelectsNormalIntro"]"
1212
Name="Normal">
13-
<p>@((MarkupString)Localizer["SelectsNormalDescription"].Value)</p>
13+
<section ignore>@((MarkupString)Localizer["SelectsNormalDescription"].Value)</section>
1414
<div class="row g-3">
1515
<div class="col-12 col-sm-6">
1616
<Select Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
@@ -215,13 +215,15 @@
215215
</Select>
216216
</div>
217217
</div>
218-
</DemoBlock>
218+
</DemoBlock>
219219

220220
<DemoBlock Title="@Localizer["SelectsEnumTitle"]"
221221
Introduction="@Localizer["SelectsEnumIntro"]"
222222
Name="Enum">
223-
<p>@((MarkupString)Localizer["SelectsEnumDescription1"].Value)</p>
224-
<p>@((MarkupString)Localizer["SelectsEnumDescription2"].Value)</p>
223+
<section ignore>
224+
<p>@((MarkupString)Localizer["SelectsEnumDescription1"].Value)</p>
225+
<div>@((MarkupString)Localizer["SelectsEnumDescription2"].Value)</div>
226+
</section>
225227
<div class="row g-3">
226228
<div class="col-12 col-sm-6">
227229
<Select @bind-Value="SelectedEnumItem1" PlaceHolder="@Localizer["SelectsPlaceHolder"]" ShowLabel="true" DisplayText="@Localizer["SelectsEnumSelectText1"]">
@@ -244,7 +246,7 @@
244246
<DemoBlock Title="@Localizer["SelectsNullableTitle"]"
245247
Introduction="@Localizer["SelectsNullableIntro"]"
246248
Name="Nullable">
247-
<p>@((MarkupString)Localizer["SelectsNullableDescription"].Value)</p>
249+
<section ignore>@((MarkupString)Localizer["SelectsNullableDescription"].Value)</section>
248250
<div class="row g-3">
249251
<div class="col-12 col-sm-6">
250252
<Select Items="NullableIntItems" @bind-Value="NullableSelectedIntItem">
@@ -259,8 +261,10 @@
259261
<DemoBlock Title="@Localizer["SelectsNullableBooleanTitle"]"
260262
Introduction="@Localizer["SelectsNullableBooleanIntro"]"
261263
Name="NullableBoolean">
262-
<p>@((MarkupString)Localizer["SelectsNullableBooleanDescription1"].Value)</p>
263-
<p>@((MarkupString)Localizer["SelectsNullableBooleanDescription2"].Value)</p>
264+
<section ignore>
265+
<p>@((MarkupString)Localizer["SelectsNullableBooleanDescription1"].Value)</p>
266+
<div>@((MarkupString)Localizer["SelectsNullableBooleanDescription2"].Value)</div>
267+
</section>
264268
<div class="row g-3">
265269
<div class="col-12 col-sm-6">
266270
<Select Items="NullableBoolItems" @bind-Value="SelectedBoolItem">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -204,8 +204,8 @@ private string GetSelectedBoolItemString()
204204
private IEnumerable<SelectedItem> NullableBoolItems { get; set; } = new SelectedItem[]
205205
{
206206
new() { Text = "空值", Value = "" },
207-
new() { Text = "True 值", Value = "true" },
208-
new() { Text = "False 值", Value = "false" }
207+
new() { Text = "True 值", Value = "True" },
208+
new() { Text = "False 值", Value = "False" }
209209
};
210210

211211
private readonly SelectedItem[] StringItems =

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

Lines changed: 72 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -7,78 +7,81 @@
77
<h4>@Localizer["SlidersDescription"]</h4>
88

99
<DemoBlock Title="@Localizer["SlidersNormalTitle"]" Introduction="@Localizer["SlidersNormalIntro"]" Name="Normal">
10-
<div class="row g-3">
11-
<div class="col-12 col-md-6 col-lg-4 xl-3">
12-
<BootstrapInputGroup>
13-
<BootstrapInputGroupLabel DisplayText="CurrentValue" />
14-
<BootstrapInput @bind-Value="@CurrentValue" />
15-
</BootstrapInputGroup>
16-
</div>
17-
<div class="col-12 col-md-6 col-lg-4 xl-3">
18-
<BootstrapInputGroup>
19-
<BootstrapInputGroupLabel DisplayText="MinValue" />
20-
<BootstrapInput @bind-Value="@MinValue" />
21-
</BootstrapInputGroup>
22-
</div>
23-
<div class="col-12 col-md-6 col-lg-4 xl-3">
24-
<BootstrapInputGroup>
25-
<BootstrapInputGroupLabel DisplayText="MaxValue" />
26-
<BootstrapInput @bind-Value="@MaxValue" />
27-
</BootstrapInputGroup>
28-
</div>
29-
<div class="col-12 col-md-6 col-lg-4 xl-3">
30-
<BootstrapInputGroup>
31-
<BootstrapInputGroupLabel DisplayText="DisplayText" />
32-
<BootstrapInput @bind-Value="@DisplayText" />
33-
</BootstrapInputGroup>
34-
</div>
35-
<div class="col-12 col-md-6 col-lg-4 xl-3">
36-
<BootstrapInputGroup>
37-
<BootstrapInputGroupLabel DisplayText="Step" />
38-
<BootstrapInput @bind-Value="@Step" />
39-
</BootstrapInputGroup>
40-
</div>
41-
<div class="col-12 col-md-6 col-lg-4 xl-3">
42-
<BootstrapInputGroup>
43-
<BootstrapInputGroupLabel DisplayText="IsDisabled" />
44-
<Checkbox @bind-Value="@IsDisabled" />
45-
</BootstrapInputGroup>
46-
</div>
47-
<div class="col-12 col-md-6 col-lg-4 xl-3">
48-
<BootstrapInputGroup>
49-
<BootstrapInputGroupLabel DisplayText="UseInput" />
50-
<Checkbox @bind-Value="@UseInput" />
51-
</BootstrapInputGroup>
52-
</div>
53-
<div class="col-12 col-md-6 col-lg-4 xl-3">
54-
<BootstrapInputGroup>
55-
<BootstrapInputGroupLabel DisplayText="ShowLabel" />
56-
<Checkbox @bind-Value="@ShowLabel" />
57-
</BootstrapInputGroup>
58-
</div>
59-
<div class="col-12 col-md-6 col-lg-4 xl-3">
60-
<BootstrapInputGroup>
61-
<BootstrapInputGroupLabel DisplayText="UseGroup" />
62-
<Checkbox @bind-Value="@UseGroup" />
63-
</BootstrapInputGroup>
64-
</div>
65-
<div class="col-12">
66-
@if (UseGroup)
67-
{
10+
<section ignore>
11+
<div class="row g-3">
12+
<div class="col-12 col-md-6 col-lg-4 xl-3">
6813
<BootstrapInputGroup>
69-
<BootstrapInputGroupLabel DisplayText="@DisplayText" />
70-
@RenderSlider
14+
<BootstrapInputGroupLabel DisplayText="CurrentValue" />
15+
<BootstrapInput @bind-Value="@CurrentValue" />
7116
</BootstrapInputGroup>
72-
}
73-
else
74-
{
75-
@RenderSlider
76-
}
77-
</div>
78-
<div class="col-12">
79-
<ConsoleLogger @ref="Logger" />
17+
</div>
18+
<div class="col-12 col-md-6 col-lg-4 xl-3">
19+
<BootstrapInputGroup>
20+
<BootstrapInputGroupLabel DisplayText="MinValue" />
21+
<BootstrapInput @bind-Value="@MinValue" />
22+
</BootstrapInputGroup>
23+
</div>
24+
<div class="col-12 col-md-6 col-lg-4 xl-3">
25+
<BootstrapInputGroup>
26+
<BootstrapInputGroupLabel DisplayText="MaxValue" />
27+
<BootstrapInput @bind-Value="@MaxValue" />
28+
</BootstrapInputGroup>
29+
</div>
30+
<div class="col-12 col-md-6 col-lg-4 xl-3">
31+
<BootstrapInputGroup>
32+
<BootstrapInputGroupLabel DisplayText="DisplayText" />
33+
<BootstrapInput @bind-Value="@DisplayText" />
34+
</BootstrapInputGroup>
35+
</div>
36+
<div class="col-12 col-md-6 col-lg-4 xl-3">
37+
<BootstrapInputGroup>
38+
<BootstrapInputGroupLabel DisplayText="Step" />
39+
<BootstrapInput @bind-Value="@Step" />
40+
</BootstrapInputGroup>
41+
</div>
42+
<div class="col-12 col-md-6 col-lg-4 xl-3">
43+
<BootstrapInputGroup>
44+
<BootstrapInputGroupLabel DisplayText="IsDisabled" />
45+
<Checkbox @bind-Value="@IsDisabled" />
46+
</BootstrapInputGroup>
47+
</div>
48+
<div class="col-12 col-md-6 col-lg-4 xl-3">
49+
<BootstrapInputGroup>
50+
<BootstrapInputGroupLabel DisplayText="UseInput" />
51+
<Checkbox @bind-Value="@UseInput" />
52+
</BootstrapInputGroup>
53+
</div>
54+
<div class="col-12 col-md-6 col-lg-4 xl-3">
55+
<BootstrapInputGroup>
56+
<BootstrapInputGroupLabel DisplayText="ShowLabel" />
57+
<Checkbox @bind-Value="@ShowLabel" />
58+
</BootstrapInputGroup>
59+
</div>
60+
<div class="col-12 col-md-6 col-lg-4 xl-3">
61+
<BootstrapInputGroup>
62+
<BootstrapInputGroupLabel DisplayText="UseGroup" />
63+
<Checkbox @bind-Value="@UseGroup" />
64+
</BootstrapInputGroup>
65+
</div>
8066
</div>
81-
</div>
67+
</section>
68+
@if (UseGroup)
69+
{
70+
<BootstrapInputGroup>
71+
<BootstrapInputGroupLabel DisplayText="@DisplayText" />
72+
<Slider @bind-Value="@CurrentValue" Max="MaxValue" Min="MinValue" Step="Step" UseInputEvent="UseInput"
73+
DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged" />
74+
75+
</BootstrapInputGroup>
76+
}
77+
else
78+
{
79+
<Slider @bind-Value="@CurrentValue" Max="MaxValue" Min="MinValue" Step="Step" UseInputEvent="UseInput"
80+
DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged" />
81+
}
82+
<section ignore>
83+
<ConsoleLogger @ref="Logger" />
84+
</section>
8285
</DemoBlock>
8386

8487
<DemoBlock Title="@Localizer["SlidersRangeTitle"]" Introduction="@Localizer["SlidersRangeIntro"]" Name="Range">
@@ -103,9 +106,3 @@
103106
<AttributeTable Items="@GetAttributes()" />
104107

105108
<EventTable Items="@GetEvents()" />
106-
107-
@code {
108-
RenderFragment RenderSlider =>
109-
@<Slider @bind-Value="@CurrentValue" Max="MaxValue" Min="MinValue" Step="Step" UseInputEvent="UseInput"
110-
DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged" />;
111-
}

‎src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@
5454
border-bottom-right-radius: 0;
5555
}
5656
}
57+
58+
> .form-label {
59+
display: none;
60+
}
5761
}
5862

5963
.input-group-xs {

0 commit comments

Comments
 (0)