En aquest tema, aprendrem a crear i utilitzar pestanyes (tabs) i menús laterals (side menus) en una aplicació Ionic. Aquests components són fonamentals per a la navegació i l'organització del contingut en aplicacions mòbils.

Les pestanyes són una manera popular de navegar entre diferents seccions d'una aplicació. Cada pestanya representa una pàgina diferent i permet als usuaris canviar fàcilment entre elles.

Per crear una aplicació amb pestanyes, podem utilitzar el generador de plantilles d'Ionic. Executa la següent comanda per crear una nova aplicació amb pestanyes:

Aquesta comanda crearà una nova aplicació amb una estructura de pestanyes predefinida.

L'estructura de les pestanyes es defineix en el fitxer src/app/tabs/tabs.page.html. Aquí tens un exemple de com es veu:

Cada pestanya està associada a una pàgina diferent. La navegació entre pestanyes es gestiona automàticament per Ionic. Aquí tens un exemple de com es defineixen les rutes per a les pestanyes en el fitxer src/app/tabs/tabs-routing.module.ts:

Els menús laterals són una altra manera popular de navegar en aplicacions mòbils. Permeten als usuaris accedir a diferents seccions de l'aplicació des d'un menú que es pot obrir des del costat de la pantalla.

Per crear un menú lateral, podem utilitzar el component ion-menu. Aquí tens un exemple de com es veu:

El menú lateral es pot configurar per aparèixer a la dreta o a l'esquerra de la pantalla utilitzant l'atribut side. També podem definir diferents menús per a diferents seccions de l'aplicació.

La navegació amb menús laterals es gestiona utilitzant el component ion-router-outlet. Aquí tens un exemple de com es defineixen les rutes per a un menú lateral en el fitxer src/app/app-routing.module.ts:

Crea una aplicació Ionic amb pestanyes i un menú lateral. Les pestanyes han de contenir tres pàgines diferents, i el menú lateral ha de permetre navegar a una pàgina de configuració.

1. Crea una nova aplicació amb pestanyes:

   ionic start myApp tabs
   

2. Afegeix un menú lateral al fitxer src/app/app.component.html:

   <ion-menu side="start" menuId="first" contentId="main-content">
     <ion-header>
       <ion-toolbar>
         <ion-title>Menu</ion-title>
       </ion-toolbar>
     </ion-header>
   
     <ion-content>
       <ion-list>
         <ion-item routerLink="/tabs/tab1">Tab 1</ion-item>
         <ion-item routerLink="/tabs/tab2">Tab 2</ion-item>
         <ion-item routerLink="/tabs/tab3">Tab 3</ion-item>
         <ion-item routerLink="/settings">Settings</ion-item>
       </ion-list>
     </ion-content>
   </ion-menu>
   
   <ion-router-outlet id="main-content"></ion-router-outlet>
   

3. Defineix les rutes per al menú lateral en el fitxer src/app/app-routing.module.ts:

   const routes: Routes = [
     {
       path: 'tabs',
       component: TabsPage,
       children: [
         {
           path: 'tab1',
           loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
         },
         {
           path: 'tab2',
           loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
         },
         {
           path: 'tab3',
           loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
         },
         {
           path: '',
           redirectTo: '/tabs/tab1',
           pathMatch: 'full'
         }
       ]
     },
     {
       path: 'settings',
       loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule)
     },
     {
       path: '',
       redirectTo: '/tabs/tab1',
       pathMatch: 'full'
     }
   ];
   

La solució completa hauria de tenir una aplicació amb tres pestanyes i un menú lateral que permeti navegar a una pàgina de configuració.

En aquest tema, hem après a crear i utilitzar pestanyes i menús laterals en una aplicació Ionic. Les pestanyes permeten una navegació fàcil entre diferents seccions de l'aplicació, mentre que els menús laterals proporcionen una manera convenient d'accedir a altres pàgines. Hem vist com configurar aquests components i com gestionar la navegació entre ells. A més, hem realitzat un exercici pràctic per reforçar els conceptes apresos.