Документация UIkit 3 на русском

Главная
Фильтр

Фильтруйте или сортируйте элементы в любом заданном формате по метаданным.

Что можно сделать с компонентом Фильтр смотрите в разделе примеры.

Компонент Filter часто используется вместе с компонентом Сетка и Masonry. Любой макет может быть отфильтрован или отсортирован независимо от того, как элементы расположены. Элементы исчезают и перемещаются с плавными переходами между различными состояниями фильтрации и сортировки.

Как использовать компонент Filter в UIkit 3. Уникальная фильтрация на лету.

Для начала работы с компонентом этот сосздайте элемент контейнера с атрибутом uk-filter="target: SELECTOR". Внутри этого контейнера создайте список элементов управления фильтром, а также элементы макета, которые вы хотите фильтровать. Используйте опцию target: SELECTOR, чтобы связать переключатели со списком элементов, которые будут фильтроваться.

<div uk-filter="target: .js-filter">

    <!-- Управление -->
    <ul>
        <li><a href="#"></a></li>
    </ul>

    <!-- Элементы для фильтрации -->
    <ul class="js-filter">
        <li></li>
    </ul>

</div>

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

Чтобы активировать элемент управления фильтром, добавьте атрибут uk-filter-control. Чтобы определить метаданные, которые должны быть отфильтрованы, используйте опцию filter: SELECTOR. Селектором может быть любой селектор CSS, например, класс HTML или атрибут, который вы определяете для элементов макета.

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="filter: .tag-blue"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li class="tag-blue"></li>
    </ul>

</div>

Если target является единственной опцией в значении атрибутаuk-filter, вы также можете использовать uk-filter =" SELECTOR ". То же самое относится к фильтру управления. Если filter является единственной опцией в значении атрибутаuk-filter-control, вы можете указать просто uk-filter-control="SELECTOR".

<div uk-filter=".js-filter">

    <ul>
        <li uk-filter-control=".tag-blue"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li class="tag-blue"></li>
    </ul>

</div>

- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li uk-filter-control=".tag-white"><a href="#">Белый</a></li>
        <li uk-filter-control=".tag-blue"><a href="#">Синий</a></li>
        <li uk-filter-control=".tag-black"><a href="#">Черный</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
    </ul>

</div>

Компонент Filter поставляется без стиля, что позволяет использовать любые другие компоненты UIkit 3 для создания элементов управления фильтра и макета Элемент. Например, компоненты Nav, Subnav и Tab могут быть использованы для стилизации элементов управления фильтра. Компонент Grid component используется для создания сетки.

Активное состояние

Добавьте класс .uk-active к элементу управления фильтра, и фильтр будет применен изначально.

<li class="uk-active" uk-filter-control="[data-color='blue']">...</li>

- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li class="uk-active" uk-filter-control="[data-color='white']"><a href="#">Белый</a></li>
        <li uk-filter-control="[data-color='blue']"><a href="#">Синий</a></li>
        <li uk-filter-control="[data-color='black']"><a href="#">Черный</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
    </ul>

</div>

Сброс фильтра

Чтобы сбросить фильтр и выбрать все элементы, используйте атрибут uk-filter-control без какого-либо селектора.

<li uk-filter-control>...</li>

- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li class="uk-active" uk-filter-control><a href="#">Все</a></li>
        <li uk-filter-control="[data-color='white']"><a href="#">Белый</a></li>
        <li uk-filter-control="[data-color='blue']"><a href="#">Синий</a></li>
        <li uk-filter-control="[data-color='black']"><a href="#">Черный</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
    </ul>

</div>

Мета-данные

Элемент может иметь разные метаданные для фильтрации. Вам просто нужно определить классы HTML или data Этот пример использует data атрибуты вместо классов HTML.

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="[data-tags*='blue']"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-tags="blue dark"></li>
    </ul>

</div>

- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li uk-filter-control="[data-tags*='white']"><a href="#">Белый</a></li>
        <li uk-filter-control="[data-tags*='blue']"><a href="#">Синий</a></li>
        <li uk-filter-control="[data-tags*='black']"><a href="#">Черный</a></li>
        <li uk-filter-control="[data-tags*='dark']"><a href="#">Темный</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-tags="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-tags="blue dark">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-tags="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-tags="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-tags="black dark">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-tags="black dark">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-tags="blue dark">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-tags="black dark">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
        <li data-tags="blue dark">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-tags="white">
            <div class="uk-card uk-card-default uk-card-body">Элемент</div>
        </li>
        <li data-tags="blue dark">
            <div class="uk-card uk-card-primary uk-card-body">Элемент</div>
        </li>
        <li data-tags="black dark">
            <div class="uk-card uk-card-secondary uk-card-body">Элемент</div>
        </li>
    </ul>

</div>

Несколько фильтров

Определите различные типы метаданных и добавьте любое количество элементов управления для их фильтрации. Элементы управления фильтрами являются уникальными, то есть одновременно фильтруется только один критерий.

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="[data-color='blue']"><a href="#"></a></li>
    </ul>

    <ul>
        <li uk-filter-control="[data-size='small']"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue" data-size="small"></li>
    </ul>

</div>

- Все
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент

<div uk-filter="target: .js-filter">

    <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li class="uk-active" uk-filter-control><a href="#">Все</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="[data-color='white']"><a href="#">Белый</a></li>
                <li uk-filter-control="[data-color='blue']"><a href="#">Синий</a></li>
                <li uk-filter-control="[data-color='black']"><a href="#">Черный</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="[data-size='small']"><a href="#">Маленький</a></li>
                <li uk-filter-control="[data-size='medium']"><a href="#">Средний</a></li>
                <li uk-filter-control="[data-size='large']"><a href="#">Большой</a></li>
            </ul>
        </div>
    </div>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">
        <li data-color="white" data-size="large">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="blue" data-size="small">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="white" data-size="medium">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="white" data-size="small">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="black" data-size="medium">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="black" data-size="large">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="blue" data-size="large">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="white" data-size="large">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
    </ul>

</div>

Группы

Для фильтрации элементов по нескольким критериям одновременно необходимо сгруппировать элементы управления фильтрами. Задайте опцию group: NAME для атрибута uk-filter-control и определите имена групп для метаданных.

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="filter: [data-color='blue']; group: color"><a href="#"></a></li>
        <li uk-filter-control="filter: [data-color='white']; group: color"><a href="#"></a></li>
    </ul>

    <ul>
        <li uk-filter-control="filter: [data-size='small']; group: size"><a href="#"></a></li>
        <li uk-filter-control="filter: [data-size='large']; group: size"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue" data-size="small"></li>
    </ul>

</div>

- Dct
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент
- Элемент

<div uk-filter="target: .js-filter">

    <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li class="uk-active" uk-filter-control><a href="#">Dct</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="filter: [data-color='white']; group: data-color"><a href="#">Белый</a></li>
                <li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Синий</a></li>
                <li uk-filter-control="filter: [data-color='black']; group: data-color"><a href="#">Черный</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="filter: [data-size='small']; group: size"><a href="#">Маленький</a></li>
                <li uk-filter-control="filter: [data-size='medium']; group: size"><a href="#">Средний</a></li>
                <li uk-filter-control="filter: [data-size='large']; group: size"><a href="#">Большой</a></li>
            </ul>
        </div>
    </div>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">
        <li data-color="white" data-size="large">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="blue" data-size="small">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="white" data-size="medium">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="white" data-size="small">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="black" data-size="medium">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="black" data-size="large">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="blue" data-size="large">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="white" data-size="large">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Элемент</div>
            </div>
        </li>
    </ul>

</div>

Сортировка

Для алфавитно-цифровой сортировки добавьте опцию sort: ATTRIBUTE к атрибуту uk-filter-control и определите атрибут метаданных, по которому элементы должны быть отсортированы. По умолчанию элементы сортируются в порядке возрастания. Добавьте order: desc сортировки элементов в порядке убывания.

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="sort: data-color"><a href="#"></a></li>
        <li uk-filter-control="sort: data-color; order: desc"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue"></li>
    </ul>

</div>

- По возрастанию
- По убыванию
- 2016-06-01
- 2016-12-13
- 2017-05-20
- 2017-09-17
- 2017-11-03
- 2017-12-25
- 2018-01-30
- 2018-02-01
- 2018-03-11
- 2018-06-13
- 2018-10-27
- 2018-12-02

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li class="uk-active" uk-filter-control="sort: data-date"><a href="#">По возрастанию</a></li>
        <li uk-filter-control="sort: data-date; order: desc"><a href="#">По убыванию</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-date="2016-06-01">
            <div class="uk-card uk-card-default uk-card-body">2016-06-01</div>
        </li>
        <li data-date="2016-12-13">
            <div class="uk-card uk-card-primary uk-card-body">2016-12-13</div>
        </li>
        <li data-date="2017-05-20">
            <div class="uk-card uk-card-default uk-card-body">2017-05-20</div>
        </li>
        <li data-date="2017-09-17">
            <div class="uk-card uk-card-default uk-card-body">2017-09-17</div>
        </li>
        <li data-date="2017-11-03">
            <div class="uk-card uk-card-secondary uk-card-body">2017-11-03</div>
        </li>
        <li data-date="2017-12-25">
            <div class="uk-card uk-card-secondary uk-card-body">2017-12-25</div>
        </li>
        <li data-date="2018-01-30">
            <div class="uk-card uk-card-primary uk-card-body">2018-01-30</div>
        </li>
        <li data-date="2018-02-01">
            <div class="uk-card uk-card-secondary uk-card-body">2018-02-01</div>
        </li>
        <li data-date="2018-03-11">
            <div class="uk-card uk-card-primary uk-card-body">2018-03-11</div>
        </li>
        <li data-date="2018-06-13">
            <div class="uk-card uk-card-default uk-card-body">2018-06-13</div>
        </li>
        <li data-date="2018-10-27">
            <div class="uk-card uk-card-primary uk-card-body">2018-10-27</div>
        </li>
        <li data-date="2018-12-02">
            <div class="uk-card uk-card-secondary uk-card-body">2018-12-02</div>
        </li>
    </ul>

</div>

Фильтр + Masonry

Фильтр часто используется вместе с компонентом Masonry. Переход фильтра отлично работает с любым макетом, независимо от того, как расположены элементы. Еще вы можете добавить эффект Parallax для этой сетки.

Вот полный пример такой сетки:

All

Белый

Синий

Черный

Маленький

Средний

Большой
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L

<div uk-filter="target: .js-filter">

    <div class="uk-grid-small uk-flex-middle" uk-grid>
        <div class="uk-width-expand">

            <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
                <div>
                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
                        <li class="uk-active" uk-filter-control><a href="#">All</a></li>
                    </ul>
                </div>
                <div>
                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
                        <li uk-filter-control="[data-color='white']"><a href="#">Белый</a></li>
                        <li uk-filter-control="[data-color='blue']"><a href="#">Синий</a></li>
                        <li uk-filter-control="[data-color='black']"><a href="#">Черный</a></li>
                    </ul>
                </div>
                <div>
                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
                        <li uk-filter-control="[data-size='small']"><a href="#">Маленький</a></li>
                        <li uk-filter-control="[data-size='medium']"><a href="#">Средний</a></li>
                        <li uk-filter-control="[data-size='large']"><a href="#">Большой</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="uk-width-auto uk-text-nowrap">


            <span class="uk-active" uk-filter-control="sort: data-name"><a class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></span>
            <span uk-filter-control="sort: data-name; order: desc"><a class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></span>

        </div>
    </div>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">
        <li data-color="white" data-size="large" data-name="A">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">A</div>
            </div>
        </li>
        <li data-color="blue" data-size="small" data-name="B">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">B</div>
            </div>
        </li>
        <li data-color="white" data-size="medium" data-name="C">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">C</div>
            </div>
        </li>
        <li data-color="white" data-size="small" data-name="D">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">D</div>
            </div>
        </li>
        <li data-color="black" data-size="medium" data-name="E">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">E</div>
            </div>
        </li>
        <li data-color="black" data-size="small" data-name="F">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">F</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium" data-name="G">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">G</div>
            </div>
        </li>
        <li data-color="black" data-size="large" data-name="H">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">H</div>
            </div>
        </li>
        <li data-color="blue" data-size="large" data-name="I">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">I</div>
            </div>
        </li>
        <li data-color="white" data-size="large" data-name="J">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">J</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium" data-name="K">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">K</div>
            </div>
        </li>
        <li data-color="black" data-size="small" data-name="L">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">L</div>
            </div>
        </li>
    </ul>

</div>

Опции компонента

Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее о параметрах

Опция	Значение	По умолчанию	Описание
`target`	String	''	Целевой список ul, к которому применяется фильтр.
`selActive`	String, Boolean	false	Селектор для изначально активных элементов управления фильтра.

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

JavaScript

Подробнее о компонентах JavaScript.

Инициализация

UIkit.filter(element, options);

События

Следующие события будут инициированы для компонента:

Имя	Описание
`beforeFilter`	Срабатывает до применения фильтра.
`afterFilter`	Срабатывает после применения фильтра.

Документация

Фильтр

Уважаемые пользователи!