Membuat Grid Layout pada Ionic Framework
Untuk menempatkan komponen pada sebuah halaman atau menyusun keselarasan antar elemen secara konsistem, kita perlu mendesain layout secara sistem grid (Grid system), biasa disebut dengan istilah grid layout.
Grid system pada ionic framework bersifat flexbox, yang artinya sebuah teknik layout yang dapat mengatur ruang antar elemen pada sebuah kontainer secara dinamis pada ukuran layar yang berbeda dan displya device yang berbeda.
Terdapat beberapa model dalam membuat grid layout pada ionic framework, yaitu:
- Grid layout dengan model evenly spaced columns
- Grid layout dengan model explicit column sized
- Grid layout dengan model offset column
- Grid layout dengan model vertically align column
- Grid layout dengan model responsive grid
Sebelum kita menerapkan model-model grid layout pada project ionic, tentunya anda harus membuat project ionic terlebih dahulu. Dalam contoh ini, kita akan membuat project dengan template blank project dengan cara sebagai berikut :
- Create folder pada drive C:\ dengan nama ionicApps, sehingga nantinya anda akan menempatkan project ionic pada path C:\ionicApps\. Buka command prompt, kemudian masuk ke C:\ionicApps. Kemudian ketikkan command berikut pada command prompt :
ionic start app1 blank
Pada command prompt akan terlihat seperti Gambar.1 dibawah ini :
(Gambar.1)
- Masuk ke folder app1 pada command prompt, kemudian ketikkan command :
Sehingga akan muncul tampilan blank project seperti gambar.2 dibawah ini :ionic serve
(Gambar.2)
Setelah terbuat blank project ionic seperti Gambar.2 diatas, langkah berikutnya kita akan menerapkan teknik grid layout seperti yang disebutkan diatas.
Grid layout dengan model evenly spaced column
Pada model ini, column akan dibagi rata. Jika seandainya terdapat 5 column pada satu row, maka masing-masing column akan menempati ruang dengan width sebesar 20%. Jika terdapat 4 column pada satu row, maka masing-masing column akan memiliki width sebesar 25%.Untuk membuat dengan ionic grid layout dengan model evenly spaced column, masuk ke window explore kemudian masuk ke lokasi folder project ionic yang bernama app1. Anda aka melihat beberapa folder dan file yang terbuat pada folder app1.Kemudian klik folder www, sehingga anda akan melihat file index.html.
Langkah berikutnya, edit file index.html dengan menggunakan editor seperti notepad++ atau editor lainnya. Tambahkan kode berikut diantara tag
<ion-content></ion-content> :<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>Kemudian tambahkan kode css berikut diantara tag
<head></head> :<style>
.col{
border:1px solid red;
}
</style>Sehingga kode dari index.html akan menjadi seperti dibawah ini:
<!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">
<style>
.col{
border:1px solid red;
}
</style>
<!-- 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-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>Untuk melihat tampilan setelah kita melakukan modifikasi pada index.html, ketikkan ionic serve pada command prompt anda seperti yang ditunjukkan oleh Gambar.3 dibawah ini :
Sehingga kita dapat melihat tampilannya seperti yang ditunjukkan oleh Gambar.4 dibawah ini :
Tutorial ionic grid layout lainnya :
