diff --git a/src/BootstrapBlazor.Shared/Pages/Labels.razor b/src/BootstrapBlazor.Shared/Pages/Labels.razor new file mode 100644 index 0000000000000000000000000000000000000000..859a4a2c57af67497b05158c23e439f77b15269f --- /dev/null +++ b/src/BootstrapBlazor.Shared/Pages/Labels.razor @@ -0,0 +1,152 @@ +@layout ComponentLayout +@page "/labels" + +

组件标签

+ +

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

+ + + +

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

+ + +

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

+ + + +

未使用双向绑定时

+ + + +
第一个文本框未进行任何设置，不显示标签
+
第二个文本框设置 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
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + + +

显示标签

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

+ + + + + + + + + +

不显示标签

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

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

显示标签

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

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

不显示标签

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

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

显示标签

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

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

不显示标签

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

+ + +
+
+ +
+
+ +
+
+ + + diff --git a/src/BootstrapBlazor.Shared/Pages/Labels.razor.cs b/src/BootstrapBlazor.Shared/Pages/Labels.razor.cs new file mode 100644 index 0000000000000000000000000000000000000000..85fd8ac832c91af086197e8ef09a75bc9e365d9b --- /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); + } + } +} diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesColumn.razor.cs b/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesColumn.razor.cs index 94e677dd2c8358559f7263380ab6203946133c59..7540dbb5b2070a4a406aa34480a2ba9a3c6db49d 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 = "行内按钮处理方法"; diff --git a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs index b22ec750b47bbef6a45e1876f0f7249fae105f95..efab2155e51c796afe6f4c4060e1dca4e5731500 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" diff --git a/src/BootstrapBlazor/Components/Checkbox/CheckboxBase.cs b/src/BootstrapBlazor/Components/Checkbox/CheckboxBase.cs index ca18ecebd3f2b4d0d158c31a600bdf099658d736..ba849c61ce90c96958ab96dcce386b8a66d61cbb 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)) diff --git a/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor b/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor index 7700fbd0e586a386104b61885c3e7e079750ad0f..afa42a30d9640fd7c5fcc0143d427cebed4fff3b 100644 --- a/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor +++ b/src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor @@ -6,18 +6,14 @@ { } - - - - - + @ChildContent diff --git a/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor b/src/BootstrapBlazor/Components/EditorForm/EditorForm.razor index a66ca39c6e1b8abae286b290498d71a289c28f5a..cd8c7341a9bc91cdabf11bf13b686fe6f4043508 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 d322d978d359285f9205a16996eae53172f271ca..ee0ef07e8ba24e900077954d8f5d4e1348c1988f 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; } diff --git a/src/BootstrapBlazor/Components/Toggle/Toggle.razor b/src/BootstrapBlazor/Components/Toggle/Toggle.razor index 5090a30340ec62291fcb7e925018e6066f84952f..e0f159509a5a9260665f9d1ce14709112e034b4f 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) { } diff --git a/src/BootstrapBlazor/Components/Validate/ValidateBase.cs b/src/BootstrapBlazor/Components/Validate/ValidateBase.cs index 7db6be35bee69116d28bb85171857d144fb85361..4f7c0c965f689814814076a9415a006500423daa 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; @@ -195,7 +194,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; } } @@ -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; } /// /// 获得/设置 显示名称 @@ -239,13 +238,13 @@ namespace BootstrapBlazor.Components /// 获得 ValidateForm 实例 /// [CascadingParameter] - protected ValidateForm? EditForm { get; set; } + protected ValidateForm? ValidateForm { get; set; } /// /// 获得 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 . @@ -349,13 +348,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 +361,36 @@ namespace BootstrapBlazor.Components { base.OnParametersSet(); + // 显式设置显示标签时一定显示 + var showLabel = ShowLabel; + + // 组件自身未设置 ShowLabel 取 EditorForm 值 + if (ShowLabel == null) + { + showLabel = EditFormShowLabel; + } + + // 组件自身未设置 EditorForm 未设置 ValidateForm 为空时 + if (showLabel == null && ValidateForm == null) + { + showLabel = true; + } + + // EditorForm 未设置 ShowLabel 取 ValidateForm 值 + if (showLabel == null && ValidateForm != null) + { + showLabel = (ValidateForm.ShowLabel ?? true); + } + + IsShowLabel = showLabel ?? false; + // 内置到验证组件时才使用绑定属性值获取 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; } /// diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs index 388af5412bef986f336b94fdbd8cbc062ccb2a51..34dbbf28c1b427a9fec2b3f94ace4c4dd2f98ee8 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; }