Компонент Фильтр 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>
Стили
Стилизация фильтра
Компонент Фильтр поставляется без стиля, что позволяет использовать любые другие компоненты 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>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.filter(element, options);
События
Следующие события будут инициированы для элементов компонента «Filter»:
Имя события | Описание |
---|---|
beforeFilter |
Срабатывает до применения фильтра. |
afterFilter |
Срабатывает после применения фильтра. |
Доступность
Компонент «Фильтр» автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
- Элементы управления фильтром имеют
aria-selected
состояние.