Mobile Angular UI Tutorial
Selected Reading
- Mobile Angular UI - Discussion
- Mobile Angular UI - Useful Resources
- Mobile Angular UI - Quick Guide
- Mobile Angular UI - Examples
- Mobile Angular UI - APP Development
- Mobile Angular UI - Creating APK File
- Mobile Angular UI - PhoneGap & Cordova
- Mobile Angular UI - Touch Events
- Mobile Angular UI - Core Details
- Mobile Angular UI - Sections
- Mobile Angular UI - Toggle Switch
- Mobile Angular UI - Swipe Gestures
- Mobile Angular UI - Forms
- Mobile Angular UI - Scrollable Areas
- Mobile Angular UI - Drag and Drop
- Mobile Angular UI - Tabs
- Mobile Angular UI - Accordions
- Mobile Angular UI - Dropdowns
- Mobile Angular UI - Components
- Mobile Angular UI - Layouts
- Mobile Angular UI - My First App
- Mobile Angular UI - Project Setup
- Mobile Angular UI - Installation
- Mobile Angular UI - Overview
- Mobile Angular UI - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Mobile Angular UI - Tabs
Mobile Angular UI - Tabs
Tabs are useful components available in angular mobile ui. Tabs are available in the same wrapper and show your contents in separate pane just pke how the tabs are opened in the browser. Only one tab is displayed to the user at a time.
Here is a working example of Tabs component.
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mobile Angular UI Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" /> <meta name="apple-mobile-web-app-status-bar-style" content="yes" /> <pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" /> <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /> <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /> <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" /> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script> <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script> <pnk rel="stylesheet" href="src/css/app.css" /> <script src="src/js/app.js"></script> </head> <body ng-app="myFirstApp" ng-controller="MainController"> <!-- Sidebars --> <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> <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> <span class="app"> <span class="navbar navbar-app navbar-absolute-top"> <span class="navbar-brand navbar-brand-center" ui-yield-to="title"> TutorialsPoint </span> <span class="btn-group pull-left"> <span ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle"> <i class="fa fa-th-large "></i> Tutorials </span> </span> <span class="btn-group pull-right" ui-yield-to="navbarAction"> <span ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"> <i class="fal fa-search"></i> eBooks </span> </span> </span> <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_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a> </span> </span> <!-- App body --> <span class= app-body > <span class= app-content > <ng-view></ng-view> </span> </span> </span><!-- ~ .app --> <!-- Modals and Overlays --> <span ui-yield-to="modals"></span> </body> </html>
src/js/app.js
/* espnt no-alert: 0 */ use strict ; // // Here is how to define your module // has dependent on mobile-angular-ui // var app=angular.module( myFirstApp , [ ngRoute , mobile-angular-ui ]); app.config(function($routeProvider, $locationProvider) { $routeProvider .when("/", { templateUrl : "src/home/home.html" }); $locationProvider.html5Mode({enabled:true, requireBase:false}); }); app.controller( MainController , function($rootScope, $scope, $routeParams) { $scope.msg="Welcome to Tutorialspoint!" $scope.js="JavaScript is a pghtweight, interpreted programming language. It is designed for creating network-centric apppcations. It is comppmentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform."; $scope.angularjs="AngularJS is a very powerful JavaScript Framework. It is used in Single Page Apppcation (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is pcensed under the Apache pcense version 2.0."; $scope.reactjs="React is a front-end pbrary developed by Facebook. It is used for handpng the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript pbraries and has a strong foundation and large community behind it."; });
src/home/home.html
<span class="scrollable"> <span class="scrollable-content"> <span class="section"> <ui-shared-state id="activeTab" default="1"></ui-shared-state> <ul class="nav nav-tabs"> <p ui-class="{ active : activeTab == 1}"> <a ui-set="{ activeTab : 1}">Javascript</a> </p> <p ui-class="{ active : activeTab == 2}"> <a ui-set="{ activeTab : 2}">AngularJS</a> </p> <p ui-class="{ active : activeTab == 3}"> <a ui-set="{ activeTab : 3}">ReactJS</a> </p> </ul> <span ui-if="activeTab == 1"> <h3 class="page-header">Javascript</h3> <p>{{js}}</p> </span> <span ui-if="activeTab == 2"> <h3 class="page-header">AngularJS</h3> <p>{{angularjs}}</p> </span> <span ui-if="activeTab == 3"> <h3 class="page-header">ReactJS</h3> <p>{{reactjs}}</p> </span> <span class="btn-group justified nav-tabs"> <a ui-set="{ activeTab : 1}" ui-class="{ active : activeTab == 1}" class="btn btn-default">Javascript</a> <a ui-set="{ activeTab : 2}" ui-class="{ active : activeTab == 2}" class="btn btn-default">AngularJS</a> <a ui-set="{ activeTab : 3}" ui-class="{ active : activeTab == 3}" class="btn btn-default">ReactJS</a> </span> </span> </span> </span>
Following is the display in browser −
![Tab](/mobile_angular_ui/images/tab.jpg)