1
votes

Onglets Ionic 4 déroulants

Je suis nouveau sur Ionic 4 et je souhaite créer des onglets déroulants dans Ionic4. Mais lorsque j'ajoute plusieurs onglets comme indiqué ci-dessous le code, ils rétrécissent et sont visibles sur le même espace de vue.

<ion-tab-bar slot="top">
    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>
</ion-tab-bar>

Voici à quoi ressemble le code ci-dessus

Veuillez aider. p >

angular css ionic-framework ionic4

2 commentaires

Ces onglets correspondent à ce pour quoi ils sont conçus. Vous devrez pirater le CSS vous-même pour ce faire, auquel cas il vaut mieux utiliser simplement des boutons d'icônes et une zone de défilement.

merci @ Diodeus-JamesMacFarlane

3 Réponses :

8
votes

Comme suggéré par @ Diodeus-JamesMacFarlane a essayé d'utiliser un CSS personnalisé et voici ma solution.

Résolu en utilisant display: flex et overflox-x: scroll

Voici mon fichier SCSS:

<ion-card no-padding no-margin class="no-border-radius segment-card">
    <ion-tab-button class="segment-item" tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button class="segment-item" tab="account">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">...
    </ion-tab-button>

    <ion-tab-button class="segment-item" tab="account">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">...
    </ion-tab-button>
</ion-card>

Voici mon fichier HTML:

.segment-card {
    display: flex;
    overflow-x: scroll;
    .segment-item {
        display: inline-block !important;
        min-width: 100px !important;
        width: auto !important;
    }
}

Ce sont quelques captures d'écran

Capture d'écran pendant le défilement

0 commentaires

0
votes

Je préférerais utiliser des segments ioniques pour ce type d'approche. Et il y a un bon exemple dans la documentation https://ionicframework.com/docs/api/segment

<!-- Segment in a toolbar -->
<ion-toolbar>
  <ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="camera">
      <ion-icon name="camera"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="bookmark">
      <ion-icon name="bookmark"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

1 commentaires

Pourriez-vous ajouter un exemple de la façon d'obtenir le même comportement de routage / navigation imbriqué que ion-tabs fournit avec les ion-segment ? L'extrait de votre réponse n'a pas de routerLink ou de router-outlets , il ne montre donc pas une grande partie de la fonctionnalité ion-tabs fournit.


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                    SCSS
ion-tab-bar {
  overflow: auto;
}
 fonctionne

                                

                                                                    
                                    
                                    
                                        0 commentaires


            
                
		    
                    Articles qui pourrait vous intéresser :
                                            
                            Impossible d'importer le module "@ angular / material"                        
                        
                                            
                            Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube                        
                        
                                            
                            erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule                        
                        
                                            
                            [ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail