Mobile Angular UI - Komponenten

In diesem Kapitel werden wir die wichtigen Komponenten der mobilen eckigen Benutzeroberfläche verstehen. Sie sind wie folgt -

Navbars
Sidebars
Modals
Overlays

Navbars

Navigationsleisten verwenden den oberen und unteren Bereich des Gerätebildschirms. Wir können die obere Navigationsleiste verwenden, um die Menüelemente oder den Kopfbereich anzuzeigen. In der unteren Navigationsleiste kann der Fußzeilenbereich angezeigt werden.

Eine einfache Anzeige der Navigationsleiste auf dem Bildschirm lautet wie folgt:

Die Navigationsleiste kann auf zwei Arten angezeigt werden: fester und Überlaufansatz.

Wichtige CSS-Klassen

Um in der Benutzeroberfläche von Mobile Angular die Navigationsleiste anzuzeigen, müssen Sie CSS- Klassen verwenden - Navigationsleiste, .navbar-App .

Klassen für den Top / Bottom Overflow-Ansatz

Für die obere Navigationsleiste die CSS- Klasse - .navbar-absolute-top .

Für die untere Navigationsleiste die CSS- Klasse - .navbar-absolute-bottom .

Klassen für festen Ansatz oben / unten

Für die obere Navigationsleiste die CSS- Klasse - .navbar-fixed-top .

Für die untere Navigationsleiste die CSS- Klasse - .navbar-fixed-bottom .

Lassen Sie uns an der Überlauf-Navigationsleiste auf der Benutzeroberfläche arbeiten.

Es folgt der HTML-Code für dasselbe -

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>

So sieht das Display aus -

Seitenleisten

Die Seitenleisten befinden sich auf der linken und rechten Seite des Bildschirms. Sie werden immer ausgeblendet und aktiviert, wenn auf das mit der linken oder rechten Seite verbundene Element geklickt wird. Dies ist der beste Weg, um den Platz auf dem Bildschirm zu nutzen.

Bisher haben wir die Arbeit von Navbars gesehen. Lassen Sie uns nun das Navigationsleistenelement auf der linken und rechten Seite verwenden, um die Seitenleisten zu öffnen.

Sie können Seitenleisten auf der linken oder rechten Seite platzieren.

Wichtige CSS-Klassen

Die CSS-Klassen für linke Seitenleiste - Seitenleiste Seitenleiste-links .

Die CSS-Klassen für die rechte Seitenleiste - Seitenleiste Seitenleiste rechts .

Der div-Container für die Seitenleiste lautet wie folgt:

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

Interaktion mit Seitenleisten

Um die auf der linken und rechten Seite hinzugefügten Seitenleisten zu öffnen und zu schließen, müssen Sie dem HTML-Tag, mit dem die Seitenleisten geöffnet werden, Folgendes hinzufügen.

Um beispielsweise die linke Seitenleiste beim Klicken auf einen Link zu öffnen, können Sie Folgendes hinzufügen:

Die Seitenleiste verwendet sharedstate uiSidebarLeft und uiSidebarRight, um die Seitenleistenelemente umzuschalten .

Wir werden die zuvor hinzugefügte obere Navigationsleiste verwenden. Fügen Sie ui-toggle = "uiSidebarLeft" und ui-toggle = "uiSidebarRight" sowie die Klassen sidebar-toggle und sidebar-right-toggle hinzu.

<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>

Fügen wir nun einen Div-Container für die linke Seitenleiste und die rechte Seitenleiste hinzu.

Linke Seitenleiste

<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>

Sie können nutzen ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'in Ihrer Seitenleistenvorlage, um die Seitenleiste zu schließen, wenn Sie auf eine beliebige Stelle in der Seitenleiste klicken. Die Seitenleiste wird standardmäßig geschlossen, wenn Sie auf eine beliebige Stelle außerhalb der Seitenleistenvorlage klicken.

Wenn der Benutzer in der linken Seitenleiste auf die Links klickt, wird die Seitenleiste geschlossen, wie wir hinzugefügt haben ui-turn-off='uiSidebarLeft' zur linken Seitenleistenvorlage.

rechte Sidebar

<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>

Die Anzeige der Seitenleiste im Browser ist wie folgt:

Klicken Sie auf Tutorials, um das Menü in der linken Seitenleiste wie unten gezeigt aufzurufen.

Klicken Sie auf Ebooks, um das Menü auf der rechten Seite wie unten gezeigt aufzurufen.

Modale und Überlagerungen

Modale und Überlagerungen zeigen ein Popup-Fenster auf Ihrem Bildschirm an. Überlagerungen unterscheiden sich von Modal nur darin, wie der Container dafür angezeigt wird.

Sie müssen nutzen ngIf/uiIf oder ngHide/uiHide zusammen mit uiState, um das Overlay oder Modal zu aktivieren / schließen.

Das CSS für Modal wird sein .modalund für die Überlagerung wird es sein .modal-overlay.

Fügen Sie den folgenden div-Container in Ihre index.html ein, um Modal und Overlay anzuzeigen.

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

Weisen wir der Navbar-Fußzeile, die wir zuvor erstellt haben, ein Modal zu.

Hier fungiert ABOUT US als Modal und CONTACT US als Overlay.

Fügen Sie die folgenden Änderungen zu den Links von ABOUT US und CONTACT US hinzu -

<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>

Wenn wir auf diesen Link klicken, werden das Modal und das Overlay geöffnet.

Der Inhalt für Modal und Overlay wird hinzugefügt inside src/home/home.html Datei.

Der Hauptinhalt für Modal und Overlay muss in den folgenden div-Container verpackt werden -

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

Fügen wir der Modal- und Overlay-Ansicht Inhalte hinzu. Der Name, den wir für die Links verwendet haben, dhui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", die gleichen werden innen für die verwendet aboutus modaler Inhalt und contactus Inhalt überlagern.

<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>

Die Anzeige für Modal und Overlay ist wie folgt:

Wenn Sie auf ÜBER UNS klicken, wird Modal wie unten gezeigt angezeigt.