Skip to main content
mengenal component CSS Ionic

Mengenal Component CSS pada Framework Ionic

Pendahuluan Mengenal Component CSS pada Framework Ionic

Salam sejahtera, masih seputar pembelajaran tentang penggunaan Ionic Framework untuk pengembangan aplikasi mobile, kali ini kita akan bahas tentang Mengenal Component CSS pada Framework Ionic. Ada beberapa materi pembahasan sebelumnya tentang awal menggunakan Framework Ionic, mulai dari instalasi awal, pembuatan project dan menjalankan project melalui serve. Pembahasan tersebut mudah-mudahan menjadi landasan awal untuk lanjut ketahap ini. Pembahasan tentang pengenalan Struktur code project ionic ini sangat penting untuk pemahaman untuk pengembangan project ionic.Baca : Pembuatan Project Ionic

Pembahasan kita pada kelanjutan materi blejar Ionic adalah tentang mengenal component CSS pada Framework Ionic. Seperti kita pahami bahwa Ionic juga menggunakan Bahasa CSS untuk desain layoutnya. Pastinya juga untuk mendapatkan tampilan terbaik aplikasi, CSS harus kita pelajari.

Topik Pembahasan mengenal component CSS pada Framework Ionic:

  • Pendahuluan
  • Membuat Header, Content dan Footer
  • Membuat Buttons
  • Kesimpulan

Untuk tahapan awal dalam mempelajari Mengenal Component CSS pada Framework Ionic, kita batasi dulu pada 3 sub topik. Selanjutnya pada materi selanjutnya akan kita lanjutkan dengan Componen yang lainnya.

Modul referensi : Ionic web

Mengenal component CSS : Membuat Header, Content dan Footer

Pembahasan awal tentang Mengenal Component CSS pada Framework Ionic akan coba kita pahami bagaimana mendesain tampilan aplikasi untuk bagian Header, Content dan Footer. Lumrahnya sebuah aplikasi (Webbase) pastinya terdapat 3 hal tersebut. Header merupakan bagian atas, Content bagian Tengah dan footer bagian bawah aplikasi. Bagaimana dengan Ionic, kita akan praktekkan dengan mengubah tampilan project sebelumnya (Template : blank).

Buka aplikasi menggunakan Tool Ionic Lab untuk lebih mudah, atau bisa juga melalui perintah Command Line. Dalam hal ini saya gunakan lewat perintah command line. Pilih project sebelumnya : App_pertama kemudian jalankan lewat serve

mengenal component CSS Ionic
Perintah Command Line

ketika kita run project dengan meng-klik serve, akan tampil seperti berikut di browser :

mengenal component CSS Ionic
mengenal component CSS Serve

Note : Saya gunakan extension Ripple untuk tampil dalam versi mobile emulator Google Chrome.

Kita akan mulai megedit coding nya, tahapan awal yaitu bagian Header.

mengenal component CSS : Costumize Header

Untuk permulaan tentang mengenal component CSS, Buka file index.html yang terdapat dalm folder www, open menggunakan editor kesayangan anda, saya gunakan sublime text. Ini adalah tampilan awal default source nya :

mengenal component CSS Ionic
Component CSS Ionic Default Kode

Kita lakukan edit code untuk ubah Header nya dibagian berikut :

Untuk tampilan Header Warna Biru

      
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>

Kemudian save dan serve otomatis akan dilakukan perubahan :

mengenal component CSS Ionic
component CSS header

Untuk tampilan lainnya :

 <ion-header-bar class="bar-calm">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar> 

Hasilnya :

mengenal component CSS Ionic
component CSS Header

Untuk berikutnya, coba gantikan saja dengan ragam pilihan warna tampilan lainnya seperti tampak pada gambar dan source code berikut:

mengenal component CSS ionic
component CSS header

Kemudian SAVE dan lihat perubahan nya.

Costumize Sub Header

Setelah bagian header telah kita ubah sesuai kebutuhan, kini selanjutnya adalah menambahkan sub header. Cara menambahkan sub header dengan kode nya  meng include “has-subheader" CSS class di bagian “ion-content" directive. Contoh :

</p>
<p style="text-align: justify;"><ion-content class="bar bar-subheader">
<h2 class="title">INI SUB HEADER</h2>
</ion-content></p>
<p style="text-align: justify;">

