Skip to content

Commit b1cb106

Browse files
ArgoZhangArgoZhang
committed
doc: 增加示例文档
1 parent a238746 commit b1cb106

File tree

4 files changed

+84
-69
lines changed

4 files changed

+84
-69
lines changed

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

Lines changed: 62 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -5,71 +5,6 @@
55
<h3>@Localizer["Title"]</h3>
66
<h4>@Localizer["Description"]</h4>
77

8-
<DemoBlock Title="@Localizer["IsVirtualizeTitle"]" Introduction="@Localizer["IsVirtualizeIntro"]" Name="IsVirtualize">
9-
<section ignore>
10-
@((MarkupString)@Localizer["IsVirtualizeDesc"].Value)
11-
</section>
12-
<section ignore>
13-
<p>@((MarkupString)Localizer["SelectsVirtualizeDescription"].Value)</p>
14-
<div class="row g-3">
15-
<div class="col-12 col-sm-6">
16-
<BootstrapInputGroup>
17-
<BootstrapInputGroupLabel DisplayText="IsClearable" />
18-
<Checkbox @bind-Value="@_isClearable" />
19-
</BootstrapInputGroup>
20-
</div>
21-
</div>
22-
</section>
23-
24-
<p class="code-label">1. 使用 OnQueryAsync 作为数据源</p>
25-
<div class="row mb-3">
26-
<div class="col-12">
27-
<AutoFill @bind-Value="Model4" OnQueryAsync="OnQueryAsync" OnGetDisplayText="OnGetDisplayText" class="mb-3"
28-
IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
29-
IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
30-
<ItemTemplate>
31-
<div class="d-flex">
32-
<div>
33-
<img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
34-
</div>
35-
<div class="ps-2">
36-
<div>@context.Name</div>
37-
<div class="bb-sub">@Foo.GetTitle(context.Id)</div>
38-
</div>
39-
</div>
40-
</ItemTemplate>
41-
</AutoFill>
42-
<section ignore>
43-
<EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
44-
</section>
45-
</div>
46-
</div>
47-
48-
<p class="code-label">2. 使用 Items 作为数据源</p>
49-
<div class="row">
50-
<div class="col-12">
51-
<AutoFill @bind-Value="Model4" Items="Items4" OnGetDisplayText="OnGetDisplayText" class="mb-3"
52-
IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
53-
IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
54-
<ItemTemplate>
55-
<div class="d-flex">
56-
<div>
57-
<img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
58-
</div>
59-
<div class="ps-2">
60-
<div>@context.Name</div>
61-
<div class="bb-sub">@Foo.GetTitle(context.Id)</div>
62-
</div>
63-
</div>
64-
</ItemTemplate>
65-
</AutoFill>
66-
<section ignore>
67-
<EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
68-
</section>
69-
</div>
70-
</div>
71-
</DemoBlock>
72-
738
<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
749
<section ignore>
7510
@((MarkupString)@Localizer["NormalDesc"].Value)
@@ -137,4 +72,66 @@
13772
</section>
13873
</DemoBlock>
13974

