Ionic Grid Layout dengan model Explicit Column Sized
Maksud dari explicit column sized adalah teknik layout yang menetapkan atau memberikan ukuran terhadap sebuah kolom. Seperti yang kita ketahui, secara default ukuran kolom akan dibagi secara merata apabila kita tidak memberikan ukuran (size).
Tabel berikut menunjukkan opsi persentase yang disediakan oleh ionic grid system :
Percobaan 1 :Menentukan Ukuran Column Pada Ionic Grid Layout
Pada percobaan pertama ini, kita akan membuat grid layout seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Untuk menghasilkan tampilan ionic grid layout seperti Gambar.1, edit file index.html pada folder project ionic (Baca tutorial sebelumnya untuk memahami cara mengedit file index.html).
Tambahkan kode berikut diantara tag
<ion-content></ion-content> :<div class ="row">
<div class ="col">col 1</div>
<div class ="col col-50">col 2</div>
<div class ="col">col 3</div>
<div class ="col">col 4</div>
<div class ="col">col 5</div>
</div>
<div class ="row">
<div class ="col col-50">col 1</div>
<div class ="col">col 2</div>
<div class ="col">col 3</div>
</div>Kemudian jangan lupa tambahkan kode css diantar tag
<head></head> agar terbentuk border berwarna merah supaya kita dapat melihat perbedaan jarak lebar antar column.<style>
.col{
border:1px solid red;
}
</style>Ketikkan ionic serve pada command prompt anda, maka akan terlihat tampilan seperti Gambar.1 diatas.
Percobaan 2 :Menentukan Ukuran Column Pada Ionic Grid Layout
Untuk percobaan kedua ini, kita akan membuat grid layout seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
Untuk membuat tampilan seperti Gambar.2 diatas, maka edit file index.html dan tambahkan kode dibawah ini diantara tag
<ion-content></ion-content> :<div class = "row">
<div class = "col">col 1</div>
<div class = "col col-50">col 2</div>
<div class = "col col-10">col 3</div>
</div>
<div class = "row">
<div class = "col col-50">col 1</div>
<div class = "col">col 2</div>
<div class = "col col-40">col 3</div>
</div>Serta tambahkan juga kode css diantara tag <head></head> :
<style>
.col{
border:1px solid red;
}
</style>Seperti yang terlihat pada Gambar.2 untuk baris pertama, col 1, col 2 dan col 3 memiliki ukuran width yang berbeda, dimana pada col-2 kita set ukurannya 50% dan col-3 diset ukurannya 10%, jadi col-1 merupakan sisanya. Begitu juga dengan baris kedua, col 1 diset dengan ukuran 50%, col 3 dengan ukuran 30% dan sisanya akan digunakan oleh col 2.
Tutorial ionic grid layout lainnya :
