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

Создать многостолбцовый, динамические грид разметка чьи элементы могут быть отсортированы и отфильтрованы.

Динамический Грид компонент позволяет создавать динамическую и aдаптивную грид разметку используя Грид компонент. Грид элементы будут выстраиваться свободно и легко для бесщелевой компоновки нескольких столбцов разметки на всех размерах устройств.


Использование

Для установки этого компонента, добавьте data-uk-grid атрибут к элементу контейнера. Задайте ширину грид элементов с помощью uk-width-* или .uk-grid-width-* класса Грид компонент.

Пример

1
2
3
4
5
6
7
8

Разметки

<!-- 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>

Грид Желоб

Разделяй грид элементы желобом, добавив {gutter: 20} опцию для данных атрибутов. В этом случае желоб будет 20px в ширину.

Пример

1
2
3
4
5
6
7
8

Разметки

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

Фильтрация

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

Пример

A 1
B 2
A 3
B 4
B 5
A 6
B 7
A+B 8

Разметки

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

<!-- 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-uk-sort атрибут Пользовательское значение, ориентированном на категории вы хотите быть отсортированы, например data-uk-sort="my-category". Вы также должны добавить атрибут Data для каждого грид пункт, используя вашу целевую название категории. Значение содержит данные, которые должны быть отсортированы, например data-my-category="my-data".

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

Пример

A
B
C
D
E
F
G
H

Разметки

<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>

Несколько категорий

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

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"><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 варианты

Вариант Возможное значение По умолчанию Описание
colwidth integer auto Ширина столбцов
animation boolean true Анимировать столбцы на обновлении
duration integer 200 Длительность анимации
gutter integer 0 Желоб между колоннами
controls string false CSS-селектор для подключения фильтра / порядок управления.
filter string '' Элементы фильтра

Инициализации элементов вручную

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

События

Название Параметр Описание
beforeupdate.uk.grid event, children До обновления на грид
afterupdate.uk.grid event, children После обновления на грид

Пример

Для прослушивания события beforeupdate с jQuery:

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