Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Component label

This set of components includes ValidateForm EditorForm and a variety of Form components inherited from ValidateBase<TValue>. Among these components There is a special set of display front label logic, now let’s sort it out in a unified way:

The ValidateForm component is a verifiable form component. The form component in this component will automatically perform data compliance checks. If Data non-compliance will prevent the Submit action, which is the most frequently used component in data submission
The EditorForm component is an ordinary form component. After this component is bound to the Model, the entire form can be automatically generated, which greatly reduces repetition Code, put the ValidateForm on the outside to open the data compliance check very convenient, concise and efficient

Take the BootstrapInput input box component as an example to explain whether to display the Label logic

Tips

The logic of ShowLabel is the principle of proximity. The closer the setting is to itself, the setting takes effect. For example, the form component is built into the ValidateForm component, even if ValidateForm is set to >ShowLabel=true, when the form component itself sets ShowLabel=false, the final result of the label is not displayed

Use alone

Suitable for data entry

Demo

When two-way binding is not used

Label will not be displayed by default
Control whether to display through the ShowLabel property
Display content when setting DisplayText
When not set, render a contentless label component as a placeholder

No two-way binding

No settings in the first text box, no label

The second text box setting ShowLabel='true' DisplayText=`` displays a placeholder label without content

The third text box setting ShowLabel='true' DisplayText='Name' shows the set content label

The fourth text box setting ShowLabel='true' DisplayText='@null' displays a placeholder label without content

Name

When using two-way binding

Two-way binding

The first text box is set to @bind-Value='Dummy.Name', no label is displayed

The second text box setting @bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@Localizer[nameof(Foo.Address)]' Display the contents of the setting

The third text box setting @bind-Value='Dummy.Name' ShowLabel='true' DisplayText=`` Show no content placeholder label

The fourth text box setting @bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@null' Display the label content under the resource file mechanismLabel code>

Address

Name

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Foo> LocalizerFoo
@inject IStringLocalizer<LabelsNormal> Localizer

<div>
    <p><b>@Localizer["LabelsNormalDescription"]</b></p>
    <ul class="ul-demo mb-3">
        <li>@((MarkupString)Localizer["LabelsNormalTips1"].Value)</li>
        <li>@((MarkupString)Localizer["LabelsNormalTips2"].Value)</li>
        <li>@((MarkupString)Localizer["LabelsNormalTips3"].Value)</li>
        <li>@((MarkupString)Localizer["LabelsNormalTips4"].Value)</li>
    </ul>

    <GroupBox Title="@Localizer["LabelsNormalGroupBox1Title"]" style="margin-top: 1.5rem;">
        <div>@Localizer["LabelsNormalGroupBox1Tips1"]</div>
        <div>@((MarkupString)Localizer["LabelsNormalGroupBox1Tips2"].Value)</div>
        <div>@((MarkupString)Localizer["LabelsNormalGroupBox1Tips3"].Value)</div>
        <div>@((MarkupString)Localizer["LabelsNormalGroupBox1Tips4"].Value)</div>
        <div class="row g-3 mt-3">
            <div class="col-sm-12 col-md-3">
                <BootstrapInput TValue="string" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput TValue="string" ShowLabel="true" DisplayText="" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput TValue="string" ShowLabel="true" DisplayText="@LocalizerFoo[nameof(Foo.Name)]" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput TValue="string" ShowLabel="true" DisplayText="@null" />
            </div>
        </div>
    </GroupBox>

    <p class="mt-3"><b>@Localizer["LabelsNormalDescription2"]</b></p>
    <GroupBox Title="@Localizer["LabelsNormalGroupBox2Title"]" class="mt-3">
        <div>@((MarkupString)Localizer["LabelsNormalGroupBox2Tips1"].Value)</div>
        <div>@((MarkupString)Localizer["LabelsNormalGroupBox2Tips2"].Value)</div>
        <div>@((MarkupString)Localizer["LabelsNormalGroupBox2Tips3"].Value)</div>
        <div>@((MarkupString)Localizer["LabelsNormalGroupBox2Tips4"].Value)</div>
        <div class="row g-3 mt-3">
            <div class="col-sm-12 col-md-3">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput @bind-Value="Dummy.Name" ShowLabel="true" DisplayText="@LocalizerFoo[nameof(Foo.Address)]" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput @bind-Value="Dummy.Name" ShowLabel="true" DisplayText="" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput @bind-Value="Dummy.Name" ShowLabel="true" DisplayText="@null" />
            </div>
        </div>
    </GroupBox>
</div>

@code {
    [NotNull]
    private Foo? Dummy { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Dummy = Foo.Generate(LocalizerFoo);
    }
}

Used in EditorForm

Not used in ValidateForm

Demo

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

Do not display labels

Set ShowLabel="false", all form components in the component Do not display tags

Alignment

LabelAlign="Alignment.Right" set the label alignment is right

Alignment

LabelAlign="Alignment.Center" set the label alignment is center

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Foo> LocalizerFoo
@inject IStringLocalizer<LabelsEditorForm> Localizer

