Bootstrap Blazor - 企业级 UI 组件库

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Row布局组件

可简单设置一行显示的组件数量

放置普通控件

将自己的组件放到 Row 内部即可

Demo

行显示 3 个，采用 Row

行显示 3 个，采用 FormRow

放置表单控件（内联）

当放置表单控件时，可以指定 RowType 为 Inline，会将 Label 显示在左边，控件显示原始大小

Demo

本例中 Row 组件内置于 ValidateForm 组件内，自动增加前置 Label 标签

爱好

Swimming

Climb

Shoot

Chess

地址日期

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

数量是/否

学历

放置表单控件（充满）

当放置表单控件时，可以指定 RowType 为 FormRow，会将 Label 显示在上边，控件充满

Demo

本例中 Row 组件内置于 ValidateForm 组件内，自动增加前置 Label 标签

爱好

Swimming

Climb

Shoot

Chess

地址日期

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

数量是/否

学历

嵌套使用

Row 组件支持嵌套使用，比如下面最外层的 Row 设置一行显示两个控件，第一个是 TextBox，第二个还是 Row，第二个 Row 继续设置显示两个控件

Demo

本例中 Row 组件内置于 ValidateForm 组件内，自动增加前置 Label 标签

<Row ItemsPerRow="ItemsPerRow.Two" RowType="RowType.FormRow">
    <BootstrapInput @bind-Value="@Model.Name" />
    <Row ItemsPerRow="ItemsPerRow.Two">
        <Switch @bind-Value="@Model.Complete" />
        <BootstrapInput @bind-Value="@Model.Address" />
    </Row>
</Row>

跨列功能

Row 组件可以通过指定 ColSpan 值设置跨列数，组合这些功能可以实现复杂布局

Demo

本例中 Row 组件内置于 ValidateForm 组件内，自动增加前置 Label 标签

行显示 4 个

<Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow">
    <BootstrapInput @bind-Value="@Model.Name" />
    <BootstrapInput @bind-Value="@Model.Address" />
    <BootstrapInputNumber @bind-Value="@Model.Count" />
    <Select @bind-Value="@Model.Education" />
</Row>

行显示 2 个

<Row ItemsPerRow="ItemsPerRow.Two" RowType="RowType.FormRow">
    <BootstrapInput @bind-Value="@Model.Name" />
    <BootstrapInput @bind-Value="@Model.Address" />
</Row>

行显示 4 个 Address 占 2 列

<Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow">
    <BootstrapInput @bind-Value="@Model.Name" />
    <Row ColSpan="2">
        <BootstrapInput @bind-Value="@Model.Address" />
    </Row>
    <Select @bind-Value="" />
</Row>

行显示 4 个，第二个组件 ColSpan 设置为 3

<Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow">
    <BootstrapInput @bind-Value="@Model.Name" />
    <Row ColSpan="3">
        <BootstrapInput @bind-Value="@Model.Address" />
    </Row>
</Row>

行显示 2 个，第一个组件 ColSpan 设置为 3

<Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow">
    <Row ColSpan="3">
        <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
    </Row>
    <BootstrapInput @bind-Value="@Model.Address" />
</Row>

行显示一个组件

Attributes

@page "/rows"

<h3>Row布局组件</h3>

<h4>可简单设置一行显示的组件数量</h4>

<Block Title="放置普通控件" Introduction="将自己的组件放到 <code>Row</code> 内部即可">
    <p><b>行显示 3 个，采用 <code>Row</code></b></p>
    <Row ItemsPerRow="ItemsPerRow.Three">
        <Card>
            <CardBody>
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </CardBody>
        </Card>
        <Card>
            <CardBody>
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </CardBody>
        </Card>
        <Card>
            <CardBody>
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </CardBody>
        </Card>
    </Row>

    <p class="mt-3"><b>行显示 3 个，采用 <code>FormRow</code></b></p>
    <Row RowType="RowType.FormRow" ItemsPerRow="ItemsPerRow.Three">
        <Card>
            <CardBody>
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </CardBody>
        </Card>
        <Card>
            <CardBody>
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </CardBody>
        </Card>
        <Card>
            <CardBody>
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </CardBody>
        </Card>
    </Row>
