Mobile Angular UI - komponenty

W tym rozdziale poznamy ważne komponenty mobilnego kątowego interfejsu użytkownika. Są następujące -

Navbars
Sidebars
Modals
Overlays

Paski nawigacyjne

Paski nawigacyjne wykorzystują górną i dolną część ekranu urządzenia. Możemy użyć górnego paska nawigacyjnego, aby wyświetlić pozycje menu lub sekcję nagłówka. Dolny pasek nawigacyjny służy do wyświetlania sekcji stopki.

Prosty sposób wyświetlania paska nawigacyjnego na ekranie wygląda następująco -

Pasek nawigacyjny można wyświetlić na dwa sposoby: stały i przepełniony.

Ważne klasy CSS

W Mobile Angular UI, aby wyświetlić pasek nawigacyjny, musisz skorzystać z klas css - navbar, .navbar-app .

Klasy dla podejścia Top / Bottom Overflow

Dla górnego paska nawigacyjnego klasa css - .navbar-absolut-top .

Na dolnym pasku nawigacyjnym klasa css - .navbar-absolute-bottom .

Klasy dla stałego podejścia Top / Bottom

Na górnym pasku nawigacyjnym klasa css - .navbar-fixed-top .

Na dolnym pasku nawigacyjnym klasa css - .navbar-fixed-bottom .

Popracujmy nad Overflow Navbar w interfejsie użytkownika.

Poniżej znajduje się kod HTML tego samego -

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>

Tak wygląda wyświetlacz -

Paski boczne

Paski boczne zajmują lewą i prawą stronę ekranu. Są one zawsze ukryte i aktywowane po kliknięciu elementu podłączonego do lewej lub prawej strony. To najlepszy sposób na wykorzystanie miejsca na ekranie.

Jak dotąd widzieliśmy działanie navbarów. Skorzystajmy teraz z elementu paska nawigacyjnego po lewej i prawej stronie, aby otworzyć paski boczne.

Możesz umieścić paski boczne po lewej lub prawej stronie.

Ważne klasy CSS

Klasy css dla lewego paska bocznego - sidebar sidebar-left .

Klasy css dla prawego paska bocznego - sidebar sidebar-right .

Kontener DIV dla paska bocznego jest następujący -

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

Interakcja z paskami bocznymi

Aby otworzyć i zamknąć boczne paski dodane po lewej i prawej stronie, musisz dodać następujący kod do tagu HTML, który będzie otwierał paski boczne.

Na przykład, aby otworzyć lewy pasek boczny po kliknięciu linku, możesz dodać następujące elementy -

Pasek boczny korzysta z sharedstate uiSidebarLeft i uiSidebarRight do przełączania elementów paska bocznego.

Zamierzamy skorzystać z górnego paska nawigacyjnego, który dodaliśmy wcześniej. Dodaj ui-toggle = ”uiSidebarLeft” i ui-toggle = „uiSidebarRight”, a także klasę sidebar-toggle i 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>

Dodajmy teraz kontener div dla lewego i prawego paska bocznego.

Lewy pasek boczny

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

Możesz skorzystać z ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'w szablonie paska bocznego, aby zamknąć pasek boczny po kliknięciu w dowolnym miejscu paska bocznego. Pasek boczny zostanie domyślnie zamknięty po kliknięciu w dowolnym miejscu poza szablonem paska bocznego.

Na lewym pasku bocznym, gdy użytkownik kliknie linki, pasek boczny zostanie zamknięty, tak jak dodaliśmy ui-turn-off='uiSidebarLeft' do szablonu lewego paska bocznego.

Prawy pasek boczny

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

Wyświetlanie paska bocznego w przeglądarce wygląda następująco -

Kliknij Samouczki, aby wyświetlić menu lewego paska bocznego, jak pokazano poniżej -

Kliknij Ebooki, aby wyświetlić menu po prawej stronie, jak pokazano poniżej -

Modały i nakładki

Modals i Overlays pokażą na ekranie wyskakujące okienko. Nakładki różnią się od modalnych tylko sposobem wyświetlania kontenera.

Musisz skorzystać z ngIf/uiIf lub ngHide/uiHide wraz z uiState, aby aktywować / odrzucić nakładkę lub modal.

CSS dla modalu będzie .modali dla nakładki będzie .modal-overlay.

Aby wyświetlić tryb modalny i nakładkę, dodaj następujący kontener div do pliku index.html.

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

Przypiszmy modal do stopki nawigacji, którą zrobiliśmy wcześniej.

Tutaj O NAS będzie działać jako modalne, a KONTAKT - jako nakładka.

Dodaj następujące zmiany do linków O NAS i KONTAKT -

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

Jeśli klikniemy ten link, otworzy się okno modalne i nakładka.

Dodano zawartość modalną i nakładki inside src/home/home.html plik.

Główna zawartość modalu i nakładki musi być umieszczona w następującym kontenerze div -

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

Dodajmy zawartość do widoku modalnego i nakładki. Nazwa, której użyliśmy w linkach, tj.ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", te same są używane wewnątrz dla aboutus zawartość modalna i contactus zawartość nakładki.

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

Wyświetlacz dla trybu modalnego i nakładki jest następujący -

Po kliknięciu O NAS wyświetli się modalnie, jak pokazano poniżej -