ResponsiveGridLayout

ResponsiveGridLayout - 响应式网格布局 是一个容器,组件在网格内放置。网格基于 Bootstrap 的 12 列网格系统(参阅 Bootstrap 文档 了解详情)。

组件的 XML 名称:responsiveGridLayout

该布局容器的主要功能是它是完全响应式的。ResponsiveGridLayout 中组件的排列方式会根据界面的大小自动调整。

请注意,ResponsiveGridLayout 的 breakpoints 是基于媒体查询的最小宽度。例如,@media(min-width: 576px)。也就是说,组件的大小是根据浏览器窗口的大小来调整的,而非界面中的容器大小。

网格的 Breakpoints

网格容器由行和列组成。行由 XML 中的 row 元素表示,该元素内只能声明列。列用 col 元素表示,列内可以定义 组件 或其他 布局容器

ResponsiveGridLayout 的整个水平宽度分成 12 等份。每列可以占据一份或多份,并且支持在不同屏幕大小(或者用 Bootstrap 的术语,breakpoints)分别定义。Breakpoints 用 xssmmdlgxl 属性定义,属性值表示在这个屏幕大小时列的宽度 - 占据多少个 1/12。

下面是 breakpoints 和屏幕大小的对应关系:

  1. xs - 为特别小的屏幕,宽度小于 576px。Bootstrap 中的默认值。

  2. sm - 为小屏幕,宽度在 576px768px 之间。

  3. md - 为中等大小屏幕,宽度在 768px992px 之间。

  4. lg - 为大屏幕,宽度在 992px1200px 之间。

  5. xl - 为特大屏幕,宽度大于 1200px

Breakpoints 是按层级应用的。例如,sm 应用于小、中、大和超大的设备,但不能用于超小设备,超小设备由 xs breakpoint 表示。

示例:

<responsiveGridLayout>
    <row>
        <col sm="6" md="8"> (1)
            <label value="sm-6, md-8"/>
        </col>
        <col sm="6" md="4">
            <label value="sm-6, md-4"/>
        </col>
    </row>
    <row>
        <col sm="4" md="2">
            <label value="sm-4, md-2"/>
        </col>
        <col sm="4" md="8">
            <label value="sm-4, md-8"/>
        </col>
        <col sm="4" md="2">
            <label value="sm-4, md-2"/>
        </col>
    </row>
    <row>
        <col xs="6"> (2)
            <label value="xs-6"/>
        </col>
        <col xs="6">
            <label value="xs-6"/>
        </col>
    </row>
</responsiveGridLayout>
1 - 此列在小屏幕占据 6 份,在中等大小以上的屏幕占据 8 份。
2 - 此列在超小屏幕和所有更大的屏幕都占据 6 份。

当屏幕宽度在 768px992px 之间时,ResponsiveGridLayout 的内容看起来如下:

responsive layout breakpoints 1

当屏幕宽度缩小至 576px768px 之间时,ResponsiveGridLayout 的内容看起来如下:

responsive layout breakpoints 2

然后,宽度小于 576px 时:

responsive layout breakpoints 3

出于演示的目的,我们在每个单元格使用如下样式:

@import "../helium/helium";

@mixin helium-extended {
  @include helium;
  .jmix-responsivegridlayout {
    .row > .col, .row > [class^=col-] {
      padding-top: .75rem;
      padding-bottom: .75rem;
      background-color: #c1b6ef;
      border: 1px solid #F2F2F2;
    }
    &.vertical-alignment {
      .row {
        min-height: 10rem;
        background-color: #F2F2F2;
      }

      .row + .row {
        margin-top: 1rem;
      }
    }
  }
}

了解更多关于样式的内容,参阅 自定义主题

col 元素

等宽

列的定义中可以不带类似 xs="6" 这样的配置。如果没有这些显式的宽度配置,则在每个 breakpoint 下,列都是等宽的。此时列的宽度是按照一行中列的数量等分。

示例:

<responsiveGridLayout>
    <row>
        <col>
            <label value="1 of 2"/>
        </col>
        <col>
            <label value="2 of 2"/>
        </col>
    </row>
    <row>
        <col>
            <label value="1 of 3"/>
        </col>
        <col>
            <label value="2 of 3"/>
        </col>
        <col>
            <label value="3 of 3"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout equal width

设置一列的宽度

如果只为其中一列设置了 breakpoint 值,那么容器的剩余宽度将由其他列平分。

示例:

<responsiveGridLayout>
    <row>
        <col>
            <label value="1 of 3"/>
        </col>
        <col xs="6">
            <label value="1 of 3 (wider)"/>
        </col>
        <col>
            <label value="1 of 3"/>
        </col>
    </row>
    <row>
        <col>
            <label value="1 of 3"/>
        </col>
        <col xs="5">
            <label value="1 of 3 (wider)"/>
        </col>
        <col>
            <label value="1 of 3"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout one column width

