!1661 feat(#I43BWW): SearchDialog add inline layout

* doc: SearchDialog 增加行布局示例
* feat: SearchDialog 支持行布局参数
* feat: DialogBase 增加行布局参数
* feat: EditForm 支持 inline 模式
* doc: 更新 Row inline 布局示例
* chore: 更新打包脚本与样式
* doc: 更新注释
* style: 适配 CheckboxList 组件 inline 布局
* style: 适配 inline 模式下 switch 组件
* style: 修复 inline 模式下垂直对齐问题
* feat: 增加 inline 模式
* feat: 增加 inline 样式

src/BootstrapBlazor.Shared/Pages/Samples/SearchDialogs.razor

@@ -19,4 +19,8 @@
     <Button Text="点击弹出搜索弹窗" OnClickWithoutRender="@ShowColumnsDialog" />
 </Block>
 
+<Block Title="设置搜索弹窗内布局方式" Introduction="通过设定 <code>RowType</code> 参数显式设置弹窗内组件布局方式，默认为上下布局，可设置值 <code>inline</code> 水平布局">
+    <Button Text="点击弹出搜索弹窗" OnClickWithoutRender="@ShowInlineDialog" />
+</Block>
+
 <AttributeTable Items="@GetAttributes()" Title="SearchDialogOption 属性" />

src/BootstrapBlazor.Shared/Pages/Samples/SearchDialogs.razor.cs

@@ -62,6 +62,19 @@ namespace BootstrapBlazor.Shared.Pages
             await DialogService.ShowSearchDialog(option);
         }
 
+        private async Task ShowInlineDialog()
+        {
+            var model = new Foo();
+            var option = new SearchDialogOption<Foo>()
+            {
+                Title = "搜索弹出框",
+                RowType = RowType.Inline,
+                Model = model,
+                Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
+            };
+            await DialogService.ShowSearchDialog(option);
+        }
+
         /// <summary>
         /// 获得属性方法
         /// </summary>
@@ -124,6 +137,20 @@ namespace BootstrapBlazor.Shared.Pages
                 Type = "Func<Task>",
                 ValueList = " — ",
                 DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "ItemsPerRow",
+                Description = "每行显示组件数量",
+                Type = "int?",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "RowType",
+                Description = "设置组件布局方式",
+                Type = "int?",
+                ValueList = "Row|Inline",
+                DefaultValue = "Row"
             }
         };
     }

src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesSearch.razor

@@ -20,7 +20,7 @@
             <TableColumn @bind-Field="@context.Education" />
         </TableColumns>
         <SearchTemplate>
-            <div class="row g-3">
+            <div class="row g-3 form-inline">
                 <div class="col-12 col-sm-6">
                     <BootstrapInput @bind-Value="@context.Name" placeholder="不可为空，50字以内" maxlength="50" ShowLabel="true" DisplayText="@Localizer[nameof(context.Name)]" />
                 </div>

src/BootstrapBlazor/Components/Dialog/DialogBase.cs

@@ -39,6 +39,18 @@ namespace BootstrapBlazor.Components
         [Parameter]
         public bool ShowLabel { get; set; }
 
+        /// <summary>
+        /// 获得/设置 每行显示组件数量 默认为 null
+        /// </summary>
+        [Parameter]
+        public int? ItemsPerRow { get; set; }
+
+        /// <summary>
+        /// 获得/设置 设置行格式 默认 Row 布局
+        /// </summary>
+        [Parameter]
+        public RowType RowType { get; set; }
+
         /// <summary>
         /// OnInitialized 方法
         /// </summary>

src/BootstrapBlazor/Components/Dialog/DialogService.cs

@@ -68,8 +68,15 @@ namespace BootstrapBlazor.Components
                     {
                         await option.OnSearchClick();
                     }
-                }))
+                })),
+                new(nameof(RowType), option.RowType)
             };
+
+            if (option.ItemsPerRow.HasValue)
+            {
+                parameters.Add(new(nameof(ItemsPerRow), option.ItemsPerRow));
+            }
+
             if (!string.IsNullOrEmpty(option.ResetButtonText))
             {
                 parameters.Add(new(nameof(SearchDialogOption<TModel>.ResetButtonText), option.ResetButtonText));

src/BootstrapBlazor/Components/Dialog/SearchDialog.razor

@@ -10,7 +10,7 @@
 else
 {
     <CascadingValue Value="Items" IsFixed="true">
-        <EditorForm TModel="TModel" Model="Model">
+        <EditorForm TModel="TModel" Model="Model" RowType="RowType" ItemsPerRow="ItemsPerRow">
             <Buttons>
                 @RenderFooter
             </Buttons>

src/BootstrapBlazor/Components/Dialog/SearchDialogOption.cs

@@ -31,6 +31,16 @@ namespace BootstrapBlazor.Components
         /// </summary>
         public bool ShowLabel { get; set; }
 
+        /// <summary>
+        /// 获得/设置 每行显示组件数量 默认为 null
+        /// </summary>
+        public int? ItemsPerRow { get; set; }
+
+        /// <summary>
+        /// 获得/设置 设置行内组件布局格式 默认 Row 布局
+        /// </summary>
+        public RowType RowType { get; set; }
+
         /// <summary>
         /// 获得/设置 编辑框模型
         /// </summary>