过滤／Filter

# 过滤／Filter

<p class="uk-text-lead">按元数据筛选或排序任何给定布局中的项目。</p>

过滤组件通常与 [Grid 组件](grid.md)一起配合使用，尤其是与瀑布流网格一起使用，但是并不仅限于此。无论项目如何布局，都可以使用过滤组件来过滤或排序。项目在不同的过滤和排序状态之间，将会平滑的淡入淡出和移动转换。

***

## Usage-用法

要使用这个组件，需要先建立一个属性为 `uk-filter="target: SELECTOR"` 的容器，在这个容器中，创建一个筛选控件列表以及要筛选的布局项目。使用 `target: SELECTOR` 选项来选择包含布局项的元素。如下方的代码示例：

```html
<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类或为布局项定义的属性。

```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"`。

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

```example
<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](nav.md), [Subnav](subnav.md) 和 [Tab](tab.md) 组件都可用于设置过滤器控件的样式。 [Grid 组件](grid.md) 通常用于创建项目布局。
***

## Animations-动画

默认情况下，过滤器对不同过滤状态之间的项目使用 `slide` 动画。 要应用不同的动画，只需将 `animation` 选项添加到属性。

| 动画方式      | 描述                                                |
| :------------- | :--------------------------------------------------------- |
| `slide`        | 淡入淡出项目并将其滑动到新位置。 |
| `fade`         | 淡入和淡出所有项目。 |
| `delayed-fade` | 淡入淡出的项目并带有延迟效果。 |

```html
<div uk-filter="animation: fade">...</div>
```

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

***

## Active state-活动状态

将 `.uk-active` class添加到筛选器控件，筛选器将首先应用。

```html
<li class="uk-active" uk-filter-control="[data-color='blue']">...</li>
```

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

***

## Reset filter-复位筛选状态

要重置过滤器并定位所有项目，请使用不带任何指定选择器的 `uk-filter-control` 属性。

```html
<li uk-filter-control>...</li>
```

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

***

## Meta Data-元数据

项目可以具有不同的元数据以进行过滤。 您只需要定义HTML类或 `data` 属性，并为过滤器控件创建相应的CSS选择器即可。 下面的示例使用筛选器的 `data` 属性而不是HTML类。

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

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

***

## Multiple Filters-多重筛选器

定义不同类型的元数据并添加任意数量的控件来筛选它们。 筛选控件是互斥的，这意味着每次只能筛选一个条件。

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

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

***

## Groups-分组

要同时通过多个条件过滤项目，需要对筛选控件分组。 只需将 `group: NAME` 选项添加到 `uk-filter-control` 属性并为元数据定义组名即可。

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

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

***

## Sorting-排序

要按字母顺序对项目进行排序，只需在 `uk-filter-control` 中添加 `sort: ATTRIBUTE` 选项并定义用于对项目进行排序的元数据属性。 默认情况下，项目按升序排序。 添加 `order: desc` 可以对项目按降序排序。

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

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

***

## Masonry Grid-瀑布流网格

过滤器经常被用于 网格[Masonry 瀑布流](grid.md#masonry) 。 不论项目如何放置，过滤器转换都可以完美地与任何类型的布局一起使用。 它甚至可以与 网格 [Parallax 视差](grid.md#parallax) 选项一起使用。

下面是瀑布流网格的综合示例:

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

***

## Component options-组件选项

下面这些选项中的任何一个都可以应用于组件属性。多个参数之间用分号分隔。 [了解更多](javascript.md#component-configuration)

| 选项      | 可用值           | 默认值 | 描述                                          |
|:------------|:----------------|:--------|:-----------------------------------------------------|
| `target`    | String          | ''      | 要将过滤器应用到的目标列表。   |
| `selActive` | String, Boolean | false   | 初时激活动过滤器的控件器的选择器。 |
| `animation` | String, Boolean | 'slide' | 动画模式: `slide`, `fade`, `delayed-fade` 或 `false`.                        |
| `duration`  | Number          | 250     | 动画持续时间（单位为毫秒）                  |

`target` 是 _Primary_ 选项，如果它是属性值中的唯一选项，则可以省略其键。

***

## JavaScript

了解有关 [JavaScript 组件](javascript.md#programmatic-use)的更多信息。

### Initialization／初始化

```js
UIkit.filter(element, options);
```

### Events／事件

将在附加了此组件的元素上触发以下事件：

| Name           | 描述                              |
|:---------------|:-----------------------------------------|
| `beforeFilter` | 应用过滤器之前触发。      |
| `afterFilter`  | 应用过滤器之后触发。 |