enhancement request on cards layout

[viseth]

Hi @zzseba78,

Thanks for keeping updated with the Ulkit version. It would be a nice feature to have the cards filter with a list of pattern or tags. Currently only one seems to be possible.

Something like below, which would filter out the music cards and the photography cards.

how does it sounds ?

Thanks,

Regards,

Viseth

[PaulFelge]

You can use the group function and use it like this for example (this would also work to filter by text and by pills/tags): filter: []; group:

cards.js

so for the text you need to adjust the cards.js:

UIkit.util.on(search, 'keyup', function() {
    clearTimeout(debounce);
    debounce = setTimeout(function() {
        var value = search.value;
        var finalValue = value.toLowerCase();
        var searchTerm = '';

        if (value.length) searchTerm = 'filter: [data-tags*="' + finalValue + '" i]; group: text';
        UIkit.util.attr(searchVal, 'uk-filter-control', searchTerm);
        searchVal.click();
    }, 300);
});

the "i" in the data attribute selector helps with being not case-sensitive and you could get rid of the value.toLowerCase(); if (value.length) searchTerm = 'filter: [data-tags*="' + finalValue + '" i]; group: text';

cards.html

<ul class="uk-subnav uk-subnav-pill">
 <li class="uk-active" data-uk-filter-control><a href="#">Show All</a></li>
 <li uk-filter-control="filter: .nature-card; group: nature"><a href="#">Nature</a></li>
 <li uk-filter-control="filter:.music-card; group: music"><a href="#">Music</a></li>
 <li uk-filter-control="filter:.photo-card; group: photo"><a href="#">Photography</a></li>
 <li uk-filter-control="filter:.design-card; group: design"><a href="#">Design</a></li>
</ul>

If you want I can make a branch to demonstrate it. Also at the moment you can search only for text that is in the exact order, I found a way to tackle this as well.

[viseth]

Hi @PaulFelge,

Thanks for the reply, how do you handle the tag split caracter in your case ? For example : music, photography ? Indeed the search value is a input field, so the search.value is a string.