Componente

Bottom navigation

La barra di navigazione in fondo allo schermo delle app mobili: daisyUI dock con icona, etichetta, contatori e la voce corrente in colore primario.

Riferimento: <it-bottom-nav>
Classi: ita-bottom-navita-bottom-nav-staticita-indicator-countita-indicator-dot
Basato su (daisyUI): dockdock-mddock-activedock-labelindicatorindicator-itembadgestatus
Solo CSS: dock è fisso in fondo alla pagina e tiene conto della safe area di iOS (aggiungi viewport-fit=cover al meta viewport). La voce corrente usa sia dock-active sia aria-current="page". I contatori sono nascosti ai lettori di schermo e ripetuti come testo.
Storybook: Apri le storie di Bottom navigation

Esempio base

Mostrata sul posto; nella pagina reale è fissa in fondo.

Mostra il codice HTML

<div class="mx-auto max-w-sm overflow-hidden rounded-box border border-base-content/15">
  <div class="h-40 bg-base-200"></div>
  <nav class="dock dock-md ita-bottom-nav ita-bottom-nav-static" aria-label="Navigazione principale">
  <a href="#" class="dock-active" aria-current="page">
    <span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg></span>
    <span class="dock-label">Home</span>
  </a>
  <a href="#">
    <span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">3</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg></span>
    <span class="dock-label">Messaggi</span><span class="sr-only">, 3 messaggi non letti</span>
  </a>
  <a href="#">
    <span class="indicator"><span class="indicator-item ita-indicator-dot" aria-hidden="true"></span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M3,9h18v3H3V9 z M21,17.5c0,0.3-0.2,0.5-0.5,0.5h-17C3.2,18,3,17.8,3,17.5V13h18V17.5z M3,8V6.5C3,6.2,3.2,6,3.5,6h17C20.8,6,21,6.2,21,6.5V8H3z M8,15H4v-1h4V15z" /></svg></span>
    <span class="dock-label">Pagamenti</span><span class="sr-only">, avviso in scadenza</span>
  </a>
  <a href="#">
    <span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg></span>
    <span class="dock-label">Profilo</span>
  </a>
</nav>
</div>

Cinque voci e voce disabilitata

Mostra il codice HTML