</Block>

<Block Title="放置表单控件（内联）" Introduction="当放置表单控件时，可以指定 <code>RowType</code> 为 <code>Inline</code>，会将 <b>Label</b> 显示在左边，控件显示原始大小">
    <p>本例中 <code>Row</code> 组件内置于 <code>ValidateForm</code> 组件内，自动增加前置 <code>Label</code> 标签</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Three" RowType="RowType.Inline">
            <CheckboxList @bind-Value="@Model.Hobby" Items="Hobbys" />
            <BootstrapInput @bind-Value="@Model.Address" />
            <DateTimePicker @bind-Value="@Model.DateTime" />
            <BootstrapInputNumber @bind-Value="@Model.Count" />
            <Switch @bind-Value="@Model.Complete" />
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>
</Block>

<Block Title="放置表单控件（充满）" Introduction="当放置表单控件时，可以指定 <code>RowType</code> 为 <code>FormRow</code>，会将 <b>Label</b> 显示在上边，控件充满">
    <p>本例中 <code>Row</code> 组件内置于 <code>ValidateForm</code> 组件内，自动增加前置 <code>Label</code> 标签</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Three" RowType="RowType.FormRow">
            <CheckboxList @bind-Value="@Model.Hobby" Items="Hobbys" />
            <BootstrapInput @bind-Value="@Model.Address" />
            <DateTimePicker @bind-Value="@Model.DateTime" />
            <BootstrapInputNumber @bind-Value="@Model.Count" />
            <Switch @bind-Value="@Model.Complete" />
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>
</Block>

<Block Title="嵌套使用" Introduction="<code>Row</code> 组件支持嵌套使用，比如下面最外层的 <code>Row</code> 设置一行显示两个控件，第一个是 <code>TextBox</code>，第二个还是 <code>Row</code>，第二个 <code>Row</code> 继续设置显示两个控件">
    <p>本例中 <code>Row</code> 组件内置于 <code>ValidateForm</code> 组件内，自动增加前置 <code>Label</code> 标签</p>
    <Pre>&lt;Row ItemsPerRow="ItemsPerRow.Two" RowType="RowType.FormRow"&gt;
    &lt;BootstrapInput @@bind-Value="@@Model.Name" /&gt;
    &lt;Row ItemsPerRow="ItemsPerRow.Two"&gt;
        &lt;Switch @@bind-Value="@@Model.Complete" /&gt;
        &lt;BootstrapInput @@bind-Value="@@Model.Address" /&gt;
    &lt;/Row&gt;
&lt;/Row&gt;
</Pre>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Two" RowType="RowType.FormRow">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ItemsPerRow="ItemsPerRow.Two">
                <Switch @bind-Value="@Model.Complete" />
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
        </Row>
    </ValidateForm>
</Block>

<Block Title="跨列功能" Introduction="<code>Row</code> 组件可以通过指定 <code>ColSpan</code> 值设置跨列数，组合这些功能可以实现复杂布局">
    <p>本例中 <code>Row</code> 组件内置于 <code>ValidateForm</code> 组件内，自动增加前置 <code>Label</code> 标签</p>

    <p><b>行显示 4 个</b></p>
    <Pre>&lt;Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow"&gt;
    &lt;BootstrapInput @@bind-Value="@@Model.Name" /&gt;
    &lt;BootstrapInput @@bind-Value="@@Model.Address" /&gt;
    &lt;BootstrapInputNumber @@bind-Value="@@Model.Count" /&gt;
    &lt;Select @@bind-Value="@@Model.Education" /&gt;
&lt;/Row&gt;
</Pre>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow">
            <BootstrapInput @bind-Value="@Model.Name" />
            <BootstrapInput @bind-Value="@Model.Address" />
            <BootstrapInputNumber @bind-Value="@Model.Count" />
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>

    <p><b>行显示 2 个</b></p>
    <Pre>&lt;Row ItemsPerRow="ItemsPerRow.Two" RowType="RowType.FormRow"&gt;
    &lt;BootstrapInput @@bind-Value="@@Model.Name" /&gt;
    &lt;BootstrapInput @@bind-Value="@@Model.Address" /&gt;
