动态网格

创建一个多列、动态的网格布局，其项目可以排序和过滤。

动态网格组件允许您使用 网格组件 创建动态且响应式的网格布局。网格项目将流畅且无缝地排列，以便在所有设备尺寸上实现无间隙的多列布局。

用法

要应用此组件，请将 data-uk-grid 属性添加到容器元素。使用 网格组件 中的 uk-width-* 或 .uk-grid-width-* 类设置网格项目的宽度。

示例

标记

<!-- This is a grid using uk-width-* on each item -->
<div data-uk-grid>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">...</div>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">...</div>
</div>

<!-- This is a grid using uk-grid-width-* on the grid itself -->
<div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-4" data-uk-grid>
    <div>...</div>
    <div>...</div>
</div>

网格间距

通过向 data 属性添加 {gutter: 20} 选项来分割网格项目。在这种情况下，间距宽度为 20 像素。

示例

标记

<div data-uk-grid="{gutter: 20}">...</div>

过滤

您还可以过滤您的网格，以便仅显示特定的项目。为此，请将 {controls: '#my-id'} 选项添加到 data 属性，以定位筛选控件的 id。每个控件都需要具有 data-uk-filter 属性来定义您要筛选的类别。然后，您还需要将 data-uk-filter 属性添加到每个网格项目，以定义该项目所属的类别。用逗号分隔多个类别。

示例

• 全部
• 筛选 A
• 筛选 B

标记

此示例使用 子导航 来筛选项目。

<!-- Filter Controls -->
<ul id="my-id" class="uk-subnav">
    <li data-uk-filter=""><a href=""></a></li>
    <li data-uk-filter="filter-a"><a href=""></a></li>
    <li data-uk-filter="filter-b"><a href=""></a></li>
</ul>

<!-- Dynamic Grid -->
<div data-uk-grid="{controls: '#my-id'}">
    <div data-uk-filter="filter-a">...</div>
    <div data-uk-filter="filter-b">...</div>
    <div data-uk-filter="filter-a,filter-b">...</div>
</div>

排序

要按升序对网格项目进行排序，请将 {controls: '#my-id'} 选项添加到 data 属性，以定位排序控件的 id。

每个控件都需要具有带有自定义值的 data-uk-sort 属性，该属性定位您要排序的类别，例如 data-uk-sort="my-category"。您还需要使用目标类别的名称向每个网格项目添加一个 data 属性。该值包含应该排序的数据，例如 data-my-category="my-data"。

默认情况下，项目按升序排序。要按降序对项目进行排序，只需将 :desc 添加到控件的 data 属性的值中，例如 data-uk-sort="my-category:desc"。

示例

• 升序
• 降序

标记

<ul id="my-id" class="uk-subnav">
    <li data-uk-sort="my-category"><a href=""></a></li>
    <li data-uk-sort="my-category:desc"><a href=""></a></li>
</ul>

<div data-uk-grid="{controls: '#my-id'}">
    <div data-my-category="a">...</div>
    <div data-my-category="b">...</div>
</div>

多个类别

要使用多个类别对网格项目进行排序，请为每个类别使用不同的名称。

• 字符 (升序)
• 字符 (降序)
• 数字 (升序)
• 数字 (降序)

标记

<ul id="my-id" class="uk-subnav">
    <li data-uk-sort="my-category"><a href=""></a></li>
    <li data-uk-sort="my-category:desc"><a href=""></a></li>
    <li data-uk-sort="my-category2"><a href=""></a></li>
    <li data-uk-sort="my-category2:desc"><a href=""></a></li>
</ul>

<div data-uk-grid="{controls: '#my-id'}">
    <div data-my-category="a" data-my-category2="8">...</div>
    <div data-my-category="b" data-my-category2="7">...</div>
</div>

JavaScript 选项

手动初始化元素

var grid = UIkit.grid(element, { /* options */ });

事件

示例

使用 jQuery 监听 beforeupdate 事件

$(function() {
    $('[data-uk-grid]').on('beforeupdate.uk.grid', function(e, children) {
        // your event-handling goes here
    });
});