<div class="mx-auto max-w-md overflow-hidden rounded-box border border-base-content/15">
  <nav class="dock dock-md ita-bottom-nav ita-bottom-nav-static" aria-label="Navigazione principale">
  <a href="#">
    <span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg></span>
    <span class="dock-label">Home</span>
  </a>
  <a href="#" class="dock-active" aria-current="page">
    <span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg></span>
    <span class="dock-label">Cerca</span>
  </a>
  <a href="#">
    <span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4,12c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0c-0.6,0-1-0.4-1-1s0.4-1,1-1c0.5-0.1,0.9,0.3,1,0.8C4,11.9,4,11.9,4,12z M3,4.5C2.5,4.4,2.1,4.8,2,5.3c0,0.1,0,0.1,0,0.2C1.9,6,2.3,6.4,2.8,6.5c0.1,0,0.1,0,0.2,0c0.5,0.1,0.9-0.3,1-0.8 c0-0.1,0-0.1,0-0.2c0.1-0.5-0.3-0.9-0.8-1C3.1,4.5,3.1,4.5,3,4.5z M3,17.5c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S3.6,17.5,3,17.5z M6,5v1h16V5H6z M6,12.5h16v-1H6V12.5z M6,19h16v-1H6V19z" /></svg></span>
    <span class="dock-label">Servizi</span>
  </a>
  <a href="#" aria-disabled="true" tabindex="-1">
    <span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.7,2H7.5C6.7,2,6,2.7,6,3.5V4H5.5C4.7,4,4,4.7,4,5.5v15C4,21.3,4.7,22,5.5,22h11c0.8,0,1.5-0.7,1.5-1.5V20h0.5 c0.8,0,1.5-0.7,1.5-1.5V6.3L15.7,2z M16,3.7L18.3,6h-1.8C16.2,6,16,5.8,16,5.5V3.7z M17,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C5.2,21,5,20.8,5,20.5v-15C5,5.2,5.2,5,5.5,5H6v13.5C6,19.3,6.7,20,7.5,20H17V20.5z M18.5,19h-11C7.2,19,7,18.8,7,18.5v-15 C7,3.2,7.2,3,7.5,3H15v2.5C15,6.3,15.7,7,16.5,7H19v11.5C19,18.8,18.8,19,18.5,19z M9,9h8v1H9V9z M9,11h8v1H9V11z M9,13h4v1H9V13z" /></svg></span>
    <span class="dock-label">Documenti</span>
  </a>
  <a href="#">
    <span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">1</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,7.5c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5s4.5-2,4.5-4.5S14.5,7.5,12,7.5z M12,15.5c-1.9,0-3.5-1.6-3.5-3.5 s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S13.9,15.5,12,15.5z M21.8,13.9c0.1-0.6,0.2-1.3,0.2-1.9c0-0.6-0.1-1.3-0.2-1.9l-2.1-0.3 c-0.2-0.6-0.4-1.2-0.7-1.7l1.3-1.7c-0.7-1.1-1.6-2-2.7-2.7L15.9,5l-1.7-0.7l-0.3-2.1L12,2l-1.9,0.2L9.8,4.3L8.1,5L6.4,3.7 c-1.1,0.7-2,1.6-2.7,2.7L5,8.1C4.7,8.6,4.5,9.2,4.3,9.8l-2.1,0.3C2.1,10.7,2,11.4,2,12c0,0.6,0.1,1.3,0.2,1.9l2.1,0.3 c0.2,0.6,0.4,1.2,0.7,1.7l-1.3,1.7c0.7,1.1,1.6,2,2.7,2.7L8.1,19l1.7,0.7l0.3,2.1L12,22l1.9-0.2l0.3-2.1l1.7-0.7l1.7,1.3 c1.1-0.7,2-1.6,2.7-2.7L19,15.9c0.3-0.5,0.5-1.1,0.7-1.7L21.8,13.9z M18.9,13.2l-0.2,0.7c-0.1,0.5-0.3,1-0.6,1.5L17.8,16l0.4,0.5 l0.8,1.1c-0.4,0.5-0.9,1-1.4,1.4l-1.1-0.8L16,17.8l-0.6,0.3c-0.5,0.3-1,0.5-1.5,0.6l-0.7,0.2v0.7L13,20.9h-2l-0.2-1.3v-0.7 l-0.7-0.2c-0.5-0.1-1-0.3-1.5-0.6L8,17.8l-0.5,0.4L6.4,19c-0.5-0.4-1-0.9-1.4-1.4l0.8-1.1L6.2,16l-0.3-0.6c-0.3-0.5-0.5-1-0.6-1.5 l-0.2-0.7H4.4L3.1,13C3,12.7,3,12.3,3,12c0-0.3,0-0.7,0.1-1l1.3-0.2h0.7l0.2-0.7c0.1-0.5,0.3-1,0.6-1.5L6.2,8L5.8,7.5L5,6.4L6.4,5 l1.1,0.8L8,6.2l0.6-0.3c0.5-0.3,1-0.5,1.5-0.6l0.7-0.2V4.4L11,3.1h2l0.2,1.3v0.7l0.7,0.2c0.5,0.1,1,0.3,1.5,0.6L16,6.2l0.5-0.4 L17.6,5c0.5,0.4,1,0.9,1.4,1.4l-0.8,1.1L17.8,8l0.3,0.6c0.3,0.5,0.5,1,0.6,1.5l0.2,0.7h0.7l1.3,0.2c0.1,0.3,0.1,0.7,0.1,1 c0,0.3,0,0.7-0.1,1l-1.3,0.2H18.9z" /></svg></span>
    <span class="dock-label">Impostazioni</span><span class="sr-only">, 1 aggiornamento</span>
  </a>
</nav>
</div>

Su sfondo primario

Il contenitore ha la classe it-surface-primary: i token si scambiano (base diventa primary, primary diventa primary-content) e il componente si adatta senza opzioni.

Mostra il codice HTML

<div class="it-surface-primary mx-auto max-w-sm overflow-hidden rounded-box">
  <div class="h-24 bg-base-200"></div>
  <nav class="dock dock-md ita-bottom-nav ita-bottom-nav-static" aria-label="Navigazione principale">
  <a href="#" class="dock-active" aria-current="page">
    <span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3,21h18v1H3V21z M3,20h18v-1H3V20z M22,9H2l10-7L22,9z M5.2,8h13.6L12,3.2L5.2,8z M6,18v-8H5v8H6z M10,18v-8H9v8H10z M15,18v-8h-1v8H15z M19,18v-8h-1v8H19z" /></svg></span>
    <span class="dock-label">Home</span>
  </a>
  <a href="#">
    <span class="indicator"><span class="indicator-item ita-indicator-count" aria-hidden="true">3</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg></span>
    <span class="dock-label">Messaggi</span><span class="sr-only">, 3 messaggi non letti</span>
  </a>
  <a href="#">
    <span class="indicator"><span class="indicator-item ita-indicator-dot" aria-hidden="true"></span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M3,9h18v3H3V9 z M21,17.5c0,0.3-0.2,0.5-0.5,0.5h-17C3.2,18,3,17.8,3,17.5V13h18V17.5z M3,8V6.5C3,6.2,3.2,6,3.5,6h17C20.8,6,21,6.2,21,6.5V8H3z M8,15H4v-1h4V15z" /></svg></span>
    <span class="dock-label">Pagamenti</span><span class="sr-only">, avviso in scadenza</span>
  </a>
  <a href="#">
    <span class="indicator"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg></span>
    <span class="dock-label">Profilo</span>
  </a>
</nav>
</div>