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

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

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

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

Для установки этого компонента, добавьте 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>

Грид Желоб

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

Пример

Разметки

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

Фильтрация

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

Пример

• Все
• Фильтр
• Фильтр Б

Разметки

В этом примере используется 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".

Пример

• По возрастанию
• По убыванию

Разметки

<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 */ });

События

Пример

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

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