Menggunakan Metode Hiding dan Truncation Pada Materialize

Selamat datang kembali di situs tips dan trik Source Code Aplikasi, di kesempatan kali ini saya akan memberikan tips seputar dunia situs yaitu Menggunakan Metode Hiding dan Truncation Pada Materialize kita lanjut ya teman – teman pada pembahasan framework css materialize. Di judul artikel kali ini kita akan membahas dan mempraktekkan sistem hiding dan truncation, sistem hiding di pada framework ini berfungsi bagi menyembunyikan atau menampilkan konten di setiap device. Kemudian sistem truncation yang berarti memotong, sistem ini lebih mengarah bagi text. Ketika text mempunyai panjang kemudian di dikala tampilan mobile kegunaan truncation ini akan memotong beberapa text yang otomatis menyesuaikan tampilan layar dengan tapilan di belakangnya (….) atau lihat di gambar di bawah ini yang saya beri kotak berwarna merah.



Selamat



Oke mari seketika saja kita praktekkan Menggunakan Metode Hiding dan Truncation Pada Materialize lihat tabel di gambar di bawah ini



Selamat



Yakni daftar class bagi menyembunyikan atau menampilkan konten, saya akan coba menyembunyikan konten di dikala tampilan mobile.



Selamat



Di tampilan layout di atas ini saya menggunakan file sebelumnya, teman – teman pun dapat review di artikel sebelumnya tentu hasilnya akan seperti gambar di atas ini. Berikutnya saya akan menyembunyikan konten di gambar di atas ini yang saya berikan kotak berwarna orange dengan cara menambahkan class hide-on-small-only di class col



Selamat



Jikalau saya save dan jalankan di browser tampilan mobile karenanya akan di hilangkan



Selamat



Kemudian yang berikutnya kita tambahkan sistem truncation, kita tambahkan file sangat bawah di file index.html



Selamat



Save dan refresh di bowsernya, dan ubah ukuran layar dari ukuran dekstop hingga ukuran mobile. Di tampilan mobile text akan menghasilkan seperti gambar di bawah ini



 



 



Selamat



Kemudian kita berikan class truncate bagi memotong beberapa text



Selamat



Karenanya text akan di potong seandainya text melebihi tampilan setiap device



Selamat



Begitulah hasil dari kegunaan hiding dan truncation, pastinya masih banyak lagi sistem – sistem di pada framework ini. Dan kita akan bahas lagi di artikel berikutnya, saya kira lumayan sekianlah di artikel kali ini mengenai Menggunakan Metode Hiding dan Truncation Pada Materialize semoga bermanfaat. Terimakasih dan hingga jumpa.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Membuat Table Warna Berselang dengan PHP