Filter
按元数据对任意布局中的条目进行过滤或排序。
Filter 组件常与栅格组件（尤其是瀑布流栅格）配合使用，但并不局限于它。无论条目如何定位，任何布局都可以被过滤或排序。在不同过滤与排序状态之间切换时，条目会以平滑过渡淡入淡出并移动。
用法
要应用该组件，需要一个带 uk-filter="target: SELECTOR" 属性的容器元素。在该容器内创建一个过滤控件列表，以及要过滤的布局条目。使用 target: SELECTOR 选项选中包含布局条目的元素。
<div uk-filter="target: .js-filter">
<!-- Filter controls -->
<ul>
<li><a href="#"></a></li>
</ul>
<!-- Layout items -->
<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>-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
<div uk-filter="target: .js-filter">
<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-white">
<div class="uk-card uk-card-default 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>
<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-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>
</ul>
</div>
Filter 组件不带样式，因此你可以使用其他任意 UIkit 组件来创建过滤控件和布局条目。例如，可以用导航、子导航和选项卡组件来设置过滤控件的样式。条目布局通常使用栅格组件来创建。
动画
默认情况下，条目在不同过滤状态之间切换时使用 slide 动画。要应用其他动画，只需为属性添加 animation 选项。
| Animation | 描述 |
|---|---|
slide |
让条目淡出淡入，或滑动到新位置。 |
fade |
让所有条目淡出淡入。 |
delayed-fade |
让条目以略微延迟的方式淡出淡入。 |
<div uk-filter="animation: fade">…</div>-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
<div uk-filter="target: .js-filter; animation: 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-white">
<div class="uk-card uk-card-default 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>
<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-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>
</ul>
</div>激活状态
为某个过滤控件添加 .uk-active 类，该过滤条件会在初始化时被应用。
<li class="uk-active" uk-filter-control="[data-color='blue']">…</li>-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
<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="#">White</a></li>
<li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
<li uk-filter-control="[data-color='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 data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
</ul>
</div>重置过滤
要重置过滤并选中所有条目，请使用不带任何选择器的 uk-filter-control 属性。
<li uk-filter-control>…</li>-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
<div uk-filter="target: .js-filter">
<ul class="uk-subnav uk-subnav-pill">
<li class="uk-active" uk-filter-control><a href="#">All</a></li>
<li uk-filter-control="[data-color='white']"><a href="#">White</a></li>
<li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
<li uk-filter-control="[data-color='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 data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-color="blue">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-color="black">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
</ul>
</div>元数据
条目可以带有不同的元数据用于过滤。你只需定义 HTML 类或 data 属性，并为过滤控件创建对应的 CSS 选择器。这个示例使用 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>-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
<div uk-filter="target: .js-filter">
<ul class="uk-subnav uk-subnav-pill">
<li uk-filter-control="[data-tags*='white']"><a href="#">White</a></li>
<li uk-filter-control="[data-tags*='blue']"><a href="#">Blue</a></li>
<li uk-filter-control="[data-tags*='black']"><a href="#">Black</a></li>
<li uk-filter-control="[data-tags*='dark']"><a href="#">Dark Colors</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">Item</div>
</li>
<li data-tags="blue dark">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-tags="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-tags="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-tags="black dark">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-tags="black dark">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-tags="blue dark">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-tags="black dark">
<div class="uk-card uk-card-secondary uk-card-body">Item</div>
</li>
<li data-tags="blue dark">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-tags="white">
<div class="uk-card uk-card-default uk-card-body">Item</div>
</li>
<li data-tags="blue dark">
<div class="uk-card uk-card-primary uk-card-body">Item</div>
</li>
<li data-tags="black dark">
<div class="uk-card uk-card-secondary uk-card-body">Item</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>-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
<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="#">All</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[data-color='white']"><a href="#">White</a></li>
<li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
<li uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[data-size='small']"><a href="#">Small</a></li>
<li uk-filter-control="[data-size='medium']"><a href="#">Medium</a></li>
<li uk-filter-control="[data-size='large']"><a href="#">Large</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</div>
</div>
</li>
</ul>
</div>分组
要同时按多个条件过滤条目，需要把过滤控件分组。只需为 uk-filter-control 属性添加 group: NAME 选项，并为元数据定义组名。
<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>-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
-
Item
<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="#">All</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="#">White</a></li>
<li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Blue</a></li>
<li uk-filter-control="filter: [data-color='black']; group: data-color"><a href="#">Black</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="#">Small</a></li>
<li uk-filter-control="filter: [data-size='medium']; group: size"><a href="#">Medium</a></li>
<li uk-filter-control="filter: [data-size='large']; group: size"><a href="#">Large</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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">Item</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>-
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="#">Ascending</a></li>
<li uk-filter-control="sort: data-date; order: desc"><a href="#">Descending</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>瀑布流栅格
过滤器常被应用于瀑布流栅格。无论条目如何定位，过滤过渡都能与任何布局完美配合。它甚至可以与栅格的视差选项一起使用。
下面是一个使用瀑布流栅格的完整示例：
<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="#">White</a></li>
<li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
<li uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[data-size='small']"><a href="#">Small</a></li>
<li uk-filter-control="[data-size='medium']"><a href="#">Medium</a></li>
<li uk-filter-control="[data-size='large']"><a href="#">Large</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="Sort ascending"></a></span>
<span uk-filter-control="sort: data-name; order: desc"><a class="uk-icon-link" href="#" uk-icon="icon: arrow-up" aria-label="Sort descending"></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 | 要应用过滤的目标列表。 | |
selActive |
String, Boolean | false |
用于指定初始激活过滤控件的选择器。 |
animation |
String, Boolean | slide |
动画模式（slide、fade、delayed-fade 或 false）。 |
duration |
Number | 250 |
动画持续时间，单位为毫秒。 |
target 是_主要_选项，如果它是属性值中唯一的选项，其键名可以省略。
JavaScript
了解更多关于 JavaScript 组件的信息。
初始化
UIkit.filter(element, options);事件
以下事件会在添加了该组件的元素上触发：
| 名称 | 描述 |
|---|---|
beforeFilter |
在应用过滤之前触发。 |
afterFilter |
在应用过滤之后触发。 |
可访问性
Filter 组件会自动设置合适的 WAI-ARIA 角色、状态和属性。
- 过滤控件具有
aria-selected状态。