From 1bddd86b8d1f8df191a601dc2084afbb41d2cf20 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 11:42:54 +0800 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20EditorForm=20ShowLabel=20?= =?UTF-8?q?=E5=8F=82=E6=95=B0=E4=BD=BF=E7=94=A8=20ValidateForm=20=E7=BA=A7?= =?UTF-8?q?=E8=81=94=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/EditorForm/EditorForm.razor | 24 ++++++++--------- .../Components/EditorForm/EditorForm.razor.cs | 27 ++++++++++++++----- 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor b/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor index a66ca39c6..cd8c7341a 100644 --- a/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor +++ b/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor @@ -16,21 +16,21 @@ else {
- @foreach (var item in FormItems) - { - @if (item.EditTemplate != null) + + @foreach (var item in FormItems) { - + @if (item.EditTemplate != null) + { @item.EditTemplate.Invoke(Model) - + } + else + { +
+ @AutoGenerateTemplate(item) +
+ } } - else - { -
- @AutoGenerateTemplate(item) -
- } - } +
@Buttons diff --git a/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs b/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs index d322d978d..ee0ef07e8 100644 --- a/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs +++ b/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor.cs @@ -57,10 +57,10 @@ namespace BootstrapBlazor.Components public TModel? Model { get; set; } /// - /// 获得/设置 是否显示前置标签 默认为 true 显示标签 + /// 获得/设置 是否显示前置标签 默认为 null 未设置时默认显示标签 /// [Parameter] - public bool ShowLabel { get; set; } = true; + public bool? ShowLabel { get; set; } /// /// 获得/设置 是否自动生成模型的所有属性 默认为 true 生成所有属性 @@ -80,6 +80,12 @@ namespace BootstrapBlazor.Components [CascadingParameter] private IEnumerable? CascadeEditorItems { get; set; } + /// + /// 获得 ValidateForm 实例 + /// + [CascadingParameter] + private ValidateForm? ValidateForm { get; set; } + [Inject] [NotNull] private IStringLocalizer>? Localizer { get; set; } @@ -123,6 +129,17 @@ namespace BootstrapBlazor.Components PlaceHolderText ??= Localizer[nameof(PlaceHolderText)]; } + /// + /// OnParametersSet 方法 + /// + protected override void OnParametersSet() + { + base.OnParametersSet(); + + // 为空时使用级联参数 ValidateForm 的 ShowLabel + ShowLabel ??= ValidateForm?.ShowLabel; + } + /// /// /// @@ -263,11 +280,7 @@ namespace BootstrapBlazor.Components break; } } - - if (ShowLabel) - { - ret.Add(new KeyValuePair("ShowLabel", true)); - } + ret.Add(new KeyValuePair("ShowLabel", ShowLabel)); return ret; } -- Gitee From 16020839d4fc9dc1f557b08a15032283bb1a0ff5 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 11:43:14 +0800 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20ValidateForm=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=20ShowLabel=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/ValidateForm/ValidateForm.razor.cs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs index 388af5412..34dbbf28c 100644 --- a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs +++ b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs @@ -61,11 +61,17 @@ namespace BootstrapBlazor.Components public RenderFragment? ChildContent { get; set; } /// - /// 获得/设置 是否获取必填项标记 默认显示 + /// 获得/设置 是否获取必填项标记 默认为 true 显示 /// [Parameter] public bool ShowRequiredMark { get; set; } = true; + /// + /// 获得/设置 是否显示验证表单内的 Label 默认为 null 未设置时默认显示 + /// + [Parameter] + public bool? ShowLabel { get; set; } = true; + [Inject] [NotNull] private IOptions? Options { get; set; } -- Gitee From 498dd1f1c37e6dc3441918a5977577512f27d0c4 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 11:43:30 +0800 Subject: [PATCH 03/12] =?UTF-8?q?refactor:=20EditForm=20=E6=9B=B4=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=20ValidateForm?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Validate/ValidateBase.cs | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/BootstrapBlazor/Components/Validate/ValidateBase.cs b/src/BootstrapBlazor/Components/Validate/ValidateBase.cs index 7db6be35b..7624f45d5 100644 --- a/src/BootstrapBlazor/Components/Validate/ValidateBase.cs +++ b/src/BootstrapBlazor/Components/Validate/ValidateBase.cs @@ -195,7 +195,7 @@ namespace BootstrapBlazor.Components [Parameter] public override string? Id { - get { return (EditForm != null && !string.IsNullOrEmpty(EditForm.Id) && FieldIdentifier != null) ? $"{EditForm.Id}_{FieldIdentifier.Value.Model.GetHashCode()}_{FieldIdentifier.Value.FieldName}" : _id; } + get { return (ValidateForm != null && !string.IsNullOrEmpty(ValidateForm.Id) && FieldIdentifier != null) ? $"{ValidateForm.Id}_{FieldIdentifier.Value.Model.GetHashCode()}_{FieldIdentifier.Value.FieldName}" : _id; } set { _id = value; } } @@ -239,7 +239,7 @@ namespace BootstrapBlazor.Components /// 获得 ValidateForm 实例 /// [CascadingParameter] - protected ValidateForm? EditForm { get; set; } + protected ValidateForm? ValidateForm { get; set; } /// /// 获得 ValidateFormBase 实例 @@ -349,13 +349,10 @@ namespace BootstrapBlazor.Components { base.OnInitialized(); - if (EditForm != null && FieldIdentifier.HasValue) + if (ValidateForm != null && FieldIdentifier.HasValue) { - EditForm.AddValidator(FieldIdentifier.Value, this); + ValidateForm.AddValidator(FieldIdentifier.Value, this); } - - // 显式设置显示标签时一定显示 - IsShowLabel = ShowLabel || EditForm != null || EditFormShowLabel; } /// @@ -365,13 +362,16 @@ namespace BootstrapBlazor.Components { base.OnParametersSet(); + // 显式设置显示标签时一定显示 + IsShowLabel = ShowLabel || ValidateForm != null || EditFormShowLabel; + // 内置到验证组件时才使用绑定属性值获取 DisplayName if (IsShowLabel && DisplayText == null && FieldIdentifier.HasValue) { DisplayText = FieldIdentifier.Value.GetDisplayName(); } - Required = (!string.IsNullOrEmpty(DisplayText) && (EditForm?.ShowRequiredMark ?? false) && !IsDisabled && !SkipValidate && HasRequired()) ? "true" : null; + Required = (!string.IsNullOrEmpty(DisplayText) && (ValidateForm?.ShowRequiredMark ?? false) && !IsDisabled && !SkipValidate && HasRequired()) ? "true" : null; } /// -- Gitee From 744800eac985bdd54d9ab3ae08a4e5aaafcd6b3b Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 12:04:39 +0800 Subject: [PATCH 04/12] =?UTF-8?q?refactor:=20Toggle=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=20IsShowLabel=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Toggle/Toggle.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Toggle/Toggle.razor b/src/BootstrapBlazor/Components/Toggle/Toggle.razor index 5090a3034..e0f159509 100644 --- a/src/BootstrapBlazor/Components/Toggle/Toggle.razor +++ b/src/BootstrapBlazor/Components/Toggle/Toggle.razor @@ -1,7 +1,7 @@ @namespace BootstrapBlazor.Components @inherits ToggleBase -@if (ShowLabel) +@if (IsShowLabel) { } -- Gitee From b7af2db5712db163ba47ded3d8268754dda611c4 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 13:06:06 +0800 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20ShowLabel=20?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Validate/ValidateBase.cs | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor/Components/Validate/ValidateBase.cs b/src/BootstrapBlazor/Components/Validate/ValidateBase.cs index 7624f45d5..d963ab3c9 100644 --- a/src/BootstrapBlazor/Components/Validate/ValidateBase.cs +++ b/src/BootstrapBlazor/Components/Validate/ValidateBase.cs @@ -7,7 +7,6 @@ using Microsoft.AspNetCore.Components.Forms; using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; -using System.Diagnostics.CodeAnalysis; using System.Globalization; using System.Linq; using System.Linq.Expressions; @@ -212,10 +211,10 @@ namespace BootstrapBlazor.Components public bool SkipValidate { get; set; } /// - /// 获得/设置 是否显示前置标签 默认值为 false + /// 获得/设置 是否显示前置标签 默认值为 null 为空时默认不显示标签 /// [Parameter] - public bool ShowLabel { get; set; } + public bool? ShowLabel { get; set; } /// /// 获得/设置 显示名称 @@ -245,7 +244,7 @@ namespace BootstrapBlazor.Components /// 获得 ValidateFormBase 实例 /// [CascadingParameter(Name = "EditorFormShowLabel")] - protected bool EditFormShowLabel { get; set; } + protected bool? EditFormShowLabel { get; set; } /// /// Formats the value as a string. Derived classes can override this to determine the formating used for . @@ -363,7 +362,21 @@ namespace BootstrapBlazor.Components base.OnParametersSet(); // 显式设置显示标签时一定显示 - IsShowLabel = ShowLabel || ValidateForm != null || EditFormShowLabel; + var showLabel = ShowLabel; + + // 组件自身未设置 ShowLabel 取 EditorForm 值 + if (ShowLabel == null) + { + showLabel = EditFormShowLabel; + } + + // EditorForm未设置 ShowLabel 取 ValidateForm 值 + if (showLabel == null && ValidateForm != null) + { + showLabel = (ValidateForm.ShowLabel ?? true); + } + + IsShowLabel = showLabel ?? false; // 内置到验证组件时才使用绑定属性值获取 DisplayName if (IsShowLabel && DisplayText == null && FieldIdentifier.HasValue) -- Gitee From 55a2cafd3f8fc6329e96b9f50281e0bf0fc692ba Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 13:06:26 +0800 Subject: [PATCH 06/12] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20Checkbox=20S?= =?UTF-8?q?howLabel=20=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Checkbox/CheckboxBase.cs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor/Components/Checkbox/CheckboxBase.cs b/src/BootstrapBlazor/Components/Checkbox/CheckboxBase.cs index ca18ecebd..ba849c61c 100644 --- a/src/BootstrapBlazor/Components/Checkbox/CheckboxBase.cs +++ b/src/BootstrapBlazor/Components/Checkbox/CheckboxBase.cs @@ -73,11 +73,6 @@ namespace BootstrapBlazor.Components base.OnInitialized(); IsBoolean = (Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue)) == typeof(bool); - - if (ShowAfterLabel) - { - IsShowLabel = false; - } } /// @@ -87,6 +82,11 @@ namespace BootstrapBlazor.Components { base.OnParametersSet(); + if (ShowAfterLabel) + { + ShowLabel = false; + } + if (IsBoolean && Value != null) { if (BindConverter.TryConvertToBool(Value, CultureInfo.InvariantCulture, out var v)) -- Gitee From 63a4ab909215d5fec308116df7d036128a8159a9 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 13:24:13 +0800 Subject: [PATCH 07/12] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=E6=96=B9?= =?UTF-8?q?=E6=B3=95=E5=85=B3=E9=94=AE=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Pages/Samples/Table/TablesColumn.razor.cs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesColumn.razor.cs b/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesColumn.razor.cs index 94e677dd2..7540dbb5b 100644 --- a/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesColumn.razor.cs +++ b/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesColumn.razor.cs @@ -50,7 +50,7 @@ namespace BootstrapBlazor.Shared.Pages.Table /// /// /// - protected static Task IntFormatter(object? d) + private static Task IntFormatter(object? d) { var data = (int?)d; return Task.FromResult(data?.ToString("0.00") ?? ""); @@ -97,7 +97,7 @@ namespace BootstrapBlazor.Shared.Pages.Table /// /// /// - protected async Task CustomerButton(IEnumerable items) + private async Task CustomerButton(IEnumerable items) { var cate = ToastCategory.Information; var title = "自定义按钮处理方法"; @@ -114,7 +114,7 @@ namespace BootstrapBlazor.Shared.Pages.Table /// /// /// - protected async Task OnRowButtonClick(Foo item) + private async Task OnRowButtonClick(Foo item) { var cate = ToastCategory.Success; var title = "行内按钮处理方法"; -- Gitee From 94d6dda1454be617f34936c66d9dc61d0aa2a42e Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 13:48:46 +0800 Subject: [PATCH 08/12] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20label=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Pages/Labels.razor | 70 +++++++++++++++++++ .../Pages/Labels.razor.cs | 34 +++++++++ 2 files changed, 104 insertions(+) create mode 100644 src/BootstrapBlazor.Shared/Pages/Labels.razor create mode 100644 src/BootstrapBlazor.Shared/Pages/Labels.razor.cs diff --git a/src/BootstrapBlazor.Shared/Pages/Labels.razor b/src/BootstrapBlazor.Shared/Pages/Labels.razor new file mode 100644 index 000000000..7e6517e75 --- /dev/null +++ b/src/BootstrapBlazor.Shared/Pages/Labels.razor @@ -0,0 +1,70 @@ +@page "/labels" + +

组件标签

+ +

本套组件中有 ValidateForm EditorForm 以及多种继承 ValidateBase<TValue> 的 表单组件，这些组件中有一套特殊的显示前置标签逻辑，现在我们统一的梳理一下：

+ +
    +
  • ValidateForm 组件是 可验证的 表单组件，此组件内的表单组件会自动进行数据合规性检查，如果数据不合规将会阻止 提交(Submit) 动作，是数据提交中使用最最最频繁的组件
    • +
  • EditorForm 组件是普通的表单组件，此组件绑定 Model 后即可自动生成整个表单，大大减少重复性编码，外面套上 ValidateForm 即可开启 数据合规性检查 非常方便、简洁、高效
    • +
+ +

以 BootstrapInput 输入框组件为例，阐述一下是否显示 Label 逻辑

+ + +

未使用双向绑定时

+
    +
  • 默认不会显示 Label
    • +
  • 通过 ShowLabel 属性进行控制是否显示
    • +
  • 设置 DisplayText 时显示内容
    • +
  • 未设置时渲染一个无内容的 label 组件进行占位
    • +
+ +

+ +
第一个文本框未进行任何设置，不显示标签
+
第二个文本框设置 ShowLabel="true" DisplayText="" 显示无内容的占位标签
+
第三个文本框设置 ShowLabel="true" DisplayText="Name" 显示设置的内容标签
+
第四个文本框设置 ShowLabel="true" DisplayText="@@null" 显示无内容的占位标签
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +

使用双向绑定时

+ +
第一个文本框设置 @@bind-Value="@@Dummy.Name"
+
第二个文本框设置 @@bind-Value="@@Dummy.Name" ShowLabel="true" DisplayText="@@Localizer[nameof(Foo.Address)]" 显示设置的内容
+
第三个文本框设置 @@bind-Value="@@Dummy.Name" ShowLabel="true" DisplayText="" 显示无内容占位标签
+
第四个文本框设置 @@bind-Value="@@Dummy.Name" ShowLabel="true" DisplayText="@@null" 显示资源文件机制下的标签内容 Label
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + diff --git a/src/BootstrapBlazor.Shared/Pages/Labels.razor.cs b/src/BootstrapBlazor.Shared/Pages/Labels.razor.cs new file mode 100644 index 000000000..85fd8ac83 --- /dev/null +++ b/src/BootstrapBlazor.Shared/Pages/Labels.razor.cs @@ -0,0 +1,34 @@ +// Copyright (c) Argo Zhang (argo@163.com). All rights reserved. +// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. +// Website: https://www.blazor.zone or https://argozhang.github.io/ + +using BootstrapBlazor.Shared.Pages.Components; +using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Localization; +using System.Diagnostics.CodeAnalysis; + +namespace BootstrapBlazor.Shared.Pages +{ + /// + /// + /// + public partial class Labels : ComponentBase + { + [Inject] + [NotNull] + private IStringLocalizer? Localizer { get; set; } + + [NotNull] + private Foo? Dummy { get; set; } + + /// + /// OnInitialized 方法 + /// + protected override void OnInitialized() + { + base.OnInitialized(); + + Dummy = Foo.Generate(Localizer); + } + } +} -- Gitee From 367b428b5dcf360ad63632e3b4cd74acc22d2af7 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 15:21:21 +0800 Subject: [PATCH 09/12] =?UTF-8?q?feat:=20=E4=BC=98=E5=85=88=E8=80=83?= =?UTF-8?q?=E8=99=91=20EditorForm=20=E6=9C=AA=E5=B5=8C=E5=A5=97=20Validate?= =?UTF-8?q?Form=20=E6=83=85=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Validate/ValidateBase.cs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Validate/ValidateBase.cs b/src/BootstrapBlazor/Components/Validate/ValidateBase.cs index d963ab3c9..4f7c0c965 100644 --- a/src/BootstrapBlazor/Components/Validate/ValidateBase.cs +++ b/src/BootstrapBlazor/Components/Validate/ValidateBase.cs @@ -370,7 +370,13 @@ namespace BootstrapBlazor.Components showLabel = EditFormShowLabel; } - // EditorForm未设置 ShowLabel 取 ValidateForm 值 + // 组件自身未设置 EditorForm 未设置 ValidateForm 为空时 + if (showLabel == null && ValidateForm == null) + { + showLabel = true; + } + + // EditorForm 未设置 ShowLabel 取 ValidateForm 值 if (showLabel == null && ValidateForm != null) { showLabel = (ValidateForm.ShowLabel ?? true); -- Gitee From ae887c727b21bb60b995d5734058e446563f62c7 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 15:21:57 +0800 Subject: [PATCH 10/12] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=20CheckboxList?= =?UTF-8?q?=20=E6=98=BE=E7=A4=BA=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Checkbox/CheckboxList.razor | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor b/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor index 7700fbd0e..afa42a30d 100644 --- a/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor +++ b/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor @@ -6,18 +6,14 @@ { } - - - - - + @ChildContent -- Gitee From 03dc9eb1cbd4627ad04ac282046a3a866b74e8a3 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 15:22:08 +0800 Subject: [PATCH 11/12] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Pages/Labels.razor | 90 ++++++++++++++++++- 1 file changed, 86 insertions(+), 4 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Pages/Labels.razor b/src/BootstrapBlazor.Shared/Pages/Labels.razor index 7e6517e75..859a4a2c5 100644 --- a/src/BootstrapBlazor.Shared/Pages/Labels.razor +++ b/src/BootstrapBlazor.Shared/Pages/Labels.razor @@ -1,4 +1,5 @@ -@page "/labels" +@layout ComponentLayout +@page "/labels"

组件标签

@@ -11,6 +12,10 @@

以 BootstrapInput 输入框组件为例，阐述一下是否显示 Label 逻辑

+ +

ShowLabel 的逻辑即就近原则，离自身越近的设置生效，如表单组件内置到 ValidateForm 组件中，即使 ValidateForm 设置 ShowLabel=true，表单组件自身设置 ShowLabel=false 时，标签最终结果为 不显示

+ +

未使用双向绑定时

    @@ -20,8 +25,7 @@
  • 未设置时渲染一个无内容的 label 组件进行占位
-

- +
第一个文本框未进行任何设置，不显示标签
第二个文本框设置 ShowLabel="true" DisplayText="" 显示无内容的占位标签
第三个文本框设置 ShowLabel="true" DisplayText="Name" 显示设置的内容标签
@@ -46,7 +50,7 @@

使用双向绑定时

-
第一个文本框设置 @@bind-Value="@@Dummy.Name"
+
第一个文本框设置 @@bind-Value="@@Dummy.Name"，不显示标签
第二个文本框设置 @@bind-Value="@@Dummy.Name" ShowLabel="true" DisplayText="@@Localizer[nameof(Foo.Address)]" 显示设置的内容
第三个文本框设置 @@bind-Value="@@Dummy.Name" ShowLabel="true" DisplayText="" 显示无内容占位标签
第四个文本框设置 @@bind-Value="@@Dummy.Name" ShowLabel="true" DisplayText="@@null" 显示资源文件机制下的标签内容 Label
@@ -68,3 +72,81 @@ + + +

显示标签

未设置 EditorForm 组件的 ShowLabel 属性，未设置时等同于设置为 true，所有组件 显示 标签

+ + + + + + + + + +

不显示标签

设置 ShowLabel="false"，组件内的所有表单组件 不显示 标签

+ + + + + + + + + + + +

显示标签

未设置 EditorForm 组件的 ShowLabel 属性，未设置时等同于设置为 true，所有组件 显示 标签

+ + + + + + + + + + + +

不显示标签

设置 ShowLabel="false"，组件内的所有表单组件 不显示 标签

+ + + + + + + + + + + + + +

显示标签

未设置 EditorForm 组件的 ShowLabel 属性，未设置时等同于设置为 true，所有组件 显示 标签

+ + +
+
+ +
+
+ +
+
+ + + +

不显示标签

设置 ShowLabel="false"，组件内的所有表单组件 不显示 标签

+ + +
+
+ +
+
+ +
+
+ + + -- Gitee From 3c9a072269503469ad9cc61932aed84847a96472 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Wed, 31 Mar 2021 15:22:22 +0800 Subject: [PATCH 12/12] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E6=A0=87=E7=AD=BE=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs index b22ec750b..efab2155e 100644 --- a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs +++ b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs @@ -130,6 +130,12 @@ namespace BootstrapBlazor.Shared.Shared Url = "localization" }); item.AddItem(new DemoMenuItem() + { + IsNew = true, + Text = "表单标签", + Url = "labels" + }); + item.AddItem(new DemoMenuItem() { Text = "服务器端模式 Server", Url = "install-server" -- Gitee