From 73e7402c472d364a9ba0799fc7a2a6833485bc97 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 17 Feb 2025 13:17:19 +0800 Subject: [PATCH 1/2] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=20LabelWidth=20?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E8=AF=B4=E6=98=8E=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Labels.razor | 64 +++++++++++++++++-- 1 file changed, 59 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Labels.razor b/src/BootstrapBlazor.Server/Components/Samples/Labels.razor index b387c54bc57..fd66524cadf 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Labels.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Labels.razor @@ -201,12 +201,17 @@ + + + +
+

@((MarkupString)LocalizerForm["ValidateFormNormalFormLabelWidth"].Value)

+

@((MarkupString)LocalizerForm["LongDisplayDescription"].Value)

+ 
:root {
+    --bb-row-label-width: 120px;
+}
+
-

- @((MarkupString)Localizer["LabelsValidateForm2Description4"].Value) -

@((MarkupString)LocalizerForm["ValidateFormNormalFormLabelWidth"].Value)
-
@((MarkupString)LocalizerForm["LongDisplayDescription"].Value)
-

@@ -220,3 +225,52 @@
+ + +
+

@((MarkupString)Localizer["LabelsWidthDescription"].Value)

+ 
<ValidateForm Model="@@Dummy4" LabelWidth="100">
+    <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right" LabelWidth="120"
+                AutoGenerateAllItem="false">
+        <FieldItems>
+            <EditorItem @@bind-Field="@@Dummy4.Name"></EditorItem>
+        </FieldItems>
+    </EditorForm>
+
+    <BootstrapLabelSetting LabelWidth="220">
+        <div class="row form-inline g-3 mt-0">
+            <div class="col-12 col-sm-6">
+                <BootstrapLabel LabelWidth="180" Value="@@LocalizerForm["LongDisplayText"]"></BootstrapLabel>
+                <BootstrapInput @@bind-Value="Dummy4.Name" ShowLabel="false" />
+            </div>
+        </div>
+    </BootstrapLabelSetting>
+</ValidateForm>
+

+ @((MarkupString)Localizer["LabelsWidthCode1"].Value) 180 +

+
    +
  • ValidateForm 100
    • +
  • EditorForm 120
    • +
  • BootstrapLabelSetting 220
    • +
  • BootstrapLabel 180
    • +
+
+ + + + + + + + +
+
+ + +
+
+ + + From 5d0332f0e3a7720613f4a223abbf445fc8c41724 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 17 Feb 2025 13:17:30 +0800 Subject: [PATCH 2/2] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E6=9C=AC=E5=9C=B0?= =?UTF-8?q?=E5=8C=96=E8=B5=84=E6=BA=90=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Locales/en-US.json | 9 +++++++-- src/BootstrapBlazor.Server/Locales/zh-CN.json | 9 +++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 837a6d31bc3..867cde16d73 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -1029,9 +1029,14 @@ "LabelsValidateForm2Description1": "Show label
The ShowLabel property of the EditorForm component is not set. If it is not set, it is equivalent to set to true. All components display tags
", "LabelsValidateForm2Description2": "Do not display labels
Set ShowLabel=\"false\", all form components in the component Do not display tags
", "LabelsValidateForm2Description3": "Show labels
set class form-inline for the all labels within the component are prefixed
", - "LabelsValidateForm2Description4": "Tooltip", "ValidateFormAlignRight": "Right
form-inline-end set the label alignment is right
", - "ValidateFormAlignCenter": "Center
form-inline-center set the label alignment is center
" + "ValidateFormAlignCenter": "Center
form-inline-center set the label alignment is center
", + "LabelsRowLabelWidthTitle": "Style setting label width", + "LabelsRowLabelWidthIntro": "Control label width by setting style variable --bb-row-label-width", + "LabelsWidthTitle": "Parameter setting label width", + "LabelsWidthIntro": "Control the label width by setting the variable LabelWidth", + "LabelsWidthDescription": "The components ValidateForm EditorForm BootstrapLabelSetting ValidateForm can set the label width value. The components use the proximity principle to determine the final value", + "LabelsWidthCode1": "As shown in the code above, the final value is 180 according to the principle of proximity" }, "BootstrapBlazor.Server.Components.Pages.Install": { "InstallTitle": "Install", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 005f2dfc7f7..6603ae440b0 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -1029,9 +1029,14 @@ "LabelsValidateForm2Description1": "显示标签
未设置 EditorForm 组件的 ShowLabel 属性，未设置时等同于设置为 true，所有组件 显示 标签
", "LabelsValidateForm2Description2": "不显示标签
设置 ShowLabel=\"false\"，组件内的所有表单组件 不显示 标签
", "LabelsValidateForm2Description3": "显示标签
设置样式 form-inline，组件内的所有表单组件标签前置
", - "LabelsValidateForm2Description4": "标签提示", "ValidateFormAlignRight": "右对齐
通过设置样式 form-inline-end 标签右对齐
", - "ValidateFormAlignCenter": "居中对齐
通过设置样式 form-inline-center 标签居中对齐
" + "ValidateFormAlignCenter": "居中对齐
通过设置样式 form-inline-center 标签居中对齐
", + "LabelsRowLabelWidthTitle": "样式设置标签宽度", + "LabelsRowLabelWidthIntro": "通过设置样式变量 --bb-row-label-width 控制标签宽度", + "LabelsWidthTitle": "参数设置标签宽度", + "LabelsWidthIntro": "通过设置变量 LabelWidth 控制标签宽度", + "LabelsWidthDescription": "组件 ValidateForm EditorForm BootstrapLabelSetting ValidateForm 均可以设置标签宽度值，组件采用 就近原则 来确定最终值", + "LabelsWidthCode1": "如上代码所示, 根据就近原则最终取值 180" }, "BootstrapBlazor.Server.Components.Pages.Install": { "InstallTitle": "安装",