Tablette

Pavé numérique

nouveauClasses hb-keypad hb-key hb-key-muted hb-key-primary hb-key-wide hb-amount hb-amount--placeholder

Quand l'utiliser

Sur tablette, à chaque saisie numérique qui se fait debout : pesée, prix, quantité, PLU. Le clavier système est trop petit et cache l'écran. Sur poste, un champ numérique.

12,5kg

0,000kg

Code

<div class="hb-card hb-card-body hb-stack" style="max-width:320px">
  <div class="hb-amount">12,5<small>kg</small></div>
  <div class="hb-keypad">
    <button class="hb-key">7</button><button class="hb-key">8</button><button class="hb-key">9</button>
    <button class="hb-key">4</button><button class="hb-key">5</button><button class="hb-key">6</button>
    <button class="hb-key">1</button><button class="hb-key">2</button><button class="hb-key">3</button>
    <button class="hb-key hb-key-muted">C</button><button class="hb-key">,</button><button class="hb-key">0</button>
    <button class="hb-key hb-key-muted" aria-label="Effacer le dernier chiffre"><i class="material-icons">backspace</i></button><button class="hb-key hb-key-primary hb-key-wide" aria-label="Valider"><i class="material-icons">check</i></button>
  </div>
</div>
<div class="hb-amount hb-amount--placeholder" style="max-width:320px">0,000<small>kg</small></div>

Règles

Le montant (hb-amount) est en --text-number-xl, unité en petit ; vide, il montre « 0 » en placeholder.
La virgule est la touche décimale (clavier français) ; un seul séparateur accepté, trois décimales pour un poids, deux pour un prix.
La touche de validation est la seule en couleur métier ; « C » vide tout, la flèche efface un chiffre.
Pas de retour sonore ; l'enfoncement visuel (scale(.96)) suffit. Les touches ne sont jamais plus petites que 56 px en largeur.