# filter

The markup of every demo on <https://kuiper.oeds.it/filter/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`.

```html
<div data-filter="target: .js-filter">
 <div class="grid-4xs" data-grid><div class="width-auto"><button class="button button-s button-primary button-outline active" data-filter-control>all</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-color='red']; group: color">red</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-color='blue']; group: color">blue</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-color='green']; group: color">green</button></div></div>
 <div class="grid-4xs" data-grid><div class="width-auto"><button class="button button-s button-primary button-outline active" data-filter-control>all</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-size='s']; group: size">s</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-size='m']; group: size">m</button></div></div>
 <div class="js-filter grid-xs margin-xs" data-grid><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="red" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">red s</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="blue" data-size="m"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">blue m</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="green" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">green s</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="red" data-size="m"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">red m</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="blue" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">blue s</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="green" data-size="m"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">green m</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="red" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">red s</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="blue" data-size="m"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">blue m</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="green" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">green s</p></div></div></div>
</div>
```

## animation fade

Varies: the `grid-*` ladder over 2 rungs, `4xs` to `xs`.

```html
<div data-filter="target: .js-filter; animation: fade">
 <div class="grid-4xs" data-grid><div class="width-auto"><button class="button button-s button-primary button-outline active" data-filter-control>all</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-color='red']; group: color">red</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-color='blue']; group: color">blue</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-color='green']; group: color">green</button></div></div>
 <div class="grid-4xs" data-grid><div class="width-auto"><button class="button button-s button-primary button-outline active" data-filter-control>all</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-size='s']; group: size">s</button></div><div class="width-auto"><button class="button button-s button-primary button-outline" data-filter-control="filter: [data-size='m']; group: size">m</button></div></div>
 <div class="js-filter grid-xs margin-xs" data-grid><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="red" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">red s</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="blue" data-size="m"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">blue m</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="green" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">green s</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="red" data-size="m"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">red m</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="blue" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">blue s</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="green" data-size="m"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">green m</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="red" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">red s</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="blue" data-size="m"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">blue m</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-3@l width-1-4@xl" data-color="green" data-size="s"><div class="card background-white-dark padding-4xs text-center"><p class="background-muted">green s</p></div></div></div>
</div>
```