75+
<DemoBlock Title="@Localizer["IsVirtualizeTitle"]" Introduction="@Localizer["IsVirtualizeIntro"]" Name="IsVirtualize">
76+
<section ignore>
77+
<p>@((MarkupString)Localizer["IsVirtualizeDescription"].Value)</p>
78+
<div class="row g-3">
79+
<div class="col-12 col-sm-6">
80+
<BootstrapInputGroup>
81+
<BootstrapInputGroupLabel DisplayText="IsClearable" />
82+
<Checkbox @bind-Value="@_isClearable" />
83+
</BootstrapInputGroup>
84+
</div>
85+
</div>
86+
</section>
87+
88+
<p class="code-label">1. 使用 OnQueryAsync 作为数据源</p>
89+
<div class="row mb-3">
90+
<div class="col-12">
91+
<AutoFill @bind-Value="Model4" OnQueryAsync="OnQueryAsync" OnGetDisplayText="OnGetDisplayText" class="mb-3"
92+
IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
93+
IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
94+
<ItemTemplate>
95+
<div class="d-flex">
96+
<div>
97+
<img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
98+
</div>
99+
<div class="ps-2">
100+
<div>@context.Name</div>
101+
<div class="bb-sub">@Foo.GetTitle(context.Id)</div>
102+
</div>
103+
</div>
104+
</ItemTemplate>
105+
</AutoFill>
106+
<section ignore>
107+
<EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
108+
</section>
109+
</div>
110+
</div>
111+
112+
<p class="code-label">2. 使用 Items 作为数据源</p>
113+
<div class="row">
114+
<div class="col-12">
115+
<AutoFill @bind-Value="Model4" Items="Items4" OnGetDisplayText="OnGetDisplayText" class="mb-3"
116+
IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
117+
IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
118+
<ItemTemplate>
119+
<div class="d-flex">
120+
<div>
121+
<img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
122+
</div>
123+
<div class="ps-2">
124+
<div>@context.Name</div>
125+
<div class="bb-sub">@Foo.GetTitle(context.Id)</div>
126+
</div>
127+
</div>
128+
</ItemTemplate>
129+
</AutoFill>
130+
<section ignore>
131+
<EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
132+
</section>
133+
</div>
134+
</div>
135+
</DemoBlock>
136+
140137
<AttributeTable Items="@GetAttributes()" />

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,14 @@ private AttributeItem[] GetAttributes() =>
196196
Type = "bool",
197197
ValueList = "true/false",
198198
DefaultValue = "false"
199+
},
200+
new()
201+
{
202+
Name = nameof(AutoFill<string>.IsVirtualize),
203+
Description = Localizer["AttrIsVirtualize"],
204+
Type = "bool",
205+
ValueList = "true/false",
206+
DefaultValue = "false"
199207
}
200208
];
201209
}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2153,7 +2153,11 @@
21532153
"Att10": "Whether to expand the dropdown candidate menu when it gains focus",
21542154
"Att11": "Candidate template",
21552155
"Att12": "Whether to skip Enter key handling",
2156-
"Att13": "Whether to skip Esc key processing"
2156+
"Att13": "Whether to skip Esc key processing",
2157+
"IsVirtualizeTitle": "Virtualize",
2158+
"IsVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
2159+
"IsVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
2160+
"AttrIsVirtualize": "Wether to enable virtualize"
21572161
},
21582162
"BootstrapBlazor.Server.Components.Samples.AutoCompletes": {
21592163
"Title": "AutoComplete",
@@ -3028,7 +3032,8 @@
30283032
"MultiSelectVirtualizeTitle": "Virtualize",
30293033
"MultiSelectVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
30303034
"MultiSelectVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
3031-
"MultiSelectsAttribute_ShowSearch": "Whether to display the search box"
3035+
"MultiSelectsAttribute_ShowSearch": "Whether to display the search box",
3036+
"MultiSelectsAttribute_IsVirtualize": "Wether to enable virtualize"
30323037
},
30333038
"BootstrapBlazor.Server.Components.Samples.Radios": {
30343039
"RadiosTitle": "Radio",

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2153,7 +2153,11 @@
21532153
"Att10": "获得焦点时是否展开下拉候选菜单",
21542154
"Att11": "候选项模板",
21552155
"Att12": "是否跳过 Enter 按键处理",
2156-
"Att13": "是否跳过 Esc 按键处理"
2156+
"Att13": "是否跳过 Esc 按键处理",
2157+
"IsVirtualizeTitle": "虚拟滚动",
2158+
"IsVirtualizeIntro": "通过设置 <code>IsVirtualize</code> 参数开启组件虚拟功能特性",
2159+
"IsVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据",
2160+
"AttrIsVirtualize": "是否开启虚拟滚动"
21572161
},
21582162
"BootstrapBlazor.Server.Components.Samples.AutoCompletes": {
21592163
"Title": "AutoComplete 自动完成",
@@ -3028,7 +3032,8 @@
30283032
"MultiSelectVirtualizeTitle": "虚拟滚动",
30293033
"MultiSelectVirtualizeIntro": "通过设置 <code>IsVirtualize</code> 参数开启组件虚拟功能特性",
30303034
"MultiSelectVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据",
3031-
"MultiSelectsAttribute_ShowSearch": "是否显示搜索框"
3035+
"MultiSelectsAttribute_ShowSearch": "是否显示搜索框",
3036+
"MultiSelectsAttribute_IsVirtualize": "是否开启虚拟滚动"
30323037
},
30333038
"BootstrapBlazor.Server.Components.Samples.Radios": {
30343039
"RadiosTitle": "Radio 单选框",

0 commit comments

Comments
 (0)