Enterprise-level component library based on Bootstrap and Blazor
gitee
version
license
download
repo
commit
build
coverage

Row

The number of components displayed in a row can be easily set

Put your own components inside Row

Demo

3 rows are displayed, using 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
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

When placing form controls, you can specify RowType as Inline, and Label will be displayed on the left, and the control will fill the remaining space

Demo

In this example, the Row component is built into the ValidateForm component, and the front Label tag is automatically added

  •  
  • 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

When placing form controls, you can specify Normal as FormRow, and Label will be displayed on the top, and the control will be full

Demo

In this example, the Row component is built into the ValidateForm component, and the front Label tag is automatically added

  •  
  • 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

The Row component supports nested use. For example, the outermost Row below sets a row to display two controls, the first is TextBox, the second One is still Row, and the second Row continues to be set to display two controls

Demo

In this example, the Row component is built into the ValidateForm component, and the front Label tag is automatically added

The Row component can set the number of spanning columns by specifying the ColSpan value. Combining these functions can achieve complex layouts

Demo

In this example, the Row component is built into the ValidateForm component, and the front Label tag is automatically added

4 in a row

2 in a row

The row shows 4 Address in 2 columns

Row shows 4, the second component ColSpan is set to 3

Row shows 2, the first component ColSpan is set to 3

A component in a row

Attributes

Loading...
@page "/rows"

<h3>Row</h3>

<h4>The number of components displayed in a row can be easily set</h4>

<DemoBlock Title="Place common controls" Introduction="Put your own components inside <code>Row</code>" Name="Common">
    <p><b>3 rows are displayed, using <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>
        <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>
</DemoBlock>

<DemoBlock Title="Place form controls (inline)" Introduction="When placing form controls, you can specify <code>RowType</code> as <code>Inline</code>, and <b>Label</b> will be displayed on the left, and the control will fill the remaining space" Name="FormInline">
    <p>In this example, the <code>Row</code> component is built into the <code>ValidateForm</code> component, and the front <code>Label</code> tag is automatically added</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Two" 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>
</DemoBlock>

<DemoBlock Title="Place form controls" Introduction="When placing form controls, you can specify <code>Normal</code> as <code>FormRow</code>, and <b>Label</b> will be displayed on the top, and the control will be full" Name="Form">
    <p>In this example, the <code>Row</code> component is built into the <code>ValidateForm</code> component, and the front <code>Label</code> tag is automatically added</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Three">
            <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>
</DemoBlock>

<DemoBlock Title="Nested use" Introduction="The <code>Row</code> component supports nested use. For example, the outermost <code>Row</code> below sets a row to display two controls, the first is <code>TextBox</code>, the second One is still <code>Row</code>, and the second <code>Row</code> continues to be set to display two controls" Name="Nested">
    <p>In this example, the <code>Row</code> component is built into the <code>ValidateForm</code> component, and the front <code>Label</code> tag is automatically added</p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Two">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ItemsPerRow="ItemsPerRow.Two">
                <Switch @bind-Value="@Model.Complete" />
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
        </Row>
    </ValidateForm>
    <div class="mt-3">
        <Row>
            <Row ItemsPerRow="ItemsPerRow.Two">
                <BootstrapInput @bind-Value="@Model.Name" />
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
            <Row ItemsPerRow="ItemsPerRow.Three">
                <BootstrapInput @bind-Value="@Model.Name" />
                <BootstrapInput @bind-Value="@Model.Address" />
                <Row ItemsPerRow="ItemsPerRow.Two">
                    <BootstrapInput @bind-Value="@Model.Name" />
                    <BootstrapInput @bind-Value="@Model.Address" />
                </Row>
            </Row>
        </Row>
    </div>
</DemoBlock>

<DemoBlock Title="Cross-column" Introduction="The <code>Row</code> component can set the number of spanning columns by specifying the <code>ColSpan</code> value. Combining these functions can achieve complex layouts"   Name="Rowspan">
    <p>In this example, the <code>Row</code> component is built into the <code>ValidateForm</code> component, and the front <code>Label</code> tag is automatically added</p>
    <p><b>4 in a row</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four">
            <BootstrapInput @bind-Value="@Model.Name" />
            <BootstrapInput @bind-Value="@Model.Address" />
            <BootstrapInputNumber @bind-Value="@Model.Count" />
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>2 in a row</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Two">
            <BootstrapInput @bind-Value="@Model.Name" />
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>The row shows 4 <code>Address</code> in 2 columns</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ColSpan="2">
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
            <Select @bind-Value="@Model.Education" />
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>Row shows 4, the second component <code>ColSpan</code> is set to 3</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four">
            <BootstrapInput @bind-Value="@Model.Name" />
            <Row ColSpan="3">
                <BootstrapInput @bind-Value="@Model.Address" />
            </Row>
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>Row shows 2, the first component <code>ColSpan</code> is set to 3</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.Four">
            <Row ColSpan="3">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </Row>
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>
    <p class="mt-3"><b>A component in a row</b></p>
    <ValidateForm Model="@Model">
        <Row ItemsPerRow="ItemsPerRow.One">
            <BootstrapInput @bind-Value="@Model.Address" />
        </Row>
    </ValidateForm>
</DemoBlock>

<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 Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.ComponentModel.DataAnnotations;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Rows
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Rows>? 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.Middle }
    };

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

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

        Hobbys = Foo.GenerateHobbys(LocalizerFoo);
    }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "ItemsPerRow",
            Description = Localizer["Desc1"],
            Type = "enum",
            ValueList = " One,Two,Three,Four,Six,Twelve ",
            DefaultValue = " One "
        },
        new AttributeItem() {
            Name = "RowType",
            Description = Localizer["Desc2"],
            Type = "enum?",
            ValueList = "Normal, Inline",
            DefaultValue = "null"
        },
        new AttributeItem() {
            Name = "ColSpan",
            Description = Localizer["Desc3"],
            Type = "int?",
            ValueList = "-",
            DefaultValue = "null"
        },
        new AttributeItem() {
            Name = "MaxCount",
            Description = Localizer["Desc4"],
            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 Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor 组件库 更新到 6.6.0

首先感谢您对本套组件的关注,本目前本套组件已经拥有超过 120 个组件,本组件是基于 Bootstrap 风格的 Blazor 企业级组件库,提供如布局、导航、表单、数据、通知、图标、语音等几大类通用组件,每一个组件都经过静心设计,具有模块化、响应式和优秀的性能。从更多实际场景出发,满足多种场景的需求,极大的减少开发者时间成本,大大缩短开发周期,大幅提高开发效率,并提供了一套 通用权限管理系统 示例工程。Bootstrap Blazor 产品是由一支专业的全职技术团队进行维护,高效的响应速度,多元化的解决方案,长期提供支持,并提供企业级支持。目前已在多家知名国企内部使用,项目最高在线 1200 人稳定运行。右侧为国内人数最多的中文 Blazor QQ 社区二维码,欢迎扫描加群。

组件更新到 6.6.0 更新日志 [传送门] 如果组件给您带来了方便,请您帮忙给项目点亮 Star github gitee

QQGroup
QQ 795206915