<div>
    <p>@((MarkupString)Localizer["LabelsEditorFormDescription1"].Value)</p>
    <GroupBox>
        <EditorForm Model="@Dummy" ShowLabel="false" RowType="RowType.Inline" ItemsPerRow="2">
            <FieldItems>
                <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                </EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>

    <p class="mt-3">@((MarkupString)Localizer["LabelsEditorFormDescription2"].Value)</p>
    <GroupBox>
        <EditorForm Model="@Dummy" RowType="RowType.Inline" ItemsPerRow="2">
            <FieldItems>
                <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                </EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>

    <p class="mt-3">@((MarkupString)Localizer["EditorFormLabelAlignRight"].Value)</p>
    <GroupBox>
        <EditorForm Model="@Dummy" ShowLabel="true" RowType="RowType.Inline" ItemsPerRow="2" LabelAlign="Alignment.Right">
            <FieldItems>
                <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                </EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>

    <p class="mt-3">@((MarkupString)Localizer["EditorFormLabelAlignCenter"].Value)</p>
    <GroupBox>
        <EditorForm Model="@Dummy" ShowLabel="true" RowType="RowType.Inline" ItemsPerRow="2" LabelAlign="Alignment.Center">
            <FieldItems>
                <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                </EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>
</div>

@code {
    [NotNull]
    private Foo? Dummy { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Dummy = Foo.Generate(LocalizerFoo);
    }
}

Use in EditorForm built-in ValidateForm

Used in external ValidateForm

Demo

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

Do not display labels

Set ShowLabel="false", all form components in the component Do not display tags

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Foo> LocalizerFoo
@inject IStringLocalizer<LabelsValidateForm1> Localizer

<div>
    <p>@((MarkupString)Localizer["LabelsValidateForm1Description1"].Value)</p>

    <GroupBox>
        <ValidateForm Model="@Dummy">
            <EditorForm TModel="Foo" RowType="RowType.Inline" ItemsPerRow="2">
                <FieldItems>
                    <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                    </EditorItem>
                </FieldItems>
            </EditorForm>
        </ValidateForm>
    </GroupBox>

    <p class="mt-3">@((MarkupString)Localizer["LabelsValidateForm1Description2"].Value)</p>
    <GroupBox>
        <ValidateForm Model="@Dummy" ShowLabel="false">
            <EditorForm TModel="Foo" RowType="RowType.Inline" ItemsPerRow="2">
                <FieldItems>
                    <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                    </EditorItem>
                </FieldItems>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</div>

@code {
    [NotNull]
    private Foo? Dummy { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Dummy = Foo.Generate(LocalizerFoo);
    }
}

Used in ValidateForm

Show labels are automatically turned on by default

Demo

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

Do not display labels

Set ShowLabel="false", all form components in the component Do not display tags

Show labels

set class form-inline for the all labels within the component are prefixed

Right

form-inline-end set the label alignment is right

Center

form-inline-center set the label alignment is center

Tooltip

The default width of component front label is 120px. If you need more, please change the style variable --bb-row-label-width in the project style file or remove RowType.Inline

In this example, set the ShowLabelTooltip in the form-inline style to true to make the mouse hover over the cropped label to display the complete information

@using BootstrapBlazor.Shared.Samples;
@inject IStringLocalizer<Foo> LocalizerFoo
@inject IStringLocalizer<LabelsValidateForm2> Localizer
@inject IStringLocalizer<ValidateForms> LocalizerForm

<div>
    <p>@((MarkupString)Localizer["LabelsValidateForm2Description1"].Value)</p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3">@((MarkupString)Localizer["LabelsValidateForm2Description2"].Value)</p>
    <ValidateForm Model="@Dummy" ShowLabel="false">
        <div class="row g-3">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3">@((MarkupString)Localizer["LabelsValidateForm2Description3"].Value)</p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3 form-inline">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3">@((MarkupString)Localizer["ValidateFormAlignRight"].Value)</p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3 form-inline form-inline-end">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3">@((MarkupString)Localizer["ValidateFormAlignCenter"].Value)</p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3 form-inline form-inline-center">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3">
        @((MarkupString)Localizer["LabelsValidateForm2Description4"].Value)
        <div>@((MarkupString)LocalizerForm["FormLabelWidth"].Value)</div>
        <div class="mt-2">@((MarkupString)LocalizerForm["LongDisplayDescription"].Value)</div>
    </p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Dummy.Name" DisplayText="@LocalizerForm["LongDisplayText"]" />
            </div>
        </div>
        <div class="row g-3 form-inline mt-0">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Dummy.Address" DisplayText="@LocalizerForm["LongDisplayText"]" ShowLabelTooltip="true" />
            </div>
        </div>
    </ValidateForm>
</div>

@code {
    [NotNull]
    private Foo? Dummy { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Dummy = Foo.Generate(LocalizerFoo);
    }
}

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Component label

Tips

Demo

Demo

Demo

Demo

Bootstrap Blazor Component library updated to 7.4.4-beta01