Using Slide Boxes and Tabs in Ionic Framework Apps

One of my Twitter followers recently asked me to do a tutorial on the topic of Ionic Framework slide boxes and tabs. I’m always up for a challenge, so I decided to attempt to meet his requests.

In this article we are going to discuss creating an application that makes use of tabs, slide boxes, and cards. The theme of the application will be cars, where two tabs will represent the interior and exterior photos of cars and the third tab will contain information.

Like with my other tutorials, let’s start by creating a fresh Ionic Android and iOS project:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Remember, if you’re not using a Mac then you cannot add and build for the iOS platform.

In this tutorial, we are going to be very heavy HTML dependent rather than JavaScript dependent. We need to start by adding a few styles. Either open www/css/style.css or place the following in your www/index.html file:

.slider { height: 100%; text-align: center }
.scroll { height: 100% }

We add the above code because we want each slide in the slide box to take up the full screen. Any text in these slides will be centered.

As per the official Ionic Framework documentation, the following will create a slide box with three slides:

<ion-slide-box>
    <ion-slide>
        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">
    </ion-slide>
    <ion-slide>
        <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">
    </ion-slide>
    <ion-slide>
        <img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">
    </ion-slide>
</ion-slide-box>

You’ll notice that I’ve found three random car pictures on the internet and included them in each of the slides. The image will take up the full width of the slide. If you’re using images in your production application, you’ll probably want to use better sized images.

The above code is very basic. It only allows for swiping. It doesn’t auto play and it doesn’t loop. It also doesn’t allow you to choose the current slide. By adding the following, we can have better control of our slide box:

<ion-slide-box ng-controller="ExampleController" pager-click="navSlide(index)" auto-play="true" does-continue="true">

The above code will auto play the slides and loop them. I’ve also added a function that allows you to choose the slide when you click on one of the pager items. The function is found inside the ExampleController which can be seen below:

example.controller("ExampleController", function($scope, $ionicSlideBoxDelegate) {
    $scope.navSlide = function(index) {
        $ionicSlideBoxDelegate.slide(index, 500);
    }
});

Let’s make things interesting. We are going to create three tabs. Two of the tabs will contain slide boxes while the other will contain random information. Since we are keeping the car trend, one tab will have exterior pictures, one tab will have interior pictures, and the information slide will have information about where to buy.

Ionic Slide Box

Before I jump into our goal, let me first show you how we’re going to work with tabs.

<ion-tabs class="tabs-positive tabs-icon-only">
    <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
        <ion-content>
        </ion-content>
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
        <ion-content>
        </ion-content>
    </ion-tab>

    <ion-tab title="Settings" icon-on="ion-ios7-information" icon-off="ion-ios7-information-outline">
        <ion-content>
        </ion-content>
    </ion-tab>
</ion-tabs>

More documentation on Ionic tabs can be seen in the official Ionic Framework documentation. We will be putting each of our tabs content in the <ion-content> tags. Then when your user clicks on a tab, that particular content will show.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
        <style>
            .slider { height: 100%; text-align: center }
            .scroll { height: 100% }
        </style>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Information App</h1>
            </ion-header-bar>
            <ion-tabs class="tabs-positive tabs-icon-only">
                <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
                    <ion-content>
                        <ion-slide-box ng-controller="ExampleController" pager-click="navSlide(index)" auto-play="true" does-continue="true">
                            <ion-slide>
                                <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/7/79/2001_BMW_Z3_Sideview_Topdown_Topaz_Blue_2.5i.jpg">
                            </ion-slide>
                            <ion-slide>
                                <img style="width: 100%" src="http://upload.wikimedia.org/wikipedia/commons/2/2e/BMW_Z3_1.9L_1998.jpg">
                            </ion-slide>
                            <ion-slide>
                                <img style="width: 100%" src="http://www.bmwblog.com/wp-content/uploads/bmw-z3-black.jpg">
                            </ion-slide>
                        </ion-slide-box>
                    </ion-content>
                </ion-tab>

                <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
                    <ion-content>
                        <ion-slide-box ng-controller="ExampleController" pager-click="navSlide(index)" auto-play="true" does-continue="true">
                            <ion-slide>
                                <img style="width: 100%" src="http://autorentic.net/wp-content/uploads/2014/10/bmw-z3-interior-wallpaper-bmw-z3-32-pictures.jpg">
                            </ion-slide>
                            <ion-slide>
                                <img style="width: 100%" src="http://images.gtcarlot.com/pictures/54715743.jpg">
                            </ion-slide>
                            <ion-slide>
                                <img style="width: 100%" src="http://jonsibal.com/blog/wp-content/gallery/mroadster/mroadster_11.jpg">
                            </ion-slide>
                        </ion-slide-box>
                    </ion-content>
                </ion-tab>

                <ion-tab title="Settings" icon-on="ion-ios7-information" icon-off="ion-ios7-information-outline">
                    <ion-content>
                        <div class="card">
                            <div class="item item-divider">
                                Some title here
                            </div>
                            <div class="item item-text-wrap">
                                <img style="width: 100%" src="https://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91378&zoom=11&size=600x300">
                            </div>
                            <div class="item tabs tabs-secondary tabs-icon-left">
                                <a class="tab-item" href="#">
                                    <i class="icon ion-ios7-telephone"></i>
                                    Call
                                </a>
                                <a class="tab-item" href="#">
                                    <i class="icon ion-ios7-email"></i>
                                    Email
                                </a>
                                <a class="tab-item" href="#">
                                    <i class="icon ion-share"></i>
                                    Share
                                </a>
                            </div>
                        </div>
                    </ion-content>
                </ion-tab>
            </ion-tabs>
        </ion-pane>
    </body>
</html>

The full JavaScript that goes with the above UI can be seen below:

var example = angular.module('starter', ['ionic'])

example.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});

example.controller("ExampleController", function($scope, $ionicSlideBoxDelegate) {
    $scope.navSlide = function(index) {
        $ionicSlideBoxDelegate.slide(index, 500);
    }
});

To follow good practices, you shouldn’t include all your tabs in the index.html file. You should create template files and make use of the ui-router that ships with Ionic Framework. This will keep your code extremely organized and better for debugging. You can see how this is done in one of my previous posts.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Subscribe

Subscribe to my newsletter for monthly tips and tricks on subjects such as mobile, web, and game development.

Subscribe on YouTube

Support This Site