Halo selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya melanjutkan pembahasan tentang framework css materialize. Pada kesempatan kali ini kita akan belajar tentang Fungsi Offsets dan Alignment Pada Framework CSS Materialize dimana metode kali ini berhubungan dengan artikel sebelumnya yaitu Mengetahui Grid Sistem Pada Framework CSS Materialize
Pertama kita bahas terlebih dahulu apa itu Offsets..??
Dalam framework materialize ini ada istilah yang namanya Offsets seperti hal nya pada framework css bootstrap juga ada fungsi Offsets dan juga sama kegunaannya yaitu untuk melompati kolom atau lebih tepatnya menyembunyikan kolom sebelumnya. Dengan begitu kolom yang diberikan Offsets tidak akan di tampilkan alias tidak ada konten nya. Kemudian fungsi Alignment yang disediakan oleh materialize ini berfungsi untuk mengatur posisi text, jika biasa nya kita menggunakan css native biasa kita menggunakan text-align dan line-height. Di dalam Alignment kita juga dapat memposisikan text presisi tengah atau biasa kita menggunakan line-height. Jadi dengan adanya metode ini kita tanpa perlu lagi setting di custom css nya karena tinggal memanggil class nya dan langsung tersusun sendiri.
Baik kita praktekkan Fungsi Offsets dan Alignment Pada Framework CSS Materialize teman – teman siapkan file materialize nya kemudian ketikkan script pada index.html nya, jika masih bingung untuk menginstal teman – teman bisa review pada artikel sebelumnya.
Jika sudah save dan jalankan pada browsernya, hasilnya seperti gambar di bawah ini
Kemudian teman – teman tambahkan offset-s6 offset-l6 offset-m6 offset-xl6 di class col pertama, maka jika disave col 6 akan di kosongkan di semua device
Selanjutnya kita praktekkan Alignment, teman – teman tambahkan script pada index,html nya
<div class="col l12 teal lighten-2 align">
<h5>Implementasi Alignment valign-wrapper</h5>
</div>
Kemudian berikan sedikit css nya untuk mengatur tingginya nya
Save dan refres pada browsernya
Kemudian kita tambahkan di dalam class col nya valign-wrapper
Maka konten akan center diantara tinggnya
Selain itu kita juga bisa menambahkan lagi class left-align, center-align dan right-align untuk mengatur posisi text nya, saya coba berikan class right-align pada tag h5 nya
Maka hasilnya seperti gambar di bawah ini
Itulah beberapa metode yang di sediakan oleh framework css materialize, dan masih banyak lagi metode yang lainnya. Akan saya bahas pada artikel selanjutnya, jika teman – teman masih bingung silahkan post komentar pada form di bawah ini supaya kita bisa sama – sama share seputar dunia website. Oke sekian pada artikel kali ini tentang Fungsi Offsets dan Alignment Pada Framework CSS Materialize semoga bermanfaat, terimkasih dan sampai jumpa.