Динамический грид

Многоколоночный динамический макет сетки, элементы которого можно сортировать и фильтровать.

Компонент «Динамическая сетка» позволяет создавать динамический и адаптивный макет сетки *грида с использованием компонента Grid. Элементы сетки будут беспрепятственно и плавно выстраиваться, создавая многоколоночный макет без зазоров для девайсов любых размеров.

Применение

Чтобы применить компонент «Dynamic Grid», добавьте атрибут data-uk-grid к элементу контейнера. Установите ширину элементов сетки с помощью классов uk-width-* или .uk-grid-width-* из компонента Grid.

Пример

1
2
3
4
5
6
7
8

Разметка

<!-- Это сетка, использующая uk-width-* для каждого элемента -->
<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>

<!-- Это сетка, использующая uk-grid-width-* на самой сетке -->
<div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-4" data-uk-grid>
    <div>...</div>
    <div>...</div>
</div>

Grid Gutter

Чтобы разделить элементы сетки с помощью зазора *gutter, нужно добавить опцию {gutter: 20} в data-* атрибут. В этом примере зазор шириной 20 пикселей.

Пример

1
2
3
4
5
6
7
8

Разметка

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

Фильтр

Вы также можете отфильтровать свою сетку *grid, чтобы отображались только определенные элементы. Для этого добавьте в data-* атрибут параметр {controls: '#my-id'}, чтобы указать целевой идентификатор (ID) элемента для управления фильтра. Каждый элемент управления должен иметь атрибут data-uk-filter для определения категории, которую вы хотите фильтровать. Затем вам также необходимо добавить атрибут data-uk-filter к каждому элементу сетки/грида, чтобы указать, к какой категории принадлежит элемент. Разделяйте несколько категорий запятыми.

Пример

А 1
Б 2
А 3
Б 4
Б 5
А 6
Б 7
А и Б 8

Разметка

В этом примере используется компонент Subnav для фильтрации элементов.

<!-- Управление фильтрами -->
<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>

Сортировка

Чтобы отсортировать элементы сетки/грида по возрастанию, добавьте в data-* атрибут параметр {controls: '#my-id'}, указав целевой идентификатор (ID) для управления сортировкой элементов.

Каждый элемент управления должен иметь атрибут data-uk-sort с пользовательским значением, например, для категории, которую вы хотите отсортировать, можно прописать data-uk-sort="my-category". Вам также необходимо добавить атрибут данных к каждому элементу сетки, используя имя вашей целевой категории. Значения содержащие данные, которые должны быть отсортированы, например data-my-category="my-data".

По умолчанию элементы сортируются по возрастанию. Чтобы отсортировать элементы по убыванию, просто добавьте :desc к значению атрибута данных элементов управления, например, data-uk-sort="my-category:desc".

Пример

А
Б
В
Г
Д
Е
Ж
З

Разметка

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

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

Пример с числами

Примечание Изначально блоки разбросаны. После выбора, клика по желаемому пункту, блоки будут отсортированы в выбранном порядке.

3
15
1
12
21
18
6
9

Разметка

<ul id="my-numbers-id" class="uk-subnav">
    <li data-uk-sort="my-numbers:asc"><a href="">По возрастанию</a></li>
    <li data-uk-sort="my-numbers:desc"><a href="">По убыванию</a></li>
</ul>

<div data-uk-grid="{gutter: 20, controls: '#my-numbers-id'}">
    <div data-my-category="1">...</div>
    <div data-my-category="5">...</div>
</div>

Multiple categories

Чтобы использовать несколько категорий для сортировки элементов грид-сетки, используйте разные имена для каждой категории.

A
8
B
7
C
6
D
1
E
5
F
3
G
2
H
4

Разметка

<ul id="my-id" class="uk-subnav">
    <li data-uk-sort="my-category:asc"><a href=""></a></li>
    <li data-uk-sort="my-category:desc"><a href=""></a></li>
    <li data-uk-sort="my-category2:asc"><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 options

Option Possible value Default Описание
colwidth integer auto Ширина столбцов
animation boolean true Анимировать столбцы при обновлении
duration integer 200 Продолжительность анимации
gutter integer 0 Зазор между столбцами
controls string false Css selector to connect filter / order controls.
filter string '' Items filter

Init element manually

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

Events

Name Parameter Description
beforeupdate.uk.grid event, children On before update grid
afterupdate.uk.grid event, children On after update grid

Пример

Listening for beforeupdate events with jQuery:

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

Добавляем компонент «Dynamic Grid» к проекту:

<script src="../js/components/grid.min.js"></script>