&lt;/Row&gt;
</Pre>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Two" RowType="RowType.FormRow">
            <BootstrapInput @bind-Value="@Model.Name" />
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>

    <p><b>行显示 4 个 <code>Address</code> 占 2 列</b></p>
    <Pre>&lt;Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow"&gt;
    &lt;BootstrapInput @@bind-Value="@@Model.Name" /&gt;
    &lt;Row ColSpan="2"&gt;
        &lt;BootstrapInput @@bind-Value="@@Model.Address" /&gt;
    &lt;/Row&gt;
    &lt;Select @@bind-Value="@Model.Education" /&gt;
&lt;/Row&gt;
</Pre>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ColSpan="2">
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>

    <p><b>行显示 4 个，第二个组件 <code>ColSpan</code> 设置为 3</b></p>
    <Pre>&lt;Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow"&gt;
    &lt;BootstrapInput @@bind-Value="@@Model.Name" /&gt;
    &lt;Row ColSpan="3"&gt;
        &lt;BootstrapInput @@bind-Value="@@Model.Address" /&gt;
    &lt;/Row&gt;
&lt;/Row&gt;
</Pre>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ColSpan="3">
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
        </Row>
    </ValidateForm>

    <p><b>行显示 2 个，第一个组件 <code>ColSpan</code> 设置为 3</b></p>
    <Pre>&lt;Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow"&gt;
    &lt;Row ColSpan="3"&gt;
        &lt;CheckboxList @@bind-Value="@@Model.Hobby" Items="@@Hobbys" /&gt;
    &lt;/Row&gt;
    &lt;BootstrapInput @@bind-Value="@@Model.Address" /&gt;
&lt;/Row&gt;
</Pre>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four" RowType="RowType.FormRow">
            <Row ColSpan="3">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </Row>
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>

    <p>行显示一个组件</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.One">
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>
</Block>

<AttributeTable Items="@GetAttributes()" />

// 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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics.CodeAnalysis;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Rows
    {
        [Inject]
        [NotNull]
        private IStringLocalizer<Foo>? Localizer { get; set; }

        private RowFoo Model { get; } = new()
        {
            Name = "张三",
            Count = 23,
            Address = "测试地址",
            DateTime = new DateTime(1997, 12, 05),
            Educations = new List<EnumEducation> { EnumEducation.Primary, EnumEducation.Middel }
        };

        [NotNull]
        private IEnumerable<SelectedItem>? Hobbys { get; set; }

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

            Hobbys = Foo.GenerateHobbys(Localizer);
        }

        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            new AttributeItem() {
                Name = "ItemsPerRow",
                Description = "设置一行显示几个控件",
                Type = "enum",
                ValueList = " One,Two,Three,Four,Six,Twelve ",
                DefaultValue = " One "
            },
            new AttributeItem() {
                Name = "RowType",
                Description = "设置排版格式，子Row如果不指定，会使用父Row的设置",
                Type = "enum?",
                ValueList = "Normal, FormInline,FormRow",
                DefaultValue = "null"
            },
            new AttributeItem() {
                Name = "ColSpan",
                Description = "设置子Row跨父Row列数",
                Type = "int?",
                ValueList = "-",
                DefaultValue = "null"
            },
            new AttributeItem() {
                Name = "MaxCount",
                Description = "设置行内最多显示的控件数",
                Type = "int?",
                ValueList = "-",
                DefaultValue = "null"
            }
        };

        private class RowFoo : Foo
        {
            /// <summary>
            /// 
            /// </summary>
            [Required(ErrorMessage = "请选择学历")]
            [Display(Name = "学历")]
            [AutoGenerateColumn(Order = 60)]
            public List<EnumEducation>? Educations { get; set; }
        }
    }
}

1980	1981	1982	1983
1984	1985	1986	1987
1988	1989	1990	1991
1992	1993	1994	1995
1996	1997	1998	1999

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

1980	1981	1982	1983
1984	1985	1986	1987
1988	1989	1990	1991
1992	1993	1994	1995
1996	1997	1998	1999

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10