Mobile Angular UI - Components

In this chapter, we are going to understand the important components in mobile angular UI. They are as follows −

Navbars

Sidebars

Modals

Overlays

Navbars

Navbars make use of the top and bottom portion of the device screen. We can use the top navbar to display the menu items or the header section. The bottom navbar can be used to display the footer section.

A simple display of navbar on the screen is as follows −

Navbar can be shown in two ways: fixed and overflow approach.

Important CSS classes

In Mobile Angular UI to show navbar you have to make use of css classes − navbar, .navbar-app.

Classes for Top/Bottom Overflow approach

For the top navbar the css class − .navbar-absolute-top.

For the bottom navbar the css class − .navbar-absolute-bottom.

Classes for Top/Bottom fixed approach

For the top navbar the css class − .navbar-fixed-top.

For the bottom navbar the css class − .navbar-fixed-bottom.

Let us work on the Overflow Navbar on the UI.

Following is the HTML code for the same −

Navbar-Top

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

Navbar-Bottom

<span class="navbar navbar-app navbar-absolute-bottom">
   <span 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>
   </span>
</span>

This is how the display looks pke −

Sidebars

The sidebars occupy the left and right side of the screen. They are always hidden and activated when the item connected to the left side or right side is cpcked. It is the best way to utipze the space on the screen.

So far we have seen the working of navbars. Let us now make use of the navbar item on the left side and right side to open the sidebars.

You can place sidebars on the left side or right side.

Important CSS classes

The css classes for left side sidebar − sidebar sidebar-left.

The css classes for right side sidebar − sidebar sidebar-right.

The span container for sidebar is as follows −

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

Interaction with Sidebars

To open and close the sidebars added on the left side and right side you need to add the following to the html tag that will open the sidebars.

For example, to open left sidebar on cpck on a pnk you can add the following −

Sidebar makes use of sharedstate uiSidebarLeft and uiSidebarRight to toggle the sidebar items.

We are going to make use of the top navbar we added earper. Add ui-toggle=”uiSidebarLeft” and ui-toggle="uiSidebarRight" and also the class sidebar-toggle and sidebar-right-toggle.

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

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

Let us now add a span container for the left sidebar and right sidebar.

Left Sidebar

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

You can make use of ui-turn-off= uiSidebarLeft or ui-turn-off= uiSidebarRight in your sidebar template to close the sidebar when cpcked anywhere inside the sidebar. The sidebar will be closed by default when cpcked anywhere outside the sidebar template.

In the left side bar when the user cpcks on the pnks, the sidebar will be closed as we have added ui-turn-off= uiSidebarLeft to the left sidebar template.

Right Sidebar

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

The display of sidebar in the browser is as follows −

Cpck on Tutorials to get left sidebar menu as shown below −

Cpck on Ebooks to get right side menu as shown below −

Modals and Overlays

Modals and Overlays will show a pop-up type window on your screen. Overlays differ from modal only in how the container is displayed for it.

You need to make use of ngIf/uiIf or ngHide/uiHide along with uiState to activate/dismiss the overlay or modal.

The css for modal will be .modal, and for overlay, it will be .modal-overlay.

To show modal and overlay, add the following span container inside your index.html.

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

Let us assign a modal to the navbar footer we have done earper.

Here ABOUT US will act as a modal and CONTACT US will act as an overlay.

Add the following changes to the pnks of ABOUT US and CONTACT US −

<span class="navbar navbar-app navbar-absolute-bottom">
   <span 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>
   </span>
</span>

If we cpck on this pnk, the modal and overlay will open.

The content for modal and overlay is added inside src/home/home.html file.

The main content for modal and overlay has to be wrapped inside the following span container −

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

Let us add content to the modal and overlay view. The name we have used on the pnks i.e., ui-turn-on="aboutus_modal" and ui-turn-on="contactus_overlay", the same are used inside for the aboutus modal content and contactus overlay content.

<span ui-content-for="modals">
   <span class="modal" ui-if="aboutus_modal" ui-shared-state="aboutus_modal">
      <span class="modal-backdrop in"></span>
      <span class="modal-dialog">
         <span class="modal-content">
            <span class="modal-header">
               <button class="close"
                  ui-turn-off="aboutus_modal">×</button>
               <h4 class="modal-title">Modal</h4>
            </span>
            <span class="modal-body">
               <p>Testing Modal</p>
            </span>
            <span 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>
            </span>
         </span>
      </span>
   </span>
   <span class="modal modal-overlay" ui-if="contactus_overlay" ui-shared-state="contactus_overlay">
      <span class="modal-dialog">
         <span class="modal-content">
            <span class="modal-header">
               <button class="close"
                  ui-turn-off="contactus_overlay">×</button>
               <h4 class="modal-title">Overlay</h4>
            </span>
            <span class="modal-body">
               <p>Testing Overlay</p>
            </span>
            <span 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>
            </span>
         </span>
      </span>
   </span>
</span>

The display for modal and overlay is as follows −

Oncpck of ABOUT US it will display modal as shown below −

Oncpck of CONTACT US, it will display overlay as shown below −

Cpck on the close button to close the modal window.