Skip to content

Commit 2db42ae

Browse files
ArgoZhangArgoZhang
committed
doc: 更新 Slider 示例
1 parent b0a071c commit 2db42ae

File tree

1 file changed

+72
-75
lines changed

1 file changed

+72
-75
lines changed

‎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-
}

0 commit comments

Comments
 (0)