doc: 更新示例

Author: ArgoZhang

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

@@ -5,7 +5,7 @@
 
 <h4>@Localizer["MultiSelectsDescription"]</h4>
 
-@* <DemoBlock Title="@Localizer["MultiSelectColorTitle"]" Introduction="@Localizer["MultiSelectColorIntro"]" Name="Color">
+<DemoBlock Title="@Localizer["MultiSelectColorTitle"]" Introduction="@Localizer["MultiSelectColorIntro"]" Name="Color">
     <div class="row g-3">
         <div class="col-12 col-sm-6">
             <MultiSelect TValue="string" Items="@Items1" />
@@ -293,14 +293,14 @@ private enum MultiSelectEnumFoo
             <Display Value="@_editString"></Display>
         </div>
     </div>
-</DemoBlock> *@
+</DemoBlock>
 
 <DemoBlock Title="@Localizer["MultiSelectVirtualizeTitle"]"
            Introduction="@Localizer["MultiSelectVirtualizeIntro"]"
            Name="IsVirtualize">
     <section ignore>
         <p>@((MarkupString)Localizer["MultiSelectVirtualizeDescription"].Value)</p>
-        <div class="row mb-3">
+        <div class="row g-3">
             <div class="col-12 col-sm-6">
                 <BootstrapInputGroup>
                     <BootstrapInputGroupLabel DisplayText="ShowSearch" />
@@ -309,34 +309,40 @@ private enum MultiSelectEnumFoo
             </div>
             <div class="col-12 col-sm-6">
                 <BootstrapInputGroup>
-                    <BootstrapInputGroupLabel DisplayText="IsClearable" />
+                    <BootstrapInputGroupLabel DisplayText="IsFixedSearch" />
                     <Checkbox @bind-Value="@_isFixedSearch" />
                 </BootstrapInputGroup>
             </div>
+            <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-6">
-            <MultiSelect IsVirtualize="true" @bind-Value="VirtualItemString1" OnQueryAsync="OnQueryAsync"
-                         ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch">
+            <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString1" OnQueryAsync="OnQueryAsync"
+                         ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
             </MultiSelect>
         </div>
         <div class="col-6">
-            <Display TValue="string" Value="@VirtualItemString1"></Display>
+            <Display TValue="string" Value="@_virtualItemString1"></Display>
         </div>
     </div>
 
     <p class="code-label">2. 使用 Items 作为数据源</p>
     <div class="row">
         <div class="col-6">
-            <MultiSelect IsVirtualize="true" @bind-Value="VirtualItemString2" Items="VirtualItems"
-                         ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch">
+            <MultiSelect IsVirtualize="true" @bind-Value="_virtualItemString2" Items="VirtualItems"
+                         ShowSearch="_showSearch" IsFixedSearch="_isFixedSearch" IsClearable="_isClearable">
             </MultiSelect>
         </div>
         <div class="col-6">
-            <Display TValue="string" Value="@VirtualItemString2"></Display>
+            <Display TValue="string" Value="@_virtualItemString2"></Display>
         </div>
     </div>
  </DemoBlock>

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

@@ -113,16 +113,16 @@ private enum MultiSelectEnumFoo
     [NotNull]
     private List<Foo>? Foos { get; set; }
 
-    private string? VirtualItemString1 { get; set; }
+    private string? _virtualItemString1;
 
-    private string? VirtualItemString2 { get; set; }
+    private string? _virtualItemString2;
 
     private IEnumerable<SelectedItem> VirtualItems => Foos.Select(i => new SelectedItem(i.Name!, i.Name!)).ToList();
 
     private string? _editString;
 
     private bool _isFixedSearch;
-
+    private bool _isClearable;
     private bool _showSearch;
 
     private async Task<SelectedItem> OnEditCallback(string value)
@@ -214,6 +214,8 @@ protected override void OnInitialized()
 
         Items = GenerateDataSource(DataSource);
         Foos = Foo.GenerateFoo(LocalizerFoo);
+        _virtualItemString1 = Foos[79].Name;
+        _virtualItemString2 = Foos[45].Name;
     }
 
     private static List<SelectedItem> GenerateItems() =>