
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 somewhereCard 2
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard 3
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard 1
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard 2
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard 3
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereWhen 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
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
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
@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; }
}
}