Thumbnav
Raccoglitore di miniature di immagini per facilitare la visualizzazione e la navigazione di contenuti multipli
ComponentiMetadati e link per approfondire
Quando usarlo
Il componente Thumbnav può essere utilizzato per fornire una navigazione rapida tra immagini in un formato compatto e visivamente interessante, come ad esempio tra le immagini di una galleria.
Come usarlo
- Scegli se mostrare le miniature delle immagini in un layout orizzontale o verticale, a seconda delle esigenze del design.
- Assicurati che ogni miniatura nel thumbnav sia facilmente cliccabile e che porti l'utente al contenuto o all'immagine corrispondente una volta selezionato.
- Il thumbnav dovrebbe essere posizionato in un luogo facilmente accessibile sulla pagina, in modo che gli utenti possano navigare rapidamente tra i contenuti.
Attenzione a
- Abilitare gli stati hover solamente per dispositivi con puntatore, come mouse o trackpad.
- Utilizzare una ombreggiatura sulle miniature in overlay per assicurare il giusto contrasto tra l’immagine di sfondo e le stesse.
Accessibilità
Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia
| Caratteristica | Stato | Descrizione |
|---|---|---|
Visivamente accessibile | Pronto | Uso e contrasto dei colori, leggibilità |
Amichevole con lettori di schermo | Pronto | Struttura titolazioni, etichette e testi alternativi |
Navigabile | Pronto | Focus, struttura, navigazione da tastiera o altri device |
Comprensibile | Pronto | Comprensibile, prevedibile, gestione semplice dell’errore |
Stato del componente
Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system
| Libreria | Stato componente | Link |
|---|---|---|
UI Kit Italia (design) | Non presente | KitUI Kit Italia su Figma (si apre in una nuova finestra) |
Bootstrap Italia | Pronto | Scheda documentazione (si apre in una nuova finestra) |
React | Pronto | Scheda Storybook (si apre in una nuova finestra) |
Angular | Non presente | Scheda documentazione (si apre in una nuova finestra) |
Anatomia
In stesura
Comportamento
- Se abilitato, lo stato hover evidenzia l’immagine su cui si sofferma il puntatore.
- Nel caso di utilizzo della variante overlay, l’immagine di sfondo cambia a seconda della miniatura cliccata.
Specifiche di design
In stesura
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici