Sunday, December 27, 2015

Mamasukan Icon pada form input di Ionic

Penulis Prawito Hudoro Diterbitkan 7:00 AM

Tags

android

angularJS

cordova

CSS

html

ionic

ionicframework

mobile application

Beberapa aplikasi yang kini banyak di pasaran, pasti sudah sangat familiar dengan yang namanya login screen (halaman login). Pada halaman ini, banyak sekali variasi dari form input yang digunakan. Salah satu yang menarik untuk dijadikan tutorialnya adalah bagaimana memasukan icon pada form input yang kita gunakan. Sederhananya seperti pada form input login, biasanya di dampingi dengan icon surat. Nah, berikut ini adalah tutorial bagaimana memasukan icon pada form input kita di aplikasi Ionic.
Seperti biasa, kita lakukan persiapan dengan memasukan code berikut di CMD:

ionic start iconForm blank
cd iconForm
ionic platform add android

Selanjutnya langsung kita utak-atik index.html nya. Silahkan copy code dibawah ini untuk memudahkan.

<!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>
</head>

<body ng-app="starter">
 <ion-header-bar class="bar-energized">
  <h1 class="title">Icon Form Input</h1>
 </ion-header-bar>
 <ion-content class="padding">
  <div class="item item-input inner-ico right-ico">
   <i class="glyphicon icon ion-email"></i>
   <input placeholder="Email" type="email" />
  </div>
  <div class="item item-input inner-ico right-ico">
   <i class="glyphicon icon ion-locked"></i>
   <input placeholder="Password" type="password" />
  </div>
  <button class="button button-block button-energized">Sign In</button>
 </ion-content>
</body>

</html>

Agar icon yang kita gunakan dapat berada di posisi sebelah kanan, maka perlu bantuan CSS. Masukkan code berikut pada file style.css :

.inner-ico {
    position: relative;
}

.inner-ico .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
    color: #aaa;
}

.left-ico .glyphicon {
    left: 0px;
}

.right-ico .glyphicon {
    right: 0px;
}

.left-ico input {
    padding-left: 30px;
}

.right-ico input {
    padding-right: 30px;
}

Cukup sederhana sehingga sekarang form yang kita gunakan memiliki icon pada sebelah kanan. Berikut tampilan dari aplikasi yang kita buat:

Demikian semoga bermanfaat.