doc: 增加示例

Author: ArgoZhang

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

@@ -5,11 +5,77 @@
 <h3>@Localizer["Title"]</h3>
 <h4>@Localizer["Description"]</h4>
 
+<DemoBlock Title="@Localizer["IsVirtualizeTitle"]" Introduction="@Localizer["IsVirtualizeIntro"]" Name="IsVirtualize">
+    <section ignore>
+        @((MarkupString)@Localizer["IsVirtualizeDesc"].Value)
+    </section>
+    <section ignore>
+        <p>@((MarkupString)Localizer["SelectsVirtualizeDescription"].Value)</p>
+        <div class="row g-3">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IsClearable" />
+                    <Checkbox @bind-Value="@_isClearable" />
+                </BootstrapInputGroup>
+            </div>
+        </div>
+    </section>
+
+    <p class="code-label">1. 使用 OnQueryAsync 作为数据源</p>
+    <div class="row mb-3">
+        <div class="col-12">
+            <AutoFill @bind-Value="Model4" OnQueryAsync="OnQueryAsync" OnGetDisplayText="OnGetDisplayText" class="mb-3"
+                      IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
+                      IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
+                <ItemTemplate>
+                    <div class="d-flex">
+                        <div>
+                            <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
+                        </div>
+                        <div class="ps-2">
+                            <div>@context.Name</div>
+                            <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
+                        </div>
+                    </div>
+                </ItemTemplate>
+            </AutoFill>
+            <section ignore>
+                <EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
+            </section>
+        </div>
+    </div>
+
+    <p class="code-label">2. 使用 Items 作为数据源</p>
+    <div class="row">
+        <div class="col-12">
+            <AutoFill @bind-Value="Model4" Items="Items4" OnGetDisplayText="OnGetDisplayText" class="mb-3"
+                      IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
+                      IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
+                <ItemTemplate>
+                    <div class="d-flex">
+                        <div>
+                            <img src="@WebsiteOption.CurrentValue.GetAvatarUrl(context.Id)" class="bb-avatar" />
+                        </div>
+                        <div class="ps-2">
+                            <div>@context.Name</div>
+                            <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
+                        </div>
+                    </div>
+                </ItemTemplate>
+            </AutoFill>
+            <section ignore>
+                <EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
+            </section>
+        </div>
+    </div>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
     <section ignore>
         @((MarkupString)@Localizer["NormalDesc"].Value)
     </section>
-    <AutoFill @bind-Value="Model1" Items="Items1" IsLikeMatch="true" OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
+    <AutoFill @bind-Value="Model1" Items="Items1" class="mb-3"
+              IsLikeMatch="true" OnGetDisplayText="OnGetDisplayText" IsSelectAllTextOnFocus="true">
         <ItemTemplate>
             <div class="d-flex">
                 <div>

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

@@ -15,9 +15,13 @@ partial class AutoFills
 
     [NotNull]
     private Foo Model2 { get; set; } = new();
+
     [NotNull]
     private Foo Model3 { get; set; } = new();
 
+    [NotNull]
+    private Foo Model4 { get; set; } = new();
+
     private static string? OnGetDisplayText(Foo? foo) => foo?.Name;
 
     [NotNull]
@@ -29,10 +33,15 @@ partial class AutoFills
     [NotNull]
     private IEnumerable<Foo>? Items3 { get; set; }
 
+    [NotNull]
+    private IEnumerable<Foo>? Items4 { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
 
+    private bool _isClearable = true;
+
     /// <inheritdoc/>
     protected override void OnInitialized()
     {
@@ -46,6 +55,9 @@ protected override void OnInitialized()
 
         Items3 = Foo.GenerateFoo(LocalizerFoo);
         Model3 = Items3.First();
+
+        Items4 = Foo.GenerateFoo(LocalizerFoo);
+        Model4 = Items3.First();
     }
 
     private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
@@ -54,6 +66,27 @@ private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
         return Task.FromResult(items);
     }
 
+    private Task<IEnumerable<Foo>> OnCustomVirtulizeFilter(string searchText)
+    {
+        var items = string.IsNullOrEmpty(searchText) ? Items4 : Items4.Where(i => i.Name!.Contains(searchText));
+        return Task.FromResult(items);
+    }
+
+    private async Task<QueryData<Foo>> OnQueryAsync(VirtualizeQueryOption option)
+    {
+        await Task.Delay(200);
+        var items = Foo.GenerateFoo(LocalizerFoo);
+        if (!string.IsNullOrEmpty(option.SearchText))
+        {
+            items = [.. items.Where(i => i.Name!.Contains(option.SearchText, StringComparison.OrdinalIgnoreCase))];
+        }
+        return new QueryData<Foo>
+        {
+            Items = items.Skip(option.StartIndex).Take(option.Count),
+            TotalCount = items.Count
+        };
+    }
+
     /// <summary>
     /// Get property method
     /// </summary>