Компонент Фильтр
Фильтруйте или сортируйте элементы используя метаданные. Любой элемент может быть отфильтрован или отсортирован независимо от того как элементы расположены. Разметка. Примеры.
Компонент Фильтр часто используется вместе с компонентом Сетка : Grid, особенно Grid + Masonry, но это не обязательно. Любой элемент может быть отфильтрован или отсортирован независимо от того как элементы расположены. Элементы исчезают и перемещаются с плавными переходами между различными состояниями фильтрации и сортировки.
Filter: Создание
Как создать и применить фильтр
Чтобы применить компонент Фильтр, вам нужно создать родительский контейнер с атрибутом 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:
<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состояние.