Skip to content

doc(BootstrapLabel): add document for LabelWidth parameter #5380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 17, 2025
Merged

doc(BootstrapLabel): add document for LabelWidth parameter #5380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73e7402
doc: 增加 LabelWidth 相关说明文档
ArgoZhang Feb 17, 2025
5d0332f
doc: 增加本地化资源文件
ArgoZhang Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 59 additions & 5 deletions src/BootstrapBlazor.Server/Components/Samples/Labels.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,12 +201,17 @@
</div>
</div>
</ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["LabelsRowLabelWidthTitle"]" Introduction="@Localizer["LabelsRowLabelWidthIntro"]" Name="RowLabelWidth">
<section ignore>
<p>@((MarkupString)LocalizerForm["ValidateFormNormalFormLabelWidth"].Value)</p>
<p>@((MarkupString)LocalizerForm["LongDisplayDescription"].Value)</p>
<Pre>:root {
--bb-row-label-width: 120px;
}</Pre>
</section>

<p class="mt-3">
@((MarkupString)Localizer["LabelsValidateForm2Description4"].Value)
<div>@((MarkupString)LocalizerForm["ValidateFormNormalFormLabelWidth"].Value)</div>
<div class="mt-2">@((MarkupString)LocalizerForm["LongDisplayDescription"].Value)</div>
</p>
<ValidateForm Model="@Dummy4">
<div class="row g-3">
<div class="col-12">
Expand All @@ -220,3 +225,52 @@
</div>
</ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["LabelsWidthTitle"]" Introduction="@Localizer["LabelsWidthIntro"]" Name="LabelWidth">
<section ignore>
<p>@((MarkupString)Localizer["LabelsWidthDescription"].Value)</p>
<Pre>&lt;ValidateForm Model="@@Dummy4" LabelWidth="100"&gt;
&lt;EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right" LabelWidth="120"
AutoGenerateAllItem="false"&gt;
&lt;FieldItems&gt;
&lt;EditorItem @@bind-Field="@@Dummy4.Name"&gt;&lt;/EditorItem&gt;
&lt;/FieldItems&gt;
&lt;/EditorForm&gt;

&lt;BootstrapLabelSetting LabelWidth="220"&gt;
&lt;div class="row form-inline g-3 mt-0"&gt;
&lt;div class="col-12 col-sm-6"&gt;
&lt;BootstrapLabel LabelWidth="180" Value="@@LocalizerForm["LongDisplayText"]"&gt;&lt;/BootstrapLabel&gt;
&lt;BootstrapInput @@bind-Value="Dummy4.Name" ShowLabel="false" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/BootstrapLabelSetting&gt;
&lt;/ValidateForm&gt;</Pre>
<p>
@((MarkupString)Localizer["LabelsWidthCode1"].Value) <b>180</b>
</p>
<ul class="ul-demo">
<li><code>ValidateForm</code> <b>100</b></li>
<li><code>EditorForm</code> <b>120</b></li>
<li><code>BootstrapLabelSetting</code> <b>220</b></li>
<li><code>BootstrapLabel</code> <b>180</b></li>
</ul>
</section>
<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>
</DemoBlock>
9 changes: 7 additions & 2 deletions src/BootstrapBlazor.Server/Locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1029,9 +1029,14 @@
"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>",
"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>",
"LabelsValidateForm2Description3": "<b>Show labels</b><div>set class <code>form-inline</code> for the all labels within the component are prefixed</div>",
"LabelsValidateForm2Description4": "<b>Tooltip</b>",
"ValidateFormAlignRight": "<b>Right</b><div><code>form-inline-end</code> set the label alignment is right</div>",
"ValidateFormAlignCenter": "<b>Center</b><div><code>form-inline-center</code> set the label alignment is center</div>"
"ValidateFormAlignCenter": "<b>Center</b><div><code>form-inline-center</code> set the label alignment is center</div>",
"LabelsRowLabelWidthTitle": "Style setting label width",
"LabelsRowLabelWidthIntro": "Control label width by setting style variable <code>--bb-row-label-width</code>",
"LabelsWidthTitle": "Parameter setting label width",
"LabelsWidthIntro": "Control the label width by setting the variable <code>LabelWidth</code>",
"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",
"LabelsWidthCode1": "As shown in the code above, the final value is <b>180</b> according to the principle of proximity"
},
"BootstrapBlazor.Server.Components.Pages.Install": {
"InstallTitle": "Install",
Expand Down
9 changes: 7 additions & 2 deletions src/BootstrapBlazor.Server/Locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1029,9 +1029,14 @@
"LabelsValidateForm2Description1": "<b>显示标签</b><div>未设置 <coe>EditorForm</coe> 组件的 <code>ShowLabel</code> 属性，未设置时等同于设置为 <code>true</code>，所有组件 <b>显示</b> 标签</div>",
"LabelsValidateForm2Description2": "<b>不显示标签</b><div>设置 <code>ShowLabel=\"false\"</code>，组件内的所有表单组件 <b>不显示</b> 标签</div>",
"LabelsValidateForm2Description3": "<b>显示标签</b><div>设置样式 <code>form-inline</code>，组件内的所有表单组件标签前置</div>",
"LabelsValidateForm2Description4": "<b>标签提示</b>",
"ValidateFormAlignRight": "<b>右对齐</b><div>通过设置样式 <code>form-inline-end</code> 标签右对齐</div>",
"ValidateFormAlignCenter": "<b>居中对齐</b><div>通过设置样式 <code>form-inline-center</code> 标签居中对齐</div>"
"ValidateFormAlignCenter": "<b>居中对齐</b><div>通过设置样式 <code>form-inline-center</code> 标签居中对齐</div>",
"LabelsRowLabelWidthTitle": "样式设置标签宽度",
"LabelsRowLabelWidthIntro": "通过设置样式变量 <code>--bb-row-label-width</code> 控制标签宽度",
"LabelsWidthTitle": "参数设置标签宽度",
"LabelsWidthIntro": "通过设置变量 <code>LabelWidth</code> 控制标签宽度",
"LabelsWidthDescription": "组件 <code>ValidateForm</code> <code>EditorForm</code> <code>BootstrapLabelSetting</code> <code>ValidateForm</code> 均可以设置标签宽度值，组件采用 <b>就近原则</b> 来确定最终值",
"LabelsWidthCode1": "如上代码所示, 根据就近原则最终取值 <b>180</b>"
},
"BootstrapBlazor.Server.Components.Pages.Install": {
"InstallTitle": "安装",
Expand Down