feat(EditorForm): add LabelWidth parameter

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

@@ -105,12 +105,15 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["AlignmentTitle"]" Introduction="@Localizer["AlignmentIntro"]" Name="Alignment">
-    <ul class="ul-demo mb-3">
-        <li>@((MarkupString)Localizer["AlignmentTips1"].Value)</li>
-        <li>@((MarkupString)Localizer["AlignmentTips2"].Value)</li>
-    </ul>
+    <section ignore>
+        <ul class="ul-demo">
+            <li>@((MarkupString)Localizer["AlignmentTips1"].Value)</li>
+            <li>@((MarkupString)Localizer["AlignmentTips2"].Value)</li>
+            <li>@((MarkupString)Localizer["AlignmentTips3"].Value)</li>
+        </ul>
+    </section>
     <ValidateForm Model="@Model">
-        <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right">
+        <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right" LabelWidth="80">
             <FieldItems>
                 <EditorItem @bind-Field="@context.Hobby" Items="@Hobbies" />
             </FieldItems>

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

@@ -134,6 +134,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "Alignment",
             ValueList = "None|Left|Center|Right",
             DefaultValue = "None"
+        },
+        new()
+        {
+            Name = "LabelWidth",
+            Description = Localizer["LabelWidthAttr"],
+            Type = "int?",
+            ValueList = " — ",
+            DefaultValue = " — "
         }
     ];
 

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

@@ -2540,7 +2540,8 @@
     "AlignmentTitle": "Custom rendering component types",
     "AlignmentIntro": "Control the rendering component type by setting the <code>CompnentType</code> property values",
     "AlignmentTips1": "<code>inline</code> layout mode aligns the labels in the form right by setting the <code>LabelAlign=\"Alignment.Right\"</code>",
-    "AlignmentTips2": "<code>Buttons</code> template you can nest <code>div</code> and style <code>text-end</code> align the right side of the button",
+    "AlignmentTips2": "In layout mode, adjust the label width by setting the value of <code>LabelWidth</code>. If the global style variable <code>--bb-row-label-width</code> is not set by default, the default value is <b>120px</b>",
+    "AlignmentTips3": "<code>Buttons</code> template you can nest <code>div</code> and style <code>text-end</code> align the right side of the button",
     "EditorFormAttributeTitle": "EditorItem Attribute",
     "Att1": "The currently bound data model",
     "Att2": "Bind column templates",
@@ -2556,6 +2557,7 @@
     "Att12": "Whether to read only",
     "Att13": "Edit the column's front label name",
     "Att14": "Column editing template",
+    "LabelWidthAttr": "Label width",
     "IsDisplay": "Shown as Display component",
     "ShowLabelTooltip": "Show complete information when mouse hover over the label",
     "GroupBoxTitle": "An example of a form",

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

@@ -2540,7 +2540,8 @@
     "AlignmentTitle": "自定义渲染组件类型",
     "AlignmentIntro": "通过设置 <code>CompnentType</code> 属性值来控制渲染组件类型",
     "AlignmentTips1": "<code>Inline</code> 布局模式下通过设置 <code>LabelAlign=\"Alignment.Right\"</code> 使表单内标签右对齐",
-    "AlignmentTips2": "<code>Buttons</code> 模板内可嵌套 <code>div</code> 并设置样式 <code>text-end</code> 使按钮右侧对齐",
+    "AlignmentTips2": "<code>Inline</code> 布局模式下通过设置 <code>LabelWidth</code> 值调整标签宽度，默认未设置使用全局样式变量 <code>--bb-row-label-width</code> 值，默认值为 120px",
+    "AlignmentTips3": "<code>Buttons</code> 模板内可嵌套 <code>div</code> 并设置样式 <code>text-end</code> 使按钮右侧对齐",
     "EditorFormAttributeTitle": "EditorItem 属性",
     "Att1": "当前绑定数据模型",
     "Att2": "绑定列模板",
@@ -2556,6 +2557,7 @@
     "Att12": "是否只读",
     "Att13": "编辑列前置标签名",
     "Att14": "列编辑模板",
+    "LabelWidthAttr": "标签宽度",
     "IsDisplay": "是否显示为 Display 组件",
     "ShowLabelTooltip": "鼠标悬停标签时显示完整信息",
     "GroupBoxTitle": "表单示例",

src/BootstrapBlazor/Components/EditorForm/EditorForm.razor

@@ -50,7 +50,7 @@ else
 @code
 {
     RenderFragment RenderUnsetGroupItems =>
-    @<div class="@FormClassString">
+    @<div class="@FormClassString" style="@FormStyleString">
         @foreach (var item in UnsetGroupItems)
         {
             var render = GetRenderTemplate(item);

src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs

@@ -48,6 +48,10 @@ public partial class EditorForm<TModel> : IShowLabel
         .AddClass("form-inline-center", RowType == RowType.Inline && LabelAlign == Alignment.Center)
         .Build();
 
+    private string? FormStyleString => CssBuilder.Default()
+        .AddClass($"--bb-row-label-width: {LabelWidth}px;", LabelWidth.HasValue)
+        .Build();
+
     /// <summary>
     /// 获得/设置 每行显示组件数量 默认为 null
     /// </summary>
@@ -72,6 +76,12 @@ public partial class EditorForm<TModel> : IShowLabel
     [Parameter]
     public Alignment LabelAlign { get; set; }
 
+    /// <summary>
+    /// 获得/设置 标签宽度 默认 null 未设置使用全局设置 <code>--bb-row-label-width</code> 值
+    /// </summary>
+    [Parameter]
+    public int? LabelWidth { get; set; }
+
     /// <summary>
     /// 获得/设置 列模板
     /// </summary>

test/UnitTest/Components/EditorFormTest.cs

@@ -169,9 +169,11 @@ public void Alignment_Right()
             pb.Add(a => a.ItemChangedType, ItemChangedType.Add);
             pb.Add(a => a.RowType, RowType.Inline);
             pb.Add(a => a.LabelAlign, Alignment.Right);
+            pb.Add(a => a.LabelWidth, 80);
         });
         cut.Contains("row g-3 form-inline form-inline-end");
         cut.Contains("col-12");
+        cut.Contains("--bb-row-label-width: 80px;");
 
         cut.SetParametersAndRender(pb =>
         {