Formulaires

Filtres

stableClasses hb-filters hb-filter-grid hb-filter-grid__actions hb-chip-toggleVuetify 2 v-text-field + v-select dans hb-filters (largeur 220 px chacun)Vuetify 3 idem

Deux dispositions

hb-filters : une ligne qui passe à la ligne, pour deux à quatre filtres ; les v-input y font 220 px.
hb-filter-grid : une grille de 200 px minimum par filtre, pour cinq et plus ; hb-filter-grid__actions groupe les boutons en bout.

312 produits · 2 filtres

Code

<div class="hb-card hb-card-body hb-stack">
  <div class="hb-filters">
    <div class="hb-prefix has-clear" style="width:260px"><i class="material-icons">search</i><input class="hb-field" placeholder="Produit, PLU, EAN"><button class="hb-btn hb-btn-icon hb-clear" aria-label="Effacer"><i class="material-icons">close</i></button></div>
    <div class="hb-select" style="width:200px"><select class="hb-field" aria-label="Fournisseur"><option>Tous les fournisseurs</option><option>Pomona</option></select></div>
    <button class="hb-chip hb-chip-toggle" aria-pressed="true"><i class="material-icons">warning</i>À vérifier</button>
    <button class="hb-chip hb-chip-toggle" aria-pressed="false"><i class="material-icons">inventory_2</i>Archivées</button>
    <span class="hb-small" style="margin-left:auto">312 produits · 2 filtres</span>
  </div>
</div>

Règles

La recherche est toujours première et filtre à la frappe ; les autres filtres s'appliquent immédiatement, sans bouton « Filtrer ».
Un filtre actif se voit : puce pressée, sélecteur avec valeur ; le compte des résultats est affiché. Un bouton « Réinitialiser » apparaît dès qu'un filtre est actif.
Pas plus de six filtres visibles ; au-delà, les secondaires vont dans un panneau latéral « Plus de filtres ».