2017-05-09 1 views
-3

Je souhaite utiliser une disposition d'onglets dans mon framework ionique, j'ai donc commencé à le faire. Par défaut, il me fournit 3 onglets, mais maintenant je veux ajouter plus d'onglets.Ajout de nouveaux onglets dans un cadre ionique

Je l'ai fait en apportant des modifications dans le dossier onglets et le fichier "tab.html". Maintenant, je veux faire le codage des nouvelles pages à onglet que je viens d'ajouter dans "tabs.html". Donc, pour cela, j'ai créé de nouveaux dossiers des nouveaux onglets dans le dossier des pages. Maintenant, je veux coder les nouveaux onglets que j'ai ajoutés.

Ma question est de savoir comment faire. J'ai essayé en faisant un nouveau fichier html dans le dossier de cette page. Mais cela m'a donné une erreur ..

S'il vous plaît me suggérer la solution car je suis très nouveau dans le cadre ionique.

+0

Quel était le message d'erreur? Aussi, pouvez-vous montrer du code (pour mieux voir ce que vous avez essayé)? –

+0

vithika

+0

ci-dessus est le code de mon fichier tabs.html.Maintenant fr je veux ajouter un nouveau dossier pour les nouveaux onglets, comment dois-je faire ça ?? et quelle est la signification de vithika

Répondre

0

Selon le Ionic docs, la façon de créer un nouvel onglet est:

1) Ajout de la balise <ion-tab> au code HTML. Par exemple:

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Tab 1"></ion-tab> 
    //... 
    <ion-tab [root]="myTabRoot" tabTitle="myTitle"></ion-tab> 
</ion-tabs> 

2) Créez la nouvelle page racine comme vous le feriez pour toute nouvelle page. Par exemple:

export class myRootPage { 
    constructor() { 
    } 
} 

3) Affectez l'attribut de page racine à la page racine elle-même dans le module Tabs. Par exemple:

export class Tabs { 
    myTabRoot = myRootPage; 
    constructor() { 
    } 
} 

Notez que vous devez importer votre page racine onglet dans le module onglets (en utilisant la commande import{}). En ce qui concerne la façon de créer une nouvelle page, je suppose que vous connaissez déjà toutes les étapes - si vous ne le faites pas, il existe de nombreux tutoriels en ligne qui devraient vous aider.

+0

Où dois-je coder pour la deuxième étape, quel fichier?export classe myRootPage { constructor() { } } – vithika

+0

Vous devez créer un nouveau fichier TypeScript (.ts). En utilisant myRootPage comme exemple, vous créez un fichier "my-root-page.ts" et ensuite vous y mettez le code myRootPage. Bien sûr, vous devez également importer les composants ioniques et angulaires appropriés pour que cela fonctionne - si vous le souhaitez, vous pouvez copier l'un des fichiers existants pour les pages racines de l'autre onglet et modifier son titre (et son contenu). C'est plus facile que de créer une page à partir de rien. –

+1

Je suis capable de créer de nouveaux onglets. Merci beaucoup.il a résolu mon problème – vithika

0

J'ai fait référence à ionicframwork.docs//intro/tutorial/project-structure/ Ce tutoriel explique entièrement la structure ionique et est très utile au débutant comme moi. Il explique comment ajouter de nouveaux onglets à votre application.