如何使用Uikit创建多个过滤器？

Question

请问如何使用Uikit创建一个过滤器，该过滤器可以同时过滤多个项目，而又不排除其他项目。

我的意思是，我正在创建一个游戏列表，我需要当人们选择PS4然后选择ADVENTURE时，我希望PS4过滤器继续运行，而现在仅出现PS4冒险游戏。

<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-game='adventure']"><a href="#">White</a></li>
            <li uk-filter-control="[data-console='ps4']"><a href="#">Blue</a></li>
        </ul>
    </div>
    <div>


    </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 data-game="xbox" >
            <canvas width="600" height="800"></canvas>
            <div class="uk-position-center">Item</div>
        </div>
    </li>
    <li data-game="adventure">
        <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-game="adventure" data-console="ps4">
        <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>
</ul>

可以帮忙吗？谢谢

Answer 1

像这样简单地使用组

Number

如果您为此使用php，则可以执行一些foreach循环

<li uk-filter-control="filter: .thing;group: 1" id="tagy" class=""><a href="#">thing</a></li>

这真的很好，您可以选择多个标签，但是不要忘记添加清除按钮，就像这样

$num = 1;
        foreach(array_unique($alltags) as $key => $tag) {
            echo"<li uk-filter-control='filter: .$tag;group: $num'><a href='#'>$tag</a></li>";
            $num++;
        }