Sunday, December 20, 2015

Membuat form dengan style garis di bawah pada Ionic

Penulis Prawito Hudoro Diterbitkan 7:00 AM

Tags

android

angularJS

cordova

CSS

html

ionic

ionicframework

mobile application

Ketika kita mulai banyak membuat aplikasi, hal yang paling sering kita gunakan agar aplikasi kita interaktif dengan user adalah adanya form input. Namun seperti yang kita ketahui, Ionic menyediakan default form input itu hanya berbentuk kotak. Sedangkan tidak sedikit kita ingin membuat variasi yang beragam untuk form inputan kita. Saya akan memberikan contoh perbandingan form inputan yang disediakan Ionic dengan form Input yang beberapa aplikasi sering pakai.

Untuk mempercepat, seperti biasa kita mulai persiapan untuk pembuatan aplikasi kita.

ionic start customInput blank
cd customInput
ionic platform add android

Kemudian kita masukkan code berikut ini pada index.html yang terletak di directory www/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>
</head>

<body ng-app="starter">
 <ion-content class="padding bg-login">
  <center class="t10">
   <h2 class="f-white">
LOGO</h2>
  </center>
  <input class="line t10" placeholder="Email" type="email" />
  <input class="line" placeholder="Password" type="password" />
  <center class="t10 b10">
   <a class="no-style f-white" href="https://www.blogger.com/blogger.g?blogID=8773309069357359221">Forgot your password?</a></center>
  <button class="button button-block button-royal">Sign in</button>
 </ion-content>
</body>

</html>

Selanjutnya kita masukkan style sehingga form yang kita inginkan bisa dibuat. Silahkan buka style.css kemudian masukan code dibawah ini:

input::-webkit-input-placeholder {
   color: #fff;
}

input.line {
 border: none;
 border-bottom: 2px solid #fff;
 background: transparent;
 margin-bottom: 10px;
 display: block;
 width: 100%;
}

a.no-style {
 text-decoration: none;
}

.bg-login {
 background-color: #be80ff;
}

.f-white {
 color: #fff;
}


.t10 {
 margin-top: 10%;
}

.b10 {
 margin-bottom: 10%;
}

setelah selesaai tinggal kita running aplikasi yang kita buat. tampilan aplikasi yang kita buat akan seperti berikut ini:

Demikian Semoga bermanfaat.