Tab (widget)

In informatica un tab (o tab strip, striscia di tab) è un controllo grafico (widget) detto di navigazione che permette all'utente di muoversi da un gruppo di controlli (o documenti) a un altro.

I singoli tab (o panel o scheda o pannello), vengono rappresentati graficamente come dei rettangoli che contengono una breve descrizione. L'attivazione di un singolo tab (mediante il clic del mouse) rende visibili i contenuti ad esso associati e contemporaneamente viene in qualche modo evidenziata la sua attivazione. Può essere attivato un solo tab alla volta.

In alcune implementazioni i tab reagiscono ad altri eventi, come il passaggio o lo scroll del mouse, la tabulazione da tastiera.

Solitamente l'elenco dei singoli tab viene posto immediatamente sopra all'area soggetta alla navigazione in posizione orizzontale, ma non è difficile trovarli in basso o ai lati orientati verticalmente.

Utilizzo

I tab sono usati comunemente nelle finestre che prevedono una gran quantità di controlli grafici, come ad esempio i pannelli di «preferenze», per evitarne l'affollamento e rendere più facile l'interazione.

Confronto tra i tabs e gli altri metodi di navigazione web

Negli ultimi anni questo tipo di interfaccia è diventata molto popolare nei browser web col nome di scheda, pannello o segnalibro: introdotta per prima dal browser Opera e successivamente inserita da tutti gli altri principali browser, ha dato origine a quello che viene comunemente chiamato navigazione a schede.

Nel web

Esempio di menu a tab di una pagina web in HTML, CSS e Javascript:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial;}  .tab {   overflow: hidden;   border: 1px solid #ccc;   background-color: #f1f1f1; }  .tab button {   background-color: inherit;   float: left;   border: none;   outline: none;   cursor: pointer;   padding: 14px 16px;   transition: 0.3s;   font-size: 17px; } .tab button:hover {   background-color: #ddd; } .tab button.active {   background-color: #ccc; } .tabcontent {   display: none;   padding: 6px 12px;   border: 1px solid #ccc;   border-top: none; } </style> </head> <body>  <h2>Tabs</h2> <p>Clicca sui seguenti tab:</p>  <div class="tab">   <button class="tablinks" onclick="openCity(event, 'London')">Londra</button>   <button class="tablinks" onclick="openCity(event, 'Paris')">Parigi</button>   <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div>  <div id="London" class="tabcontent">   <h3>London</h3>   <p>London è la capitale dell'Inghilterra</p> </div>  <div id="Paris" class="tabcontent">   <h3>Parigi</h3>   <p>Parigi è la capitale della Francia</p>  </div>  <div id="Tokyo" class="tabcontent">   <h3>Tokyo</h3>   <p>Tokyo è la capitale del Giappone</p> </div>  <script> function openCity(evt, cityName) {   var i, tabcontent, tablinks;   tabcontent = document.getElementsByClassName("tabcontent");   for (i = 0; i < tabcontent.length; i++) {     tabcontent[i].style.display = "none";   }   tablinks = document.getElementsByClassName("tablinks");   for (i = 0; i < tablinks.length; i++) {     tablinks[i].className = tablinks[i].className.replace(" active", "");   }   document.getElementById(cityName).style.display = "block";   evt.currentTarget.className += " active"; } </script>     </body> </html>

Voci correlate

Altri progetti

Wikimedia Commons contiene immagini o altri file su tab

Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica