在 UIKit 中按组重置过滤器

Question

能否请您告诉我是否有可能以某种方式仅为一组重置 UIKit 过滤器过滤器。例如，我有一组过滤器，我想单击“Dct”专门为数据颜色组重置过滤器，而不是大小。如果添加 uk-filter-control 参数并将其设为空，则所有元素都会重置，有没有办法做一些不同的事情

<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="#">Dct</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="#">Middle</a></li>
        <li uk-filter-control="filter: [data-size='large']; group: size"><a href="#">Big</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">El</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">El</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">El</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">El</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">El</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">El</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">El</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">El</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">El</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">El</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">El</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">El</div>
      </div>
    </li>
  </ul>

</div>

Answer 1

这是 UIkit Github 存储库中所需场景的示例。有两个按钮 - 一个用于过滤，一个用于重置列表。这些按钮还会切换彼此的可见性，因此用户一次只能看到一个按钮。

https://github.com/uikit/uikit-site/pull/173/files

相关代码如下。注意第二个最初隐藏的按钮，其中 uk-filter-control 设置为空白 filter 值 group: one; filter: .

<button uk-filter-control="group: one; filter: [data-meta~='one']"
        uk-toggle="target: .my-filter-control-one"
        class="my-filter-control-one uk-button">
    One
</button>               
<button uk-filter-control="group: one; filter: "
        uk-toggle="target: .my-filter-control-one"
        class="my-filter-control-one uk-button uk-button-primary"
        hidden>
    One
</button>

在 UIKit 中按组重置过滤器

Resetting the filter by group in UIKit

filter

uikit

getuikit