自动和默认宽度

{breakpoint}="AUTO" 时,列根据其内容的自然 width 调整列宽。

如需创建等宽的列,请使用 {breakpoint}="DEFAULT"。这也是没有显式设置列宽时使用的默认值。

示例:

<responsiveGridLayout>
    <row justifyContentMd="CENTER">
        <col xs="DEFAULT" lg="2">
            <label value="1 of 3"/>
        </col>
        <col md="AUTO">
            <label value="Variable width content"/>
        </col>
        <col xs="DEFAULT" lg="2">
            <label value="1 of 3"/>
        </col>
    </row>
    <row>
        <col>
            <label value="1 of 3"/>
        </col>
        <col md="AUTO">
            <label value="Variable width content"/>
        </col>
        <col xs="DEFAULT" lg="2">
            <label value="1 of 3"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout variable width

row 元素

cols 属性

下列属性定义在特定的 breakpoint 中每行的列数:

  • cols

  • colsLg

  • colsMd

  • colsSm

  • colsXl

示例:

<responsiveGridLayout stylename="demo">
    <row cols="3">
        <col>
            <label value="Column"/>
        </col>
        <col>
            <label value="Column"/>
        </col>
        <col>
            <label value="Column"/>
        </col>
        <col>
            <label value="Column"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout row columns

guttersEnable 属性

默认情况下,guttersEnable="true"。如需禁用列之间的隐藏间隔,可设置 guttersEnable 属性为 false。此时会删除 row 的负边距和所有直接子列的左右 padding。

示例:

<responsiveGridLayout>
    <row guttersEnabled="false">
        <col>
            <label value="Col 1"/>
        </col>
        <col>
            <label value="Col 2"/>
        </col>
        <col>
            <label value="Col 3"/>
        </col>
    </row>
    <row guttersEnabled="true">
        <col>
            <label value="Col 1"/>
        </col>
        <col>
            <label value="Col 2"/>
        </col>
        <col>
            <label value="Col 3"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout gutters

对齐

行的垂直对齐

可以用下列属性设置整行在垂直方向上的对齐方式:

  • alignItems

  • alignItemsLg

  • alignItemsMd

  • alignItemsSm

  • alignItemsXl

以上属性可以有下列值:

  • BASELINE - row 内的每个 col 以内容的基线对齐。

  • CENTER - row 内的每个 col 上下居中。

  • END - row 内的每个 col 在底部对齐。

  • START - row 内的每个 col 在顶部对齐。

  • STRETCH - row 内的每个 col 拉升至行的高度。

示例:

<responsiveGridLayout stylename="vertical-alignment">
    <row alignItems="START">
        <col>
            <label value="1 of 3"/>
        </col>
        <col>
            <label value="2 of 3"/>
        </col>
        <col>
            <label value="3 of 3"/>
        </col>
    </row>
    <row alignItems="CENTER">
        <col>
            <label value="1 of 3"/>
        </col>
        <col>
            <label value="2 of 3"/>
        </col>
        <col>
            <label value="3 of 3"/>
        </col>
    </row>
    <row alignItems="END" >
        <col>
            <label value="1 of 3"/>
        </col>
        <col>
            <label value="2 of 3"/>
        </col>
        <col>
            <label value="3 of 3"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout align items

列的垂直对齐

col 本身使用下列属性在垂直方向对齐:

  • alignSelf

  • alignSelfLg

  • alignSelfMd

  • alignSelfSm

  • alignSelfXl

以上属性可以有下列值:

  • AUTO

  • BASELINE - col 按照基线对齐。

  • CENTER - col 上下居中。

  • END - col 在底部对齐。

  • START - col 在顶部对齐。

  • STRETCH - col 拉升至行的高度。

示例:

<responsiveGridLayout stylename="vertical-alignment">
    <row cols="3">
        <col alignSelf="AUTO">
            <label value="1 of 6"/>
        </col>
        <col alignSelf="BASELINE">
            <label value="2 of 6"/>
        </col>
        <col alignSelf="CENTER">
            <label value="3 of 6"/>
        </col>
        <col alignSelf="END">
            <label value="4 of 6"/>
        </col>
        <col alignSelf="START">
            <label value="5 of 6"/>
        </col>
        <col alignSelf="STRETCH">
            <label value="6 of 6"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout align self

水平对齐

水平方向的对齐,可以使用下列属性:

  • justifyContent

  • justifyContentLg

  • justifyContentMd

  • justifyContentSm

  • justifyContentXl

以上属性可以有下列值:

  • AROUND - 左右和每个 col 之间都有空间。

  • BETWEEN - 仅每个 col 之间有空间。

  • CENTER - row 中的 col 左右居中。

  • END - row 中的 col 右对齐。

  • START - row 中的 col 左对齐。

示例:

