Foundation Part 5 : Visibility Classes Pada Framework Foundation
Foundation Part 5 : Visibility classes Pada Framework Foundation – Setelah sebelumnya kita membahas tentang tutorial cara membuat form dengan foundation framework, pada tutorial ini kita akan melanjutkan tentang pembahasan foundation framework dengan membahas Visibility class pada framework foundation.
Pada framework foundation terdapat sebuah fitur yaitu fitur visibility classes. visibility classes adalah fitur dimana kita bisa menampilkan atau menyembunyikan sebuah elemant tertentu dengan hanya bantuan sebuah class yang sudah di sediakan. dan tinggal di gunakan saja.
Yuk simak lebih lanjut penjelasan tentang visibility classes pada framework foundation dan beserta contoh nya.
Foundation Part 5 : Visibility classes Pada Framework Foundation
Seperti yang telah di singgung pada pengertian visibility classes di atas, visibility classes di buat untuk membantu kita atau memberi kemudahan dalam menampilkan atau menyembunyikan element tertentu pada saat-saat tertentu pula.
contoh yang akan kita buat pada Foundation Part 5 : Visibility Classes Pada Framework Foundation ini adalah kita akan memembuat contoh penggunaan visibility classes pada framework foundation, yaitu dengan menampilkan sebuah element tertentu hanya pada saat halaman website di buka melalui smartphone. atau menampilkan sesuatu hanya pada saat halaman website tersebut di buka melalui ukuran layar tablet. dan sebaliknya kita bisa juga menyembunyikan sesuatu element jika di akses atau di buka melalui smartphone atau perangkat lain yang memiliki ukuran layar yang berbeda-beda.
Sebelum teman-teman mengikuti tutorial lebih lanjut, di sarankan terlebih dulu untuk membaca tuorial foundation dasar tentang cara menggunakan framewor foundation berikut : Foundation part 2 : Cara menggunakan framework foundation. agar lebih mudah untuk di pahami.
Foundation Part 5 : Visibility classes Pada Framework Foundation
Adapun beberapa class yang bisa di gunakan untuk visibility classes pada framework foundation adalah sebagai berikut :
- show-for-small
Class ini di gunakan untuk menampilkan element tertentu pada saat di akses dari layar berukuran smarphone. - show-for-medium
Class ini di gunakan untuk menampilkan element tertentu pada saat di akses dari layar berukuran tablet. - show-for-large
Class ini di gunakan untuk menampilkan element tertentu pada saat di akses dari layar berukuran pc/laptop. - hide-for-small
Class ini di gunakan untuk menyembunyikan element tertentu pada saat di akses dari layar berukuran smarphone. - hide-for-medium
Class ini di gunakan untuk menyembunyikan element tertentu pada saat di akses dari layar berukuran tablet. - hide-for-large
Class ini di gunakan untuk menyembunyikan element tertentu pada saat di akses dari layar berukuran pc/laptop.
Menampilkan element tertentu pada ukuran layar tertentu
Di sini akan kita buat sebuah contoh untuk menampilkan suatu element paragraf pada saat di buka melalui ukuran layar device yang berbeda-beda.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Foundation Starter Template</title> <link rel="stylesheet" href="css/foundation.css" /> </head> <body> <center><h1>TUTORIAL FOUNDATION <br/> <a href="https://www.malasngoding.com">WWW.MALASNGODING.COM</a></h1></center> <br/> <p class = "show-for-small">Ini akan di tampilkan pada ukuran layar smartphone(small).</p> <p class = "show-for-medium">Ini akan di tampilkan pada ukuran layar tablet(sedang).</p> <p class = "show-for-large">Ini akan di tampilkan pada ukuran layar pc/laptop(besar).</p> <script src="js/vendor/jquery.js"></script> <script src="js/vendor/what-input.js"></script> <script src="js/vendor/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html> |
bisa teman-teman perhatikan pada bagian
|
1 2 3 |
<p class = "show-for-small">Ini akan di tampilkan pada ukuran layar smartphone(small).</p> <p class = "show-for-medium">Ini akan di tampilkan pada ukuran layar tablet(sedang).</p> <p class = "show-for-large">Ini akan di tampilkan pada ukuran layar pc/laptop(besar).</p> |
yg mana kita telah berikan class-class untuk menampilkan element tersebut pada saat di akses atau di buka melalui layar yang berukuran berbeda-beda.
jika halaman ini di buka atau di akses dari laptop atau pc.
jika di buka dari layar laptop
dan jika di jalankan atau di buka dari tablet
jika di buka dari layar tablet
jika di jalankan dari smartphone
jika di buka dari layar smartphone
Nah, bisa teman-teman lihat sendiri hasilnya pada gambar-gambar di atas.
Menyembunyikan element tertentu pada ukuran layar tertentu
Untuk menyembunyikan element dengan menggunakan visibility classes dapat perhatikan pada contoh berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Foundation Starter Template</title> <link rel="stylesheet" href="css/foundation.css" /> </head> <body> <center><h1>TUTORIAL FOUNDATION <br/> <a href="https://www.malasngoding.com">WWW.MALASNGODING.COM</a></h1></center> <br/> <p class = "hide-for-small">Ini akan di sembunyikan pada ukuran layar smartphone(small).</p> <p class = "hide-for-medium">Ini akan di sembunyikan pada ukuran layar tablet(sedang).</p> <p class = "hide-for-large">Ini akan di sembunyikan pada ukuran layar pc/laptop(besar).</p> <script src="js/vendor/jquery.js"></script> <script src="js/vendor/what-input.js"></script> <script src="js/vendor/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html> |
Oke saya rasa cukup sekian dulu tutorial Foundation Part 5 : Visibility Classes Pada Framework Foundation. semoga dapat bermanfaat. dan akan kita lanjutkan materi foundation selanjutnya pada tutorial selanjutnya.
Tutorial Menarik Lainnya
Foundation Part 4 – Membuat Form Dengan Foundation
Foundation Part 3 : Grid System Framework Foundation
Foundation Part 2 : Cara Menggunakan Framework Foundation
Foundation Part 1 : Pengenalan Framework Foundation
