Se vi dovesse servire di realizzare una tabbed View in una videata di un’applicazione web che non deve averla come contenitore principale non potete utilizzare gli oggetti IonTabs e IonTab.
Questi elementi si possono utilizzare solamente a livello di View e quindi non li posso utilizzare all’interno di altri elementi (come IonPage e IonContent).
Il layout da ottenere è quello riportato nell’immagine qui sotto nel riquadro evidenziato dal rettangolo rosso:
E quindi come possiamo fare?
La struttura da realizzare la vediamo nell’albero di progetto:
All’interno dell’elemento content abbiamo:
- cntOrders che è un Container con dentro il pannello idfPOrders,
questo elemento ha definita la proprietà CSS height : 60% - cntTabs che è un container con dentro tre elementi IonButton,
questo elemento non ha un altezza definita nelle proprietà CSS - altContainer che è un AltContainer con dentro tre Container,
questo elemento ha definita la proprietà CSS height : 35%
L’elemento altContainer contiene tre Container con ognuno un idfPanel che carica una diversa collection di documenti.
Per fare in modo che gli IonButton siano attaccati alla toolbar del pannello sottostante e diano l’effetto di essere delle linguette della tabbed View ho tolto loro il padding inferiore da CSS:
.btn-tab-selezionato
{
margin-bottom : 0;
background-color : var(--col-back-primary);
color : var(--col-fore-primary);
}
.btn-tab-non-selezionato
{
margin-bottom : 0;
background-color : var(--col-back-warning);
color : #000000;
}
Ho creato due classi CSS btn-tab-selezionato e btn-tab-non-selezionato da associare al bottone in base al relativo pannello visualizzato.
La variabile –col-back-primary indica il colore della toobar del pannello.
Al caricamento della view di dettaglio è visualizzato il primo pannello e associata la classe btn-tab-selezionato al primo bottone e bt-tab-non-selezionato agli altri due.
Poi in ogni evento onClick dei bottoni cambio la selectedPage dell’elemento altContainer con un codice di questo tipo:
$altContainer.selectedPage = 1;
$btnDett1.className = "btn-tab-non-selezionato";
$btnDett2.className = "btn-tab-selezionato";
$btnDett3.className = "btn-tab-non-selezionato";
È abbastanza chiaro o vi servono altre informazioni?