Interfaccia utente angolare mobile - Componenti

In questo capitolo, vedremo i componenti importanti dell'interfaccia utente angolare mobile. Sono i seguenti:

Navbars
Sidebars
Modals
Overlays

Navbar

Le barre di navigazione utilizzano la parte superiore e inferiore dello schermo del dispositivo. Possiamo usare la barra di navigazione superiore per visualizzare le voci di menu o la sezione dell'intestazione. La barra di navigazione inferiore può essere utilizzata per visualizzare la sezione del piè di pagina.

Una semplice visualizzazione della barra di navigazione sullo schermo è la seguente:

La barra di navigazione può essere visualizzata in due modi: approccio fisso e overflow.

Importanti classi CSS

Nell'interfaccia utente di Mobile Angular per mostrare la barra di navigazione devi utilizzare le classi CSS: navbar, .navbar-app .

Classi per l'approccio Overflow Top / Bottom

Per la barra di navigazione superiore la classe css - .navbar-absolute-top .

Per la barra di navigazione inferiore, la classe CSS - .navbar-absolute-bottom .

Classi per approccio fisso Top / Bottom

Per la barra di navigazione superiore la classe CSS - .navbar-fixed-top .

Per la barra di navigazione inferiore, la classe css - .navbar-fixed-bottom .

Lavoriamo sulla barra di navigazione Overflow sull'interfaccia utente.

Di seguito è riportato il codice HTML per lo stesso:

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>

Ecco come appare il display:

Barre laterali

Le barre laterali occupano il lato sinistro e destro dello schermo. Sono sempre nascosti e attivati quando si fa clic sull'elemento collegato a sinistra o a destra. È il modo migliore per utilizzare lo spazio sullo schermo.

Finora abbiamo visto il funzionamento delle navbar. Utilizziamo ora l'elemento della barra di navigazione sul lato sinistro e sul lato destro per aprire le barre laterali.

Puoi posizionare le barre laterali sul lato sinistro o destro.

Importanti classi CSS

Le classi CSS per sidebar lato sinistro - sidebar sidebar-left .

Le classi CSS per sidebar lato destro - sidebar sidebar-right .

Il contenitore div per la barra laterale è il seguente:

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

Interazione con le barre laterali

Per aprire e chiudere le barre laterali aggiunte sul lato sinistro e sul lato destro è necessario aggiungere quanto segue al tag html che aprirà le barre laterali.

Ad esempio, per aprire la barra laterale sinistra facendo clic su un collegamento è possibile aggiungere quanto segue:

Sidebar fa uso di sharedstate uiSidebarLeft e uiSidebarRight per alternare gli elementi della barra laterale.

Utilizzeremo la barra di navigazione in alto che abbiamo aggiunto in precedenza. Aggiungi ui-toggle = ”uiSidebarLeft” e ui-toggle = "uiSidebarRight" e anche le classi sidebar-toggle e 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>

Aggiungiamo ora un contenitore div per la barra laterale sinistra e la barra laterale destra.

Barra laterale sinistra

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

Puoi usare ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarRight'nel modello della barra laterale per chiudere la barra laterale quando si fa clic in un punto qualsiasi all'interno della barra laterale. La barra laterale verrà chiusa per impostazione predefinita quando si fa clic in un punto qualsiasi al di fuori del modello della barra laterale.

Nella barra laterale sinistra quando l'utente fa clic sui collegamenti, la barra laterale verrà chiusa come abbiamo aggiunto ui-turn-off='uiSidebarLeft' al modello della barra laterale sinistra.

Barra laterale destra

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

La visualizzazione della barra laterale nel browser è la seguente:

Fare clic su Tutorial per ottenere il menu della barra laterale sinistra come mostrato di seguito -

Fare clic su Ebook per ottenere il menu sul lato destro come mostrato di seguito -

Modali e sovrapposizioni

Modali e sovrapposizioni mostreranno una finestra di tipo pop-up sullo schermo. Le sovrapposizioni differiscono dal modale solo per il modo in cui viene visualizzato il contenitore.

È necessario utilizzare ngIf/uiIf o ngHide/uiHide insieme a uiState per attivare / disattivare la sovrapposizione o il modale.

Il css per modal sarà .modale per l'overlay lo sarà .modal-overlay.

Per mostrare modale e overlay, aggiungi il seguente contenitore div all'interno del tuo index.html.

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

Assegniamo un modale al piè di pagina della barra di navigazione che abbiamo fatto in precedenza.

Qui CHI SIAMO fungerà da modale e CONTATTACI fungerà da sovrapposizione.

Aggiungere le seguenti modifiche ai collegamenti di CHI SIAMO e CONTATTACI -

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

Se facciamo clic su questo collegamento, si apriranno il modale e l'overlay.

Viene aggiunto il contenuto per modale e overlay inside src/home/home.html file.

Il contenuto principale per modale e overlay deve essere inserito nel seguente contenitore div:

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

Aggiungiamo il contenuto alla visualizzazione modale e sovrapposta. Il nome che abbiamo utilizzato nei collegamenti, ad es.ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", gli stessi sono usati all'interno per il aboutus contenuto modale e contactus contenuto in sovrapposizione.

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

La visualizzazione per modale e overlay è la seguente:

Cliccando su CHI SIAMO verrà visualizzato il modale come mostrato di seguito -