Hasilnya :

mengenal component CSS
component CSS sub header

Customize Content

Untuk pembahasan ubah tampilan content, akan kita bahas dipembahasan selanjutnya karena content sudah menggunanakan AngularJS dan javascript.

Customize Footer

lanjut tentang topik mengenal component CSS. Footer merupakan tampilan paling bawah dalam sebuah aplikasi. Biasanya akan selalu digunakan. Untuk mengubah tampilan nya bisa kita lakukan dengan kode berikut:

</p>
<p style="text-align: justify;"><ion-footer-bar class="bar-balanced">
<h1 class="title">FOOTER</h1>
</ion-footer-bar></p>
<p style="text-align: justify;">

Hasilnya :

mengenal component CSS
component CSS footer

Bagian footer memiliki beberapa piliahn warna sesuai kebutuhan aplikasi yang kita bangun. Sama seperti header, kita hanya menggantikan bagian kode : class=”bar-balanced” dengan pilihan lainnya. Contoh lain :

</p>
<p style="text-align: justify;"><ion-footer-bar class="bar-calm">
<div button class="button button-clear">KIRI</div>
<div class="title">JUDUL</div>
<div button class="button button-clear">KANAN</div>
</ion-footer-bar></p>
<p style="text-align: justify;">

Hasilnya :

mengenal component CSS
component CSS footer

Kode diatas saya bagi footer dalam 3 kolom yaitu Left, center dan right. Sekilas kode diatas sudah kita tambahkan Button. Jelasnya untuk Button kita bahas dibawah.

Membuat Buttons

berlanjut tentang topik mengenal component CSS. Dalam sebuah aplikasi, biasanya akan terdapat button atau sering kita sebut tombol. Pastinya juga kepada sebuah buttons akan diberikan sebuah Event. pertama akan coba kita bahas bagaimana menambahkan buttons dan mencostumize nya di Ionic. Berikut source codenya :

Saya tempatkan source dalam bagian content

</p>
<p style="text-align: justify;"><ion-content>
<button class="button">DEFAULT BUTTON</button><br>
<button class="button button-light">WARNA LIGHT</button><br>
<button class="button button-stable">STABLE BUTTON</button><br>
<button class="button button-positive">WARNA BIRU</button><br>
<button class="button button-calm">CALM BUTTON</button><br>
<button class="button button-balanced">WARNA HIJAU</button><br>
<button class="button button-energized">ENEGIZED BUTTON</button><br>
<button class="button button-assertive">ASSERTIVE BUTTON</button><br>
<button class="button button-royal">ROYAL BUTTON</button><br>
<button class="button button-dark">DARAK BUTTON</button><br>
</ion-content></p>
<p style="text-align: justify;">

Hasilnya :

mengenal component CSS
component CSS Button

Block Button

Sebelumnya ketika kita membuat sebuah button tampilan masih belum menarik karena belum kita posisikan pas untuk aplikasi. kita bisa memposisikan button pas untuk ukuran layar (100%). kode yang ditambahkan yaitu “display: block”. berikut contoh dan hasilnya :

</p>
<p style="text-align: justify;"><ion-content>
<button class="button <strong>button-block</strong>">DEFAULT BUTTON</button><br>
<button class="button <strong>button-block</strong> button-light">WARNA LIGHT</button><br>
<button class="button <strong>button-block</strong> button-stable">STABLE BUTTON</button><br>
<button class="button <strong>button-block</strong> button-positive">WARNA BIRU</button><br>
<button class="button <strong>button-block</strong> button-calm">CALM BUTTON</button><br>
<button class="button <strong>button-block</strong> button-balanced">WARNA HIJAU</button><br>
<button class="button <strong>button-block</strong> button-energized">ENEGIZED BUTTON</button><br>
<button class="button <strong>button-block</strong> button-assertive">ASSERTIVE BUTTON</button><br>
<button class="button <strong>button-block</strong> button-royal">ROYAL BUTTON</button><br>
<button class="button<strong> button-block</strong> button-dark">DARAK BUTTON</button><br>
</ion-content></p>
<p style="text-align: justify;">

Tampilan nya :

mengenal component CSS
component CSS Button block

Full Width Block Button

