Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Row布局组件

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

放置普通控件

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

Demo

行显示 3 个,采用 Row

Card 1

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card 2

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card 3

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

行显示 3 个,采用 FormRow

Card 1

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card 2

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card 3

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

放置表单控件(内联)

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

Demo

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

  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  •  
  • 0
  • 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
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  •  
  • 0
  • 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
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
1997 December
SunMonTueWedThuFriSat
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
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

放置表单控件(充满)

当放置表单控件时,可以指定 RowTypeFormRow,会将 Label 显示在上边,控件充满

Demo

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

  •  
  • 0
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  •  
  • 0
  • 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
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  •  
  • 0
  • 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
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
1997 December
SunMonTueWedThuFriSat
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
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

嵌套使用

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

Loading...
@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; }
        }
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload