Membuat Offset Column pada Ionic Grid Layout
Dalam sesi tutorial ionic framework kali ini, kita akan melanjutkan pembuatan ionic grid layout dengan model offset column.
Agar kita dapat memahami dengan baik maksud atau pengertian dari offset column, perhatikan Gambar.1 dibawah ini :
Jika kita perhatikan Gambar.1 diatas pada row pertama, diantara col1 dan col2 terdapat ruang kosong. Ruang kosong ini terjadi karena pada col2 diset dengan status offset, sehingga akan terbuat ruang kosong terlebih dahulu baru kemudian dibuat lebar dari col2 dimana dalam hal ini col2 bersifat evenly spaced column.
Pada row kedua dari Gambar.1 diatas, sebelum col1 akan terbuat ruang koson. Hal ini juga akibat pada col1 diset dengan status offset.
Berikut ini adalah tabel persentase untuk ukuran lebar dari offset column :
Percobaan 1
Untuk membuat ionic grid layout seperti tampilan pada Gambar.1 diatas, maka editlah file index.html, kemudian tambahkan kode berikut diantara tag <ion-content></ion-content> :<div class = "row">
<div class = "col">col 1</div>
<div class = "col col-offset-25">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-offset-25">col 1</div>
<div class = "col ">col 2</div>
<div class = "col">col 3</div>
</div>Serta tambahkan juga kode css berikut diantara tag <head></head> :
<style>
.col{
border:1px solid red;
}
</style>Percobaan 2
Pada percobaan kedua ini, disamping kita set offset, kita juga akan mengeset ukuran columnya (explicit column size).Lakukan pengeditan pada file index.html dengan menambahkan kode berikut diantara tag <ion-content></ion-content> :
<div class = "row">
<div class = "col">col 1</div>
<div class = "col col-offset-25 col-10">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-offset-25 col-50">col 1</div>
<div class = "col ">col 2</div>
<div class = "col">col 3</div>
</div>Serta tambahkan juga kode css berikut diantara tag tag <head></head> :
<style>
.col{
border:1px solid red;
}
</style>Sehingga kita akan mendapatkan ionic grid layout seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
Jika kita perhatikan Gambar.2 diatas, pada row pertama col2 diset dengan status offset serta diberi ukuran lebar kolom 10% dan pada row kedua col1 diset dengan status offset serta diberi ukuran lebar 50% (lihat code diatas).
Tutorial ionic grid layout lainnya :