Merupakan tampilan untuk membuat full button. Kita hanya menambahkan kode “button-full”. full maksudnya disini adalah tampilan buttons nya akan full tampil sesuai layar yang kita gunakan. Berikut Tampilan hasilnya :

mengenal component CSS
component CSS Button Full

Icon Button

Maksudnya adalah menambahkan icon gambar pada button yang kita gunakan. Hal ini pastinya akan membuat semakin menarik aplikasi kita. Perintah source nya yaitu :

</p>
<p style="text-align: justify;"><ion-content>
<button class="button button-block <strong>icon-left ion-home</strong>">DEFAULT BUTTON</button><br>
<button class="button button-block button-light <strong>icon-left ion-star</strong>">WARNA LIGHT</button><br>
<button class="button button-block button-stable <strong>icon-right ion-chevron-right</strong>">STABLE BUTTON</button><br>
<button class="button button-block button-positive <strong>icon-left ion-chevron-left</strong>">WARNA BIRU</button><br>
<button class="button button-block button-calm <strong>icon-left ion-gear-a</strong>">CALM BUTTON</button><br>
<button class="button button-block button-balanced <strong>icon-left ion-settings</strong>">WARNA HIJAU</button><br>
<button class="button button-block button-energized <strong>icon-left ion-settings</strong>">ENEGIZED BUTTON</button><br>
<button class="button button-block button-assertive <strong>icon-right ion-settings</strong>">ASSERTIVE BUTTON</button><br>
<button class="button button-block button-royal <strong>icon-left ion-settings</strong>">ROYAL BUTTON</button><br>
<button class="button button-block button-dark <strong>icon-left ion-settings</strong>">DARAK BUTTON</button><br>
</ion-content></p>
<p style="text-align: justify;">

Hasilnya :

mengenal component CSS
component CSS icon Buttons

Beberapa pilihan icon yang bisa ditambahkan :

mengenal component CSS
component CSS pilihan icon

Button di Header

Ini merupakan tampilan aplikasi yang populer kini. Bagian header terdapat button di kiri dan kanan aplikasi. Berikut kode dan hasilnya:

</p>
<p style="text-align: justify;"><ion-header-bar class="bar-calm">
<button class="button icon ion-navicon"></button>
<h1 class="title">APLIKASI CIQWAN</h1>
<button class="button">Edit</button>
</ion-header-bar></p>
<p style="text-align: justify;">

Hasilnya :

mengenal component CSS
component CSS Button Header

Berikut Source Code lengkap nya untuk pembahasan materi tentang Component CSS

</p>
<!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">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">

<ion-pane>
<ion-header-bar class="bar-calm">
<button class="button icon ion-navicon"></button>
<h1 class="title">APLIKASI CIQWAN</h1>
<button class="button">Edit</button>
</ion-header-bar>
<ion-content>
<button class="button button-block icon-left ion-home">DEFAULT BUTTON</button><br>
<button class="button button-block button-light icon-left ion-star">WARNA LIGHT</button><br>
<button class="button button-block button-stable icon-right ion-chevron-right">STABLE BUTTON</button><br>
<button class="button button-block button-positive icon-left ion-chevron-left">WARNA BIRU</button><br>
<button class="button button-block button-calm icon-left ion-gear-a">CALM BUTTON</button><br>
<button class="button button-block button-balanced icon-left ion-settings">WARNA HIJAU</button><br>
<button class="button button-block button-energized icon-left ion-settings">ENEGIZED BUTTON</button><br>
<button class="button button-block button-assertive icon-right ion-settings">ASSERTIVE BUTTON</button><br>
<button class="button button-block button-royal icon-left ion-settings">ROYAL BUTTON</button><br>
<button class="button button-block button-dark icon-left ion-settings">DARAK BUTTON</button><br>
</ion-content>

<ion-footer-bar class="bar-calm">
<div button class="button button-clear">KIRI</div>
<div class="title">JUDUL</div>
<div button class="button button-clear">KANAN</div>
</ion-footer-bar>
</ion-pane>
</body>
</html>
<p style="text-align: justify;">

Kesimpulan Mengenal Component CSS pada Framework Ionic

  • Kita bisa melakukan Costumize tampilan aplikasi menggunakan kode CSS
  • Pembahasan awal masih kita fokus dibagian header dan foter serta Button
  • Silahkan modifikasi sesuai kebutuhan aplikasi yang akan dibangun
Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com