Framework7 - Schede

Descrizione

Le schede sono insiemi di contenuti raggruppati logicamente che ci consentono di spostarci rapidamente da uno all'altro e di risparmiare spazio come le fisarmoniche.

Layout a schede

Il codice seguente definisce il layout per le schede:

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

Dove -

  • <div class = "tabs">- È un wrapper obbligatorio per tutte le schede. Se ci manca questo, le schede non funzioneranno affatto.

  • <div class = "tab"> - È una singola scheda, che dovrebbe avere unique id attributo.

  • <div class = "tab active">- È una singola scheda attiva, che utilizza una classe attiva aggiuntiva per rendere la scheda visibile (attiva).

Passaggio da una scheda all'altra

È possibile utilizzare alcuni controller nel layout a schede, in modo che l'utente possa passare da uno all'altro.

Per questo, è necessario creare collegamenti (tag <a>) con la classe tab-link e l' attributo href uguale all'attributo id della scheda di destinazione -

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

Cambia più schede

Se si utilizza il collegamento a scheda singola per passare da una scheda all'altra, è possibile utilizzare le classi invece di utilizzare gli attributi di ID e scheda dati .

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

L' attributo data-tab di tab-link contiene il selettore CSS di schede / schede di destinazione.

Possiamo utilizzare diversi modi di schede, questi sono specificati nella tabella seguente:

S.No Tipi di schede e descrizione
1 Schede in linea

Le schede in linea sono gruppi di schede raggruppate in linea che consentono di spostarsi rapidamente tra di loro.
2 Cambia scheda dalla barra di navigazione

Possiamo posizionare delle schede nella barra di navigazione che ti consentono di spostarti tra di loro.
3 Cambia visualizzazioni dalla barra delle schede

La scheda singola può essere utilizzata per passare da una visualizzazione all'altra con la propria navigazione e layout.
4 Schede animate

È possibile utilizzare la transizione semplice (animazione) per cambiare scheda.
5 Schede a scorrimento

È possibile creare schede scorrevoli con una transizione semplice utilizzando la classe tabs-swipeable-wrap per le schede.
6 Schede Eventi JavaScript

Gli eventi JavaScript possono essere utilizzati quando si lavora con il codice JavaScript per le schede.
7 Mostra scheda utilizzando JavaScript

È possibile cambiare o visualizzare la scheda utilizzando i metodi JavaScript.