<responsiveGridLayout>
    <row justifyContent="START">
        <col xs="4">
            <label value="1 of 2"/>
        </col>
        <col xs="4">
            <label value="2 of 2"/>
        </col>
    </row>
    <row justifyContent="CENTER">
        <col xs="4">
            <label value="1 of 2"/>
        </col>
        <col xs="4">
            <label value="2 of 2"/>
        </col>
    </row>
    <row justifyContent="END">
        <col xs="4">
            <label value="1 of 2"/>
        </col>
        <col xs="4">
            <label value="2 of 2"/>
        </col>
    </row>
    <row justifyContent="AROUND">
        <col xs="4">
            <label value="1 of 2"/>
        </col>
        <col xs="4">
            <label value="2 of 2"/>
        </col>
    </row>
    <row justifyContent="BETWEEN">
        <col xs="4">
            <label value="1 of 2"/>
        </col>
        <col xs="4">
            <label value="2 of 2"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout justify content

重排序

下列属性可以控制内容的展示顺序:

  • order

  • orderLg

  • orderMd

  • orderSm

  • orderXl

这些属性的值可以使用特定的数字,或者预定义的 FIRSTLAST

示例:

<responsiveGridLayout>
    <row cols="1">
        <col>
            <label value="First in DOM, no order applied"/>
        </col>
        <col order="12">
            <label value="Second in DOM, with a larger order"/>
        </col>
        <col order="1">
            <label value="Third in DOM, with an order of 1"/>
        </col>
    </row>
</responsiveGridLayout>

<responsiveGridLayout>
    <row cols="1">
        <col order="LAST">
            <label value="First in DOM, ordered last"/>
        </col>
        <col>
            <label value="Second in DOM, unordered"/>
        </col>
        <col order="FIRST">
            <label value="Third in DOM, ordered first"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout reordering

偏移

下列属性可以将 cols 右移一定的距离:

  • offset

  • offsetLg

  • offsetMd

  • offsetSm

  • offsetXl

偏移量用该属性值乘以容器宽度再除以 12 计算(即,偏移多少个 Bootstrap 列)。

示例:

<responsiveGridLayout >
    <row>
        <col md="4" xl="">
            <label value="md-4"/>
        </col>
        <col md="4" offsetMd="4">
            <label value="md-4, offset-md-4"/>
        </col>
    </row>
    <row>
        <col md="3" offsetMd="3">
            <label value="md-3, offset-md-3"/>
        </col>
        <col md="3" offsetMd="3">
            <label value="md-3, offset-md-3"/>
        </col>
    </row>
    <row>
        <col md="6" offsetMd="4">
            <label value="md-6, offset-md-4"/>
        </col>
    </row>
</responsiveGridLayout>
responsive layout offset

默认 Bootstap 样式

还可以通过 stylename 属性使用 bootstrap 默认的样式。例如,使用 pl 可以设置 padding-left,使用 mt 可以设置 margin-top,等等。查看 bootstrap spacing 了解更多设置。

<responsiveGridLayout>
    <row stylename="mt-md-n2">
        <col md="AUTO" stylename="pl-0 pt-2">
            <hbox spacing="true">
                <label value="Col 1"/>
                <textField id="nameField"/>
            </hbox>
        </col>
        <col md="AUTO" stylename="pl-0 pt-2">
            <hbox spacing="true">
                <label value="Col 2"/>
                <textField id="keyField"/>
            </hbox>
        </col>
        <col md="AUTO" stylename="px-0 pt-2">
            <hbox spacing="true">
                <label value="Col 3"/>
                <checkBox id="checkBox"/>
            </hbox>
        </col>
        <col stylename="w-100 pl-0 pt-2">
            <label value="Col 4"/>
        </col>
    </row>
</responsiveGridLayout>

属性

containerType

ResponsiveGridLayout 有两种类型

  • FLUID - 一个全宽度的容器,占据此 breakpoint 下的整个宽度。默认类型。

  • FIXED - 一旦屏幕宽度到达特定的 breakpoint,ResponsiveGridLayout 的宽度设置以下值:

    1. xl - 1140px

    2. lg - 960px

    3. md - 720px

    4. sm - 540px

示例:

<responsiveGridLayout containerType="FLUID">
    <row>
        <col sm="4">
            <label value="1 of 3"/>
        </col>
        <col sm="4">
            <label value="2 of 3"/>
        </col>
        <col sm="4">
            <label value="3 of 3"/>
        </col>
    </row>
</responsiveGridLayout>

<responsiveGridLayout containerType="FIXED">
    <row>
        <col sm="4">
            <label value="1 of 3"/>
        </col>
        <col sm="4">
            <label value="2 of 3"/>
        </col>
        <col sm="4">
            <label value="3 of 3"/>
        </col>
    </row>
</responsiveGridLayout>
responsive grid layout fixed