Skip to content

Commit 4dc56bb

Browse files
ArgoZhangArgoZhang
authored
doc(Dropdown): custom content use ButtonTemplate (#5196)
1 parent 7b1a2f2 commit 4dc56bb

File tree

3 files changed

+42
-30
lines changed

3 files changed

+42
-30
lines changed

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

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,84 +6,84 @@
66
<h4>@Localizer["Description"]</h4>
77

88
<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
9-
<Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary" />
9+
<Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
1010
<ConsoleLogger @ref="Logger" />
1111
</DemoBlock>
1212

1313
<DemoBlock Title="@Localizer["NullTitle"]" Introduction="@Localizer["NullIntro"]" Name="Null">
14-
<Dropdown TValue="string" Items="EmptyList" Color="Color.Secondary" />
14+
<Dropdown TValue="string" Items="EmptyList" Color="Color.Secondary"></Dropdown>
1515
</DemoBlock>
1616

1717
<DemoBlock Title="@Localizer["ColorTitle"]" Introduction='@Localizer["ColorIntro"]' Name="Color">
1818
<div class="row g-3">
1919
<div class="col-6 col-sm-4 col-md-3">
20-
<Dropdown TValue="string" Items="Items" Color="Color.Primary" />
20+
<Dropdown TValue="string" Items="Items" Color="Color.Primary"></Dropdown>
2121
</div>
2222
<div class="col-6 col-sm-4 col-md-3">
23-
<Dropdown TValue="string" Items="Items" Color="Color.Info" />
23+
<Dropdown TValue="string" Items="Items" Color="Color.Info"></Dropdown>
2424
</div>
2525
<div class="col-6 col-sm-4 col-md-3">
26-
<Dropdown TValue="string" Items="Items" Color="Color.Warning" />
26+
<Dropdown TValue="string" Items="Items" Color="Color.Warning"></Dropdown>
2727
</div>
2828
<div class="col-6 col-sm-4 col-md-3">
29-
<Dropdown TValue="string" Items="Items" Color="Color.Danger" />
29+
<Dropdown TValue="string" Items="Items" Color="Color.Danger"></Dropdown>
3030
</div>
3131
</div>
3232
</DemoBlock>
3333

3434
<DemoBlock Title="@Localizer["SplitTitle"]" Introduction='@Localizer["SplitIntro"]' Name="Split">
3535
<div class="row g-3">
3636
<div class="col-6 col-sm-4 col-md-3">
37-
<Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Primary" />
37+
<Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Primary"></Dropdown>
3838
</div>
3939
<div class="col-6 col-sm-4 col-md-3">
40-
<Dropdown TValue="string" Items="Items" ShowSplit="false" Color="Color.Info" />
40+
<Dropdown TValue="string" Items="Items" ShowSplit="false" Color="Color.Info"></Dropdown>
4141
</div>
4242
<div class="col-6 col-sm-4 col-md-3">
43-
<Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Warning" />
43+
<Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Warning"></Dropdown>
4444
</div>
4545
<div class="col-6 col-sm-4 col-md-3">
46-
<Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Danger" />
46+
<Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Danger"></Dropdown>
4747
</div>
4848
</div>
4949
</DemoBlock>
5050

5151
<DemoBlock Title="@Localizer["SizeTitle"]" Introduction="@Localizer["SizeIntro"]" Name="Size">
5252
<div class="row g-3">
5353
<div class="col-6 col-sm-4 col-md-3 col-xl-auto">
54-
<Dropdown TValue="string" Items="Items" Size="Size.ExtraSmall" />
54+
<Dropdown TValue="string" Items="Items" Size="Size.ExtraSmall"></Dropdown>
5555
</div>
5656
<div class="col-6 col-sm-4 col-md-3 col-xl-auto">
57-
<Dropdown TValue="string" Items="Items" Size="Size.Small" />
57+
<Dropdown TValue="string" Items="Items" Size="Size.Small"></Dropdown>
5858
</div>
5959
<div class="col-6 col-sm-4 col-md-3 col-xl-auto">
60-
<Dropdown TValue="string" Items="Items" Size="Size.Medium" />
60+
<Dropdown TValue="string" Items="Items" Size="Size.Medium"></Dropdown>
6161
</div>
6262
<div class="col-6 col-sm-4 col-md-3 col-xl-auto">
63-
<Dropdown TValue="string" Items="Items" Size="Size.Large" />
63+
<Dropdown TValue="string" Items="Items" Size="Size.Large"></Dropdown>
6464
</div>
6565
<div class="col-6 col-sm-4 col-md-3 col-xl-auto">
66-
<Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge" />
66+
<Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge"></Dropdown>
6767
</div>
6868
<div class="col-6 col-sm-4 col-md-3 col-xl-auto">
69-
<Dropdown TValue="string" Items="Items" Size="Size.ExtraExtraLarge" />
69+
<Dropdown TValue="string" Items="Items" Size="Size.ExtraExtraLarge"></Dropdown>
7070
</div>
7171
</div>
7272
</DemoBlock>
7373

7474
<DemoBlock Title="@Localizer["DirectionTitle"]" Introduction='@Localizer["DirectionIntro"]' Name="Direction">
7575
<div class="row form-inline form-inline-end g-3">
7676
<div class="col-6 col-sm-4 col-md-3">
77-
<Dropdown TValue="string" Items="Items" Direction="Direction.Dropleft" ShowLabel="true" DisplayText="Start" />
77+
<Dropdown TValue="string" Items="Items" Direction="Direction.Dropleft" ShowLabel="true" DisplayText="Start"></Dropdown>
7878
</div>
7979
<div class="col-6 col-sm-4 col-md-3">
80-
<Dropdown TValue="string" Items="Items" Direction="Direction.Dropright" ShowLabel="true" DisplayText="End" />
80+
<Dropdown TValue="string" Items="Items" Direction="Direction.Dropright" ShowLabel="true" DisplayText="End"></Dropdown>
8181
</div>
8282
<div class="col-6 col-sm-4 col-md-3">
83-
<Dropdown TValue="string" Items="Items" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Up" />
83+
<Dropdown TValue="string" Items="Items" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Up"></Dropdown>
8484
</div>
8585
<div class="col-6 col-sm-4 col-md-3">
86-
<Dropdown TValue="string" Items="Items" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Down" />
86+
<Dropdown TValue="string" Items="Items" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Down"></Dropdown>
8787
</div>
8888
</div>
8989
</DemoBlock>
@@ -96,23 +96,23 @@
9696
Color="Color.Secondary"
9797
MenuAlignment="Alignment.Left"
9898
Direction="Direction.Dropdown"
99-
ShowLabel="true" DisplayText="Start" />
99+
ShowLabel="true" DisplayText="Start"></Dropdown>
100100
</div>
101101
<div class="col-6 col-sm-4 col-md-3">
102102
<Dropdown TValue="string"
103103
Items="Items"
104104
Color="Color.Secondary"
105105
MenuAlignment="Alignment.Right"
106106
Direction="Direction.Dropdown"
107-
ShowLabel="true" DisplayText="End" />
107+
ShowLabel="true" DisplayText="End"></Dropdown>
108108
</div>
109109
<div class="col-6 col-sm-4 col-md-3">
110110
<Dropdown TValue="string"
111111
Items="Items"
112112
Color="Color.Secondary"
113113
MenuAlignment="Alignment.Center"
114114
Direction="Direction.Dropdown"
115-
ShowLabel="true" DisplayText="Center" />
115+
ShowLabel="true" DisplayText="Center"></Dropdown>
116116
</div>
117117
<div class="col-6 col-sm-4 col-md-3">
118118
<Dropdown TValue="string"
@@ -121,16 +121,15 @@
121121
MenuAlignment="Alignment.Center"
122122
Direction="Direction.Dropup"
123123
ShowLabel="true"
124-
DisplayText="Center" />
124+
DisplayText="Center"></Dropdown>
125125
</div>
126126
</div>
127127
</DemoBlock>
128128

129129
<DemoBlock Title="@Localizer["ItemsTitle"]" Introduction='@Localizer["ItemsIntro"]' Name="Items">
130130
<div class="row">
131131
<div class="col-12 col-sm-6">
132-
<Dropdown TValue="string" Items="@Foos">
133-
</Dropdown>
132+
<Dropdown TValue="string" Items="@Foos"></Dropdown>
134133
</div>
135134
<div class="col-12 col-sm-6">
136135
<Button @onclick="@AddItem">@Localizer["AddItem"]</Button>
@@ -155,20 +154,29 @@
155154
<DemoBlock Title="@Localizer["CascadeTitle"]" Introduction="@Localizer["CascadeIntro"]" Name="Cascade">
156155
<div class="row g-3">
157156
<div class="col-12 col-sm-6">
158-
<Dropdown TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick" />
157+
<Dropdown TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick"></Dropdown>
159158
</div>
160159
<div class="col-12 col-sm-6">
161-
<Dropdown TValue="string" Items="Items2" />
160+
<Dropdown TValue="string" Items="Items2"></Dropdown>
162161
</div>
163162
</div>
164163
</DemoBlock>
165164

166165
<DemoBlock Title="@Localizer["IsFixedButtonTextTitle"]" Introduction="@Localizer["IsFixedButtonTextIntro"]" Name="IsFixedButtonText">
167-
<Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" />
166+
<Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true"></Dropdown>
168167
</DemoBlock>
169168

170169
<DemoBlock Title="@Localizer["FixedButtonTextTitle"]" Introduction="@Localizer["FixedButtonTextIntro"]" Name="FixedButtonText">
171-
<Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" FixedButtonText="@Localizer["City"]" />
170+
<Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" FixedButtonText="@Localizer["City"]"></Dropdown>
171+
</DemoBlock>
172+
173+
<DemoBlock Title="@Localizer["ButtonTemplateTitle"]" Introduction="@Localizer["ButtonTemplateIntro"]" Name="ButtonTemplate">
174+
<Dropdown TValue="string" Items="RadioItems">
175+
<ButtonTemplate>
176+
<i class="fa-solid fa-home"></i>
177+
<span>@context.Text</span>
178+
</ButtonTemplate>
179+
</Dropdown>
172180
</DemoBlock>
173181

174182
<AttributeTable Items="@GetAttributes()" />

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1773,6 +1773,8 @@
17731773
"IsFixedButtonTextIntro": "Set <code>IsFixedButtonText</code> to <b>true</b> make the ButtonText to const",
17741774
"FixedButtonTextTitle": "Set the fixed button text",
17751775
"FixedButtonTextIntro": "Set the <code>FixedButtonText</code> value for fixed button text",
1776+
"ButtonTemplateTitle": "Button Template",
1777+
"ButtonTemplateIntro": "You can customize the displayed content by setting <code>ButtonTemlate</code>",
17761778
"AttributeValue": "Currently selected value",
17771779
"AttributeClass": "Style",
17781780
"AttributeColor": "Color",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1773,6 +1773,8 @@
17731773
"IsFixedButtonTextIntro": "通过设置 <code>IsFixedButtonText</code> 使更改下拉选项时按钮文本不变",
17741774
"FixedButtonTextTitle": "设置固定按钮文字",
17751775
"FixedButtonTextIntro": "通过设置 <code>FixedButtonText</code> 来设置固定按钮的初始文字",
1776+
"ButtonTemplateTitle": "按钮模板",
1777+
"ButtonTemplateIntro": "通过设置 <code>ButtonTemlate</code> 可以自定义显示内容",
17761778
"AttributeValue": "当前选中的值",
17771779
"AttributeClass": "样式",
17781780
"AttributeColor": "颜色",

0 commit comments

Comments
 (0)