Компонент Фильтр Filter

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

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

Создание

Как создать и применить фильтр

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

Чтобы указать на родительский элемент содержащий элементы, которые вы хотите фильтровать используйте опцию target: SELECTOR.

<div uk-filter="target: .js-filter">   <!-- Указываем в атрибуте цель -->

    <!-- Фильтр управления со списком управляющих элементов -->
    <ul>
        <li><a href="#"></a></li>
    </ul>

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

</div>

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

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

Селектор может быть любым селектором CSS, таким как класс HTML или атрибут, который вы установите для layout-элементов.

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

    <ul>        <!-- Указываем в атрибуте "класс-ключ" для управления -->
        <li uk-filter-control="filter: .tag-key">
            <a href="#"></a>
        </li>
    </ul>

    <ul class="js-filter">        
        <li class="tag-key"></li> <!-- Указываем "класс-ключ" -->
    </ul>

</div>

Если в значении атрибута uk-filter target это единственный параметр, вы можете использовать uk-filter="SELECTOR" (без target).

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

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

Стили

Стилизация фильтра

Компонент Фильтр поставляется без стиля, что позволяет использовать любые другие компоненты UIkit 3 для создания элементов управления фильтра и элементов, которые вы хотите фильтровать. Обычно при создании layout-элементов фильтрации используется компонент Grid.

Для стилизации элементов управления фильтра могут использоваться компоненты:

Анимации

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

Анимация Описание
slide Вытесняйте элементы и вставляйте их сдвигая в новое положение.
fade Все элементы постепенно исчезают.
delayed-fade Элементы немного задерживаются и плавно появляются.
<div uk-filter="animation: fade">...</div>
    • Item
    • Item
    • Item
    • Item
    • Item
    • Item
  • <div uk-filter="target: .js-filter; animation: delayed-fade">
    
        <ul class="uk-subnav uk-subnav-pill">
            <li uk-filter-control=".tag-white"><a href="#">White</a></li>
            <li uk-filter-control=".tag-blue"><a href="#">Blue</a></li>
            <li uk-filter-control=".tag-black"><a href="#">Black</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">Item</div>
            </li>
            <li class="tag-blue">
                <div class="uk-card uk-card-primary uk-card-body">Item</div>
            </li>
            <li class="tag-white">
                <div class="uk-card uk-card-default uk-card-body">Item</div>
            </li>
            <li class="tag-blue">
                <div class="uk-card uk-card-primary uk-card-body">Item</div>
            </li>
            <li class="tag-black">
                <div class="uk-card uk-card-secondary uk-card-body">Item</div>
            </li>
            <li class="tag-black">
                <div class="uk-card uk-card-secondary uk-card-body">Item</div>
            </li>
        </ul>
    
    </div>

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

Добавьте в элемент управления фильтра класс .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 uk-filter-control="[data-color='white']"><a href="#">Белый</a></li>
            <li class="uk-active" 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>

Метаданные

Фильтрация и Метаданные

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

В этом примере вместо классов HTML для фильтра используются data-* атрибуты .

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

Группы

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

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

    <ul>    <!-- название группы: color (цвет), фильтруем по цветам -->
        <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>    <!-- название группы: size (размер), фильтруем по размерам -->
        <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>
    • Блок
    • Блок
    • Блок
    • Блок
    • Блок
    • Блок
    • Блок
    • Блок
    • Блок
    • Блок
    • Блок
    • Блок
  • <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="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>

Сортировка

Чтобы отсортировать элементы в алфавитном порядке, просто добавьте к атрибуту uk-filter-control параметр sort: ATTRIBUTE и определите атрибут метаданных, по которому элементы должны быть отсортированы.

По умолчанию элементы сортируются в порядке возрастания.

Для сортировки в порядке убывания добавьте 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>
    • 01-01-2010
    • 13-12-2011
    • 05-05-2012
    • 17-09-2013
    • 03-11-2014
    • 25-12-2015
    • 30-01-2015
    • 01-02-2016
    • 11-09-2017
    • 13-06-2018
    • 25-10-2019
    • 01-12-2020
  • <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="2010-01-01">
                <div class="uk-card uk-card-default uk-card-body">01-01-2010</div>
            </li>
            <li data-date="2011-12-13">
                <div class="uk-card uk-card-primary uk-card-body">13-12-2011</div>
            </li>
            <li data-date="2012-05-05">
                <div class="uk-card uk-card-default uk-card-body">05-05-2012</div>
            </li>
            <li data-date="2013-09-17">
                <div class="uk-card uk-card-default uk-card-body">17-09-2013</div>
            </li>
            <li data-date="2014-11-03">
                <div class="uk-card uk-card-secondary uk-card-body">03-11-2014</div>
            </li>
            <li data-date="2015-12-25">
                <div class="uk-card uk-card-secondary uk-card-body">25-12-2015</div>
            </li>
            <li data-date="2015-01-30">
                <div class="uk-card uk-card-primary uk-card-body">30-01-2015</div>
            </li>
            <li data-date="2016-02-01">
                <div class="uk-card uk-card-secondary uk-card-body">01-02-2016</div>
            </li>
            <li data-date="2017-09-11">
                <div class="uk-card uk-card-primary uk-card-body">11-09-2017</div>
            </li>
            <li data-date="2018-06-13">
                <div class="uk-card uk-card-default uk-card-body">13-06-2018</div>
            </li>
            <li data-date="2019-10-25">
                <div class="uk-card uk-card-primary uk-card-body">25-10-2019</div>
            </li>
            <li data-date="2020-12-01">
                <div class="uk-card uk-card-secondary uk-card-body">01-12-2020</div>
            </li>
        </ul>
    </div>

Masonry Grid

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

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

    • 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="#">Все</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" aria-label="Сортировать по возрастанию"></a>
                </span>
                <span uk-filter-control="sort: data-name; order: desc">
                	<a class="uk-icon-link" href="#" uk-icon="icon: arrow-up" aria-label="Сортировать по убыванию"></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>

Параметры для атрибута

При использовании компонента Filter к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

Опция Значение По умолчанию Описание
target String '' Цель, к которой применяется фильтр.
selActive String, Boolean false Селектор для изначально активных элементов управления фильтра.
animation String, Boolean slide Анимационный режим:
slide, fade, delayed-fade С весрии UIkit 3.6.+ или false.
duration Number 250 Продолжительность анимации в миллисекундах. С весрии UIkit 3.6.+

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

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

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

UIkit.filter(element, options);

События

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

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

Доступность

Компонент «Фильтр» автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

  • Элементы управления фильтром имеют aria-selected состояние.