Skip to content

Commit e9f89e8

Browse files
ArgoZhangArgoZhang
authored
doc(BootstrapLabel): add document for LabelWidth parameter (#5380)
* doc: 增加 LabelWidth 相关说明文档 * doc: 增加本地化资源文件
1 parent 9f3214b commit e9f89e8

File tree

3 files changed

+73
-9
lines changed

3 files changed

+73
-9
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Labels.razor‎

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -201,12 +201,17 @@
201201
</div>
202202
</div>
203203
</ValidateForm>
204+
</DemoBlock>
205+
206+
<DemoBlock Title="@Localizer["LabelsRowLabelWidthTitle"]" Introduction="@Localizer["LabelsRowLabelWidthIntro"]" Name="RowLabelWidth">
207+
<section ignore>
208+
<p>@((MarkupString)LocalizerForm["ValidateFormNormalFormLabelWidth"].Value)</p>
209+
<p>@((MarkupString)LocalizerForm["LongDisplayDescription"].Value)</p>
210+
<Pre>:root {
211+
--bb-row-label-width: 120px;
212+
}</Pre>
213+
</section>
204214

205-
<p class="mt-3">
206-
@((MarkupString)Localizer["LabelsValidateForm2Description4"].Value)
207-
<div>@((MarkupString)LocalizerForm["ValidateFormNormalFormLabelWidth"].Value)</div>
208-
<div class="mt-2">@((MarkupString)LocalizerForm["LongDisplayDescription"].Value)</div>
209-
</p>
210215
<ValidateForm Model="@Dummy4">
211216
<div class="row g-3">
212217
<div class="col-12">
@@ -220,3 +225,52 @@
220225
</div>
221226
</ValidateForm>
222227
</DemoBlock>
228+
229+
<DemoBlock Title="@Localizer["LabelsWidthTitle"]" Introduction="@Localizer["LabelsWidthIntro"]" Name="LabelWidth">
230+
<section ignore>
231+
<p>@((MarkupString)Localizer["LabelsWidthDescription"].Value)</p>
232+
<Pre>&lt;ValidateForm Model="@@Dummy4" LabelWidth="100"&gt;
233+
&lt;EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right" LabelWidth="120"
234+
AutoGenerateAllItem="false"&gt;
235+
&lt;FieldItems&gt;
236+
&lt;EditorItem @@bind-Field="@@Dummy4.Name"&gt;&lt;/EditorItem&gt;
237+
&lt;/FieldItems&gt;
238+
&lt;/EditorForm&gt;
239+
240+
&lt;BootstrapLabelSetting LabelWidth="220"&gt;
241+
&lt;div class="row form-inline g-3 mt-0"&gt;
242+
&lt;div class="col-12 col-sm-6"&gt;
243+
&lt;BootstrapLabel LabelWidth="180" Value="@@LocalizerForm["LongDisplayText"]"&gt;&lt;/BootstrapLabel&gt;
244+
&lt;BootstrapInput @@bind-Value="Dummy4.Name" ShowLabel="false" /&gt;
245+
&lt;/div&gt;
246+
&lt;/div&gt;
247+
&lt;/BootstrapLabelSetting&gt;
248+
&lt;/ValidateForm&gt;</Pre>
249+
<p>
250+
@((MarkupString)Localizer["LabelsWidthCode1"].Value) <b>180</b>
251+
</p>
252+
<ul class="ul-demo">
253+
<li><code>ValidateForm</code> <b>100</b></li>
254+
<li><code>EditorForm</code> <b>120</b></li>
255+
<li><code>BootstrapLabelSetting</code> <b>220</b></li>
256+
<li><code>BootstrapLabel</code> <b>180</b></li>
257+
</ul>
258+
</section>
259+
<ValidateForm Model="@Dummy4" LabelWidth="100">
260+
<EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right" LabelWidth="120"
261+
AutoGenerateAllItem="false">
262+
<FieldItems>
263+
<EditorItem @bind-Field="@Dummy4.Name"></EditorItem>
264+
</FieldItems>
265+
</EditorForm>
266+
267+
<BootstrapLabelSetting LabelWidth="220">
268+
<div class="row form-inline g-3 mt-0">
269+
<div class="col-12 col-sm-6">
270+
<BootstrapLabel LabelWidth="180" Value="@LocalizerForm["LongDisplayText"]"></BootstrapLabel>
271+
<BootstrapInput @bind-Value="Dummy4.Name" ShowLabel="false" />
272+
</div>
273+
</div>
274+
</BootstrapLabelSetting>
275+
</ValidateForm>
276+
</DemoBlock>

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1029,9 +1029,14 @@
10291029
"LabelsValidateForm2Description1": "<b>Show label</b><div>The <code>ShowLabel</code> property of the <coe>EditorForm</coe> component is not set. If it is not set, it is equivalent to set to <code>true</code>. All components <b>display</b> tags</div>",
10301030
"LabelsValidateForm2Description2": "<b>Do not display labels</b><div>Set <code>ShowLabel=\"false\"</code>, all form components in the component <b>Do not display</b> tags</div>",
10311031
"LabelsValidateForm2Description3": "<b>Show labels</b><div>set class <code>form-inline</code> for the all labels within the component are prefixed</div>",
1032-
"LabelsValidateForm2Description4": "<b>Tooltip</b>",
10331032
"ValidateFormAlignRight": "<b>Right</b><div><code>form-inline-end</code> set the label alignment is right</div>",
1034-
"ValidateFormAlignCenter": "<b>Center</b><div><code>form-inline-center</code> set the label alignment is center</div>"
1033+
"ValidateFormAlignCenter": "<b>Center</b><div><code>form-inline-center</code> set the label alignment is center</div>",
1034+
"LabelsRowLabelWidthTitle": "Style setting label width",
1035+
"LabelsRowLabelWidthIntro": "Control label width by setting style variable <code>--bb-row-label-width</code>",
1036+
"LabelsWidthTitle": "Parameter setting label width",
1037+
"LabelsWidthIntro": "Control the label width by setting the variable <code>LabelWidth</code>",
1038+
"LabelsWidthDescription": "The components <code>ValidateForm</code> <code>EditorForm</code> <code>BootstrapLabelSetting</code> <code>ValidateForm</code> can set the label width value. The components use the <b>proximity principle</b> to determine the final value",
1039+
"LabelsWidthCode1": "As shown in the code above, the final value is <b>180</b> according to the principle of proximity"
10351040
},
10361041
"BootstrapBlazor.Server.Components.Pages.Install": {
10371042
"InstallTitle": "Install",

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1029,9 +1029,14 @@
10291029
"LabelsValidateForm2Description1": "<b>显示标签</b><div>未设置 <coe>EditorForm</coe> 组件的 <code>ShowLabel</code> 属性，未设置时等同于设置为 <code>true</code>，所有组件 <b>显示</b> 标签</div>",
10301030
"LabelsValidateForm2Description2": "<b>不显示标签</b><div>设置 <code>ShowLabel=\"false\"</code>，组件内的所有表单组件 <b>不显示</b> 标签</div>",
10311031
"LabelsValidateForm2Description3": "<b>显示标签</b><div>设置样式 <code>form-inline</code>，组件内的所有表单组件标签前置</div>",
1032-
"LabelsValidateForm2Description4": "<b>标签提示</b>",
10331032
"ValidateFormAlignRight": "<b>右对齐</b><div>通过设置样式 <code>form-inline-end</code> 标签右对齐</div>",
1034-
"ValidateFormAlignCenter": "<b>居中对齐</b><div>通过设置样式 <code>form-inline-center</code> 标签居中对齐</div>"
1033+
"ValidateFormAlignCenter": "<b>居中对齐</b><div>通过设置样式 <code>form-inline-center</code> 标签居中对齐</div>",
1034+
"LabelsRowLabelWidthTitle": "样式设置标签宽度",
1035+
"LabelsRowLabelWidthIntro": "通过设置样式变量 <code>--bb-row-label-width</code> 控制标签宽度",
1036+
"LabelsWidthTitle": "参数设置标签宽度",
1037+
"LabelsWidthIntro": "通过设置变量 <code>LabelWidth</code> 控制标签宽度",
1038+
"LabelsWidthDescription": "组件 <code>ValidateForm</code> <code>EditorForm</code> <code>BootstrapLabelSetting</code> <code>ValidateForm</code> 均可以设置标签宽度值，组件采用 <b>就近原则</b> 来确定最终值",
1039+
"LabelsWidthCode1": "如上代码所示, 根据就近原则最终取值 <b>180</b>"
10351040
},
10361041
"BootstrapBlazor.Server.Components.Pages.Install": {
10371042
"InstallTitle": "安装",

0 commit comments

Comments
 (0)