Interface utilisateur mobile angulaire - Composants

Dans ce chapitre, nous allons comprendre les composants importants de l'interface utilisateur angulaire mobile. Ils sont les suivants -

Navbars
Sidebars
Modals
Overlays

Navbars

Les barres de navigation utilisent la partie supérieure et inférieure de l'écran de l'appareil. Nous pouvons utiliser la barre de navigation supérieure pour afficher les éléments de menu ou la section d'en-tête. La barre de navigation inférieure peut être utilisée pour afficher la section de pied de page.

Un simple affichage de la barre de navigation sur l'écran est le suivant -

La barre de navigation peut être affichée de deux manières: approche fixe et approche de débordement.

Classes CSS importantes

Dans Mobile Angular UI pour afficher la barre de navigation, vous devez utiliser les classes css - navbar, .navbar-app .

Classes pour l'approche Top / Bottom Overflow

Pour la barre de navigation supérieure, la classe css - .navbar-absolute-top .

Pour la barre de navigation inférieure, la classe css - .navbar-absolute-bottom .

Classes pour l'approche fixe Top / Bottom

Pour la barre de navigation supérieure, la classe css - .navbar-fixed-top .

Pour la barre de navigation inférieure, la classe css - .navbar-fixed-bottom .

Laissez-nous travailler sur la barre de navigation Overflow sur l'interface utilisateur.

Voici le code HTML pour le même -

Navbar-Top

<div class="navbar navbar-app navbar-absolute-top">
   <div class="btn-group pull-left">
      <div class="btn">
         <i class="fa fa-th-large "></i> Library
      </div>
   </div>
   <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
      TutorialsPoint
   </div>
   <div class="btn-group pull-right" ui-yield-to="navbarAction">
      <div class="btn">
         <i class="fal fa-search"></i> eBooks
      </div>
   </div>
</div>

Navbar-Bottom

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a href="https://www.tutorialspoint.com/about/index.htm" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a href="https://www.tutorialspoint.com/about/contact_us.htm" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

Voici à quoi ressemble l'affichage -

Barres latérales

Les barres latérales occupent les côtés gauche et droit de l'écran. Ils sont toujours masqués et activés lorsque l'élément connecté au côté gauche ou au côté droit est cliqué. C'est la meilleure façon d'utiliser l'espace sur l'écran.

Jusqu'à présent, nous avons vu le fonctionnement des navbars. Utilisons maintenant l'élément de barre de navigation sur le côté gauche et le côté droit pour ouvrir les barres latérales.

Vous pouvez placer des barres latérales sur le côté gauche ou droit.

Classes CSS importantes

Les classes css pour la barre latérale gauche - barre latérale gauche .

Les classes css pour la barre latérale droite - barre latérale droite .

Le conteneur div pour la barre latérale est le suivant -

<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>

Interaction avec les barres latérales

Pour ouvrir et fermer les barres latérales ajoutées sur le côté gauche et sur le côté droit, vous devez ajouter ce qui suit à la balise html qui ouvrira les barres latérales.

Par exemple, pour ouvrir la barre latérale gauche en cliquant sur un lien, vous pouvez ajouter ce qui suit -

La barre latérale utilise sharedstate uiSidebarLeft et uiSidebarRight pour basculer les éléments de la barre latérale.

Nous allons utiliser la barre de navigation supérieure que nous avons ajoutée plus tôt. Ajoutez ui-toggle = "uiSidebarLeft" et ui-toggle = "uiSidebarRight" ainsi que les classes sidebar-toggle et sidebar-right-toggle.

<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle"><i class="fa fa-th-large "></i> Library</div>

<div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"><i class="fal fa-search"></i> Search</div>

Ajoutons maintenant un conteneur div pour la barre latérale gauche et la barre latérale droite.

Barre latérale de gauche

<div class="sidebar sidebar-left">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">Tutorials</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-turn-off='uiSidebarLeft'>
            <a class="list-group-item" href="/">Home Page </a>
            <a class="list-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
            <a class="list-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
            <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
            <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
            <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
            <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
         </div>
      </div>
   </div>
</div>

Vous pouvez utiliser ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'dans votre modèle de barre latérale pour fermer la barre latérale lorsque vous cliquez n'importe où dans la barre latérale. La barre latérale sera fermée par défaut lorsque vous cliquez n'importe où en dehors du modèle de barre latérale.

Dans la barre latérale gauche lorsque l'utilisateur clique sur les liens, la barre latérale sera fermée comme nous l'avons ajouté ui-turn-off='uiSidebarLeft' dans le modèle de barre latérale gauche.

Barre latérale droite

<div class="sidebar sidebar-right">
   <div class="scrollable">
      <h1 class="scrollable-header app-name">eBooks</h1>
      <div class="scrollable-content">
         <div class="list-group" ui-toggle="uiSidebarRight">
            <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
            <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
         </div>
      </div>
   </div>
</div>

L'affichage de la barre latérale dans le navigateur est le suivant -

Cliquez sur Tutoriels pour obtenir le menu de la barre latérale gauche comme indiqué ci-dessous -

Cliquez sur Ebooks pour obtenir le menu de droite comme indiqué ci-dessous -

Modaux et superpositions

Modals et Overlays afficheront une fenêtre de type pop-up sur votre écran. Les superpositions ne diffèrent du mode modal que par la façon dont le conteneur est affiché.

Vous devez utiliser ngIf/uiIf ou ngHide/uiHide avec uiState pour activer / désactiver la superposition ou le modal.

Le css pour modal sera .modal, et pour la superposition, ce sera .modal-overlay.

Pour afficher le modal et la superposition, ajoutez le conteneur div suivant dans votre index.html.

<div ui-yield-to="modals"></div>

Attribuons un modal au pied de page de la barre de navigation que nous avons fait précédemment.

Ici, À PROPOS DE NOUS agira comme un modal et CONTACTEZ-NOUS agira comme une superposition.

Ajoutez les modifications suivantes aux liens de À PROPOS DE NOUS et CONTACTEZ-NOUS -

<div class="navbar navbar-app navbar-absolute-bottom">
   <div class="btn-group justified">
      <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
      <a ui-turn-on="contactus_overlayl" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
   </div>
</div>

Si nous cliquons sur ce lien, le modal et la superposition s'ouvriront.

Le contenu pour le modal et la superposition est ajouté inside src/home/home.html fichier.

Le contenu principal pour le modal et la superposition doit être enveloppé dans le conteneur div suivant -

<div ui-content-for="modals">
   <div class="modal"><!-- ... --></div>
</div>

Ajoutons du contenu à la vue modale et superposée. Le nom que nous avons utilisé sur les liens à savoir,ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", les mêmes sont utilisés à l'intérieur pour le aboutus contenu modal et contactus contenu de superposition.

<div ui-content-for="modals">
   <div class="modal" ui-if="aboutus_modal" ui-shared-state="aboutus_modal">
      <div class="modal-backdrop in"></div>
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="aboutus_modal">×</button>
               <h4 class="modal-title">Modal</h4>
            </div>
            <div class="modal-body">
               <p>Testing Modal</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="aboutus_modal" class="btn btn-default">Close</button>
               <button ui-turn-off="aboutus_modal" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
   <div class="modal modal-overlay" ui-if="contactus_overlay" ui-shared-state="contactus_overlay">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button class="close"
                  ui-turn-off="contactus_overlay">×</button>
               <h4 class="modal-title">Overlay</h4>
            </div>
            <div class="modal-body">
               <p>Testing Overlay</p>
            </div>
            <div class="modal-footer">
               <button ui-turn-off="contactus_overlay" class="btn btn-default">Close</button>
               <button ui-turn-off="contactus_overlay" class="btn btn-primary">Save</button>
            </div>
         </div>
      </div>
   </div>
</div>

L'affichage pour le modal et la superposition est le suivant -

En cliquant sur À PROPOS DE NOUS, il affichera modal comme indiqué ci-dessous -