Membuat aplikasi dengan template tabs di Ionic

Beberapa aplikasi mobile yang berjalan saat ini, banyak menggunakan konsep tabs sebagai tampilannya (UI). Aplikasi yang familiar kita gunakan seperti WhatsApp, Line, BBM semuanya menggunakan konsep tabs. Seperti apa tampilan tabs tersebut dapat kita lihat seperti contoh berikut:

Untuk membuat menu tabs seperti contoh pada aplikasi diatas, kita dapat dengan mudah menggunakan beberapa pemanggilan di CMD. Secara cepat Ionic telah menyediakan fitur tabs tersebut. Untuk mempersingkat, mari dimulai dengan memanggil library yang disediakan oleh Ionic dengan memasukan code berikut di CMD pada directory aplikasi kita akan dibuat:

ionic start tabsApp tabs
cd tabsApp
ionic platform add android

Aplikasi yang saya buat, saya beri nama tabsApp yang saya simpan dalam directory D:/work/Mobile Apps/tabsApp. Setelah proses awal kita selesaikan, selanjutnya kita perbaiki konten dalam aplikasi kita agar sesua dengan yang kita inginkan. Untuk memudahkan silahkan masukkan code berikut ini pada index.html

<!DOCTYPE html>
<html>

<head>
 <title></title>

 <link href="lib/ionic/css/ionic.css" rel="stylesheet"></link>
 <link href="css/style.css" rel="stylesheet"></link>
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <script src="cordova.js"></script>
 <script src="js/app.js"></script>
 <script src="js/controllers.js"></script>
 <script src="js/services.js"></script>
</head>

<body ng-app="starter">
 <ion-nav-bar class="bar-royal">
  <ion-nav-back-button>
  </ion-nav-back-button>
 </ion-nav-bar>
 <ion-nav-view></ion-nav-view>
</body>

</html>

Pada index.html tersebut, kita mencoba untuk merubah style warna tabs yang digunakan. pada aplikasi saya saat ini, saya menggunakan warna royal. Anda bisa mencoba warna lain yaitu: light, stable, positive, calm, balanced, energized, assertive, dark. secara sederhana perwarnaan saya rangkum sebagai berikut;

Perlu diperhatikan baik-baik, warna tersebut merupakan warna inti dari Ionic, sehingga hampir seluruh komponen dalam ionic dapat kita rubah warnanya sesuai dengan warna tersebut.

Selanjutnya kita akan berlanjut pada editting tabs, seperti pada penjelasan sebelumnya kita akan mengganti warna inti tabs menjadi royal. untuk memudahkan silahkan masukan code berikut pada file tabs.html yang terletak pada folder www/templates.

<ion-tabs class="tabs-icon-top tabs-royal tabs-color-active-default">

 <ion-tab href="#/tab/dash" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" title="Status">
  <ion-nav-view name="tab-dash"></ion-nav-view>
 </ion-tab>

 <ion-tab href="#/tab/chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" title="Chats">
  <ion-nav-view name="tab-chats"></ion-nav-view>
 </ion-tab>

 <ion-tab href="#/tab/account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" title="Account">
  <ion-nav-view name="tab-account"></ion-nav-view>
 </ion-tab>

</ion-tabs>

Selanjutnya kita rubah komponen dalam dashboard, yang mana dashboard ini cocok untuk kita ganti untuk timeline seperti pada aplikasi facebook. untuk memudahkan saya akan memberikan satu contoh tampilan timleline yang menyerupai faceboook. untuk memudahkan silahkan masukkan code dibawah ini pada file tabs-dash.html pada directory www/templates:

<ion-view view-title="Status">
 <ion-content class="padding">
  <div class="list card">
   <div class="item item-divider item-royal">Recent Updates
   </div>
   <div class="item item-body">
    <div>There is a fire in <b>sector 3</b>
    </div>
   </div>
  </div>
  <div class="list card">
   <div class="item item-avatar item-royal">
    <img src="img/mike.png" /><br />
    <h2>Marty McFly</h2>
    <div id="white">November 05, 1955</div>
   </div>
   <div class="item item-body">
    <img class="img-cover" src="img/max.png" /><br /> This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned
    left, within the card-footer.
    <br />
    <a class="subdued" href="https://www.blogger.com/blogger.g?blogID=8773309069357359221#">1 Like</a>
    <a class="subdued" href="https://www.blogger.com/blogger.g?blogID=8773309069357359221#">5 Comments</a>
   </div>
   <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="https://www.blogger.com/blogger.g?blogID=8773309069357359221#">
     <i class="icon ion-thumbsup"></i> Like
    </a>
    <a class="tab-item" href="https://www.blogger.com/blogger.g?blogID=8773309069357359221#">
     <i class="icon ion-chatbox"></i> Comment
    </a>
    <a class="tab-item" href="https://www.blogger.com/blogger.g?blogID=8773309069357359221#">
     <i class="icon ion-share"></i> Share
    </a>
   </div>
  </div>
 </ion-content>
</ion-view>

untuk mendukung tampilan diatas, saya sedikit menambahkan syntak yang saya buat sendiri dalam style.css. Untuk memudahkan silahkan masukkan code berikut pada file style.css pada directory www/css.

.img-cover {
    width: 320px;
    height: 150px;
}

#white {
    color: white;
}

Sekarang tampilan dasar untuk aplikasi yang berbasiskan tabs menu telah selesai, untuk tabs lainnya, anda bisa merubah sesuai dengan keinginan anda. Berikut ini adalah contoh tampilan aplikasi tabsApp yang telah saya buat

Demikian tutorial kali ini, semoga bermanfaat.

3 comments

Balas

Amin The-lapan

September 8, 2016 at 9:57 AM

Selamat Pagi Kang Prawito,

Ane masih newbe di Ionic Devel nih, skrng ane mau coba bikin tab seperti aticle anda diatas, tapi kenapa gak bisa tambil yah ?

Dimana yah coding yang menghubungkan index.html dengan file yang kita taruh di template/tab.html ?

Prawito Hudoro

October 11, 2016 at 5:12 PM

Wah, lama tak buka blog mohon maaf baru respon. kalau mau santai mas bisa chat saya aja mas via telegram. :D
Kalau sempat saya buatkan lagi tutorial yang lebih mudah.