按元数据筛选或排序任何给定布局中的项目。
T过滤组件通常与网格(Grid)组件一起配合使用,尤其是与瀑布流网格一起使用,但是并不仅限于此。无论项目如何布局,都可以使用过滤组件来过滤或排序。项目在不同的过滤和排序状态之间,将会平滑的淡入淡出和移动转换。
要使用这个组件,需要先建立一个属性为 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>
<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组件来创建过滤器控件和布局项目。 例如Nav,Subnav和Tab都可用于设置过滤器控件的样式。 Grid 组件通常用于创建项目布局。
过滤器对不同过滤状态之间的项目切换默认使用slide
动画。要应用其他动画,只需将animation
选项添加到uk-filter属性内并指定你要应用的动画。
动画方式 | 描述 |
---|---|
slide |
淡入淡出项目并将其滑动到新位置。 |
fade |
淡入和淡出所有项目。 |
delayed-fade |
淡入淡出的项目并带有延迟效果。 |
<div uk-filter="animation: fade">...</div>
<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>
<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>
<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>
<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>
<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>
要同时通过多个条件过滤项目,需要对筛选控件分组。 只需将group: NAME
选项添加到uk-filter-control
属性并为元数据定义组名即可。
<div uk-filter="target: .js-filter">
<ul>
<li uk-filter-control="filter: [data-color='blue']; group: color"><a href="#"></a></li>
<li uk-filter-control="filter: [data-color='white']; group: color"><a href="#"></a></li>
</ul>
<ul>
<li uk-filter-control="filter: [data-size='small']; group: size"><a href="#"></a></li>
<li uk-filter-control="filter: [data-size='large']; group: size"><a href="#"></a></li>
</ul>
<ul class="js-filter">
<li data-color="blue" data-size="small"></li>
</ul>
</div>
<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>
<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"></a></span>
<span uk-filter-control="sort: data-name; order: desc"><a class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></span>
</div>
</div>
<ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">
<li data-color="white" data-size="large" data-name="A">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">A</div>
</div>
</li>
<li data-color="blue" data-size="small" data-name="B">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">B</div>
</div>
</li>
<li data-color="white" data-size="medium" data-name="C">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">C</div>
</div>
</li>
<li data-color="white" data-size="small" data-name="D">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">D</div>
</div>
</li>
<li data-color="black" data-size="medium" data-name="E">
<div class="uk-card uk-card-secondary uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">E</div>
</div>
</li>
<li data-color="black" data-size="small" data-name="F">
<div class="uk-card uk-card-secondary uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">F</div>
</div>
</li>
<li data-color="blue" data-size="medium" data-name="G">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">G</div>
</div>
</li>
<li data-color="black" data-size="large" data-name="H">
<div class="uk-card uk-card-secondary uk-card-body">
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">H</div>
</div>
</li>
<li data-color="blue" data-size="large" data-name="I">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">I</div>
</div>
</li>
<li data-color="white" data-size="large" data-name="J">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">J</div>
</div>
</li>
<li data-color="blue" data-size="medium" data-name="K">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">K</div>
</div>
</li>
<li data-color="black" data-size="small" data-name="L">
<div class="uk-card uk-card-secondary uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">L</div>
</div>
</li>
</ul>
</div>
下面这些选项中的任何一个都可以应用于组件属性。多个参数之间用分号分隔。了解更多
选项 | 值 | 默认值 | 描述 |
---|---|---|---|
target |
String | '' | 要将过滤器应用到的目标列表。 |
selActive |
String, Boolean | false | 最初处于活动状态的过滤器控件的选择器。 |
animation |
String, Boolean | 'slide' | 动画模式:slide ,fade ,delayed-fade 或false 。 |
duration |
数字 | 250 | 动画持续时间(单位为毫秒)。 |
target
是 Primary 选项,如果它是属性中的唯一选项,则可以省略其值。
了解有关JavaScript 组件的更多信息。
UIkit.filter(element, options);
将在附加了此组件的元素上触发以下事件:
Name | Description |
---|---|
beforeFilter |
应用过滤器之前触发。 |
afterFilter |
应用过滤器之后触发。 |