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：行内最多显示的组件数。