BulmaRazor

列间隙(Columns gap)

自定义列间的间隙(gap)

默认间隙(Default gap)

每一个列都有间隙(gap) 值是变量 $column-gap的值, 默认值是 0.75rem.
由于列的两边都有间隙，因此相邻两列的间距是$column-gap的2倍, 默认值是 1.5rem.

视图
代码

Default Gap

<Columns>
    <Column>
        <Notification Color="Color.Primary">Default Gap</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Default Gap</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Default Gap</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Default Gap</Notification>
    </Column>
</Columns>

无间隙(Gapless)

如果想要删除列间距，请在columns容器添加IsGaspless修饰符:

视图
代码

No Gap

<Columns IsGapless>
    <Column>
        <Notification Color="Color.Primary">No Gap</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">No Gap</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">No Gap</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">No Gap</Notification>
    </Column>
</Columns>

它可以和IsMultiline修饰符组合使用:

视图
代码

OneQuarter

Half

OneQuarter

Auto

<Columns IsGapless IsMultiline IsMobile>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.Half">
        <Notification Color="Color.Primary">Half</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Auto</Notification>
    </Column>
</Columns>

可变间隙(Variable gap)

实验性的

你可以在 Columns 容器上添加这 9 种修饰符来自定义列间隙。

Gap.Gap0 将移除所有间隙 (类似于 IsGapless)
Gap.Gap3 是 默认值, 等同于 0.75rem
Gap.Gap8 是间隙的最大值，等于 2rem

此外, .is-variable 修饰符会自动添加到Columns 容器.

视图
代码

Side

Main

Three columns

<Content>
    <Level>
        <LevelLeft>
            <LevelItem>
                <strong>Gap:</strong>
            </LevelItem>
            <LevelItem>
                @(gaps.IndexOf(curGap)*0.25)rem
            </LevelItem>
        </LevelLeft>
        <LevelRight>
            <LevelItem>
                <Tags>
                    @foreach (var gap in gaps)
                    {
                        <Tag @onmouseover="e=>changeGap(gap)" class="is-clickable"
                            Color="gap==curGap?Color.Info:Color.Default">@gap.Value</Tag>
                    }
                </Tags>
            </LevelItem>
        </LevelRight>
    </Level>
</Content>

<Columns Gap="curGap">
    <Column Size="Size.Size3">
        <Notification Color="Color.Primary">Side</Notification>
    </Column>
    <Column Size="Size.Size9">
        <Notification Color="Color.Primary">Main</Notification>
    </Column>
</Columns>
<Columns Gap="curGap">
    @for (var j = 0; j < 3; j++)
    {
        <Column Size="Size.Size4">
            <Notification Color="Color.Primary">Three columns</Notification>
        </Column>
    }
</Columns>
<Columns Gap="curGap">
    @for (var i = 1; i <= 12; i++)
    {
        var ci = i;
        <Column>
            <Notification Color="Color.Primary">@ci</Notification>
        </Column>
    }
</Columns>

@code{
    List<Gap> gaps = new List<Gap>(){
    Gap.Gap0,Gap.Gap1,Gap.Gap2,Gap.Gap3,Gap.Gap4,Gap.Gap5,Gap.Gap6,Gap.Gap7,Gap.Gap8
    };
    Gap curGap = Gap.Gap0;

    void changeGap(Gap gap)
    {
        curGap = gap;
    }
}

基于断点的列间隙

您可以为每个视口大小定义列间隙:

视图
代码

Column

<Columns GapMobile="GapMobile.Gap1" GapTablet="GapTablet.Gap0" GapDesktop="GapDesktop.Gap3"
    GapWidescreen="GapWidescreen.Gap8" GapFullhd="GapFullhd.Gap1">
    <Column>
        <Notification Color="Color.Primary">Column</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Column</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Column</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Column</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Column</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Column</Notification>
    </Column>
</Columns>

如果要查看差异，请调整浏览器的大小，然后查看列间隙如何变化。

文档