Blazor 组件库 BootstrapBlazor 中Row组件介绍

组件介绍

在

Bootstrap

中，我们经常使用

row

和

col

通过栅格化来控制显示位置。

如

<div class="row">
<div class="col-12"></div>
</div>

会显示一个充满行的

div

。

但是我们需要编写很多代码，比如大量重复的

div

标签。还有

col

的

class

。

为了减少代码的数量，

BootstrapBlazor

增加了一个

Row

组件来简化代码的编写。

一个比较全面的例子：

该例子的代码如下：

<p>本例中 <code>Row</code> 组件内置于 <code>ValidateForm</code> 组件内，自动增加前置 <code>Label</code> 标签</p>
<p><b>行显示 4 个</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 个</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>行显示 4 个 <code>Address</code> 占 2 列</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>行显示 4 个，第二个组件 <code>ColSpan</code> 设置为 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>行显示 2 个，第一个组件 <code>ColSpan</code> 设置为 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>行显示一个组件</b></p>
<ValidateForm Model="@Model">
<Row ItemsPerRow="ItemsPerRow.One">
<BootstrapInput @bind-Value="@Model.Address" />
</Row>
</ValidateForm>

组件的其他属性

ItemsPerRow

：每行显示几个组件，可选值为

One,Two,Three,Four,Six,Twelve

，这里只能放置可被12整除的组件数量，如果需要不能被12整除的数据，建议编写原始的

div

。默认值为

One

RowType

：排版格式，可选值为

Normal, Inline

，如果嵌套的子

Row

没有指定格式，则默认使用父

Row

的格式。默认值为

null

ColSpan

：子

Row

跨父

Row

的列数。

MaxCount

：行内最多显示的组件数。