Vuetify part 4 Breakpoint, Visibilty, Overflow, dan Display

Breakpoint, Visibilty, Overflow, dan Display

Visibility dan Breakpoint

Pada tutorial sebelum nya kita sudah mencoba button dan icon. nah sekarang kita coba bagian breakpoint dan display. silahkan kalian masuk ke website resmi dari vuetifyjs.com breakpoints dan Display. saya akan mencoba menjelaskan pada bagian breakpoin. disana terdapat table Viewport yang mana macam-macam ukuran device.

disana juga tercantum type dari setiap ukuran, adan tablet, laptop, dan dekstop.

langsung praktek aja. jadi format dari visibility adalah hidden-{breakpoint}-{condition}.

bagian breakpoint di isi dengan salah satu dari dibawah ini :
xs (extra small) yaitu lebar nya (<600px) kurang dari 600px maka true.
sm (small) yaitu lebarnya ( 600px >< 960px) kurang dari 600px dan kurang dari 960px maka true.
md (medium) yaitu lebarnya (960px >< 1264px) kurang dari 960px dan kurang dari 1264px maka true.
lg (large) yaitu lebarnya (1264px >< 1904px) kurang dari 1264px dan kurang dari 1904px maka true.
xl (extra large) yaitu lebarnya ( > 1904px) lebih dari 1904px maka true.

bagian condition di isi dengan salah satu dari dibawah ini :
only = sembunyikan elemen sesuai aturan dari breakpoint hanya pada nilai size yang dilaluinya. misal breakpoint md yang memiliki 2 nilai, maka dibawah dari 1264px sampai 960px akan disembunyikan. dibawah 960px akan tampil dan diatas atau pas 1264px akan tampil juga.
and-down = sembunyikan elemen dari nilai size breakpoint tertinggi sampai size 0px. sedangkan diatas nilai size breakpoint akan ditampilkan.
and-up = menampilkan elemen dari nilai size breakpoint tertinggi sampai size 0px. sedangkan diatas nilai size breakpoint akan disembunyikan.

1. buka kembali file home.vue kalian, hapus script terdahulu dan ketikan dibawah ini.

    <v-btn class="hidden-md-and-down">Click me</v-btn>
   

maka jadi seperti ini bagian home.vue

1. lalu jalan kan npm run seve dan check dibrowser akan terlihat normal seperti biasa.

2. klik kanan dan inspect element.
3. pilih icon ini, pada pojok kanan. (note: saya menggunakan firefox)

maka akan menjadi tampilan yang bisa kira resize sesuai yang kita mau atau sesuai size dari smartphone.

1. silahkan rubah size tersebut hingga kurang dari 1264px, kenapa 1264px ? karena yang digunakan tadi adalah md yaitu lebar kurang dari 1264px. ketika dibawah dari 1264px maka button tersebut akan terhidden atau menghilang. seperti gambar dibawah ini :

penjelasan :

karena kita menggunakan breapoint md dan visibility and-down maka dari nilai 1264px kebawah, button dilayar akan menghilang.
sebaliknya jika menggunakan visibility and-up maka dari nilai 1264px kebawah akan tampil.
jika menggunakan only hanya pada size yang dilalui 1264px sampai 960px yang disembunyikan.

Overflow

Overflow berfungsi jika ada konten didalam elemen yang melebihi atau keluar dari element parent nya atau element yang membungkus konten tersebut. Format penulisan nya adalah :

 overflow-hidden - sembunyikan overflow pada sumbu x dan y  
 overflow-y-hidden - sembunyikan overflow pada sumbu y  
 overflow-x-hidden - sembunyikan overflow pada sumbu x  

Display

Display biasa nya berfungsi untuk mengatur posisi setiap element. Format penulisan nya adalah :

 d-inline-flex - mengatur properti display elemen ke inline-flex  
 d-flex - mengatur properti tampilan elemen menjadi fleksibel  
 d-inline-block - mengatur properti display elemen ke inline-block  
 d-block - mengatur properti tampilan elemen untuk diblokir  
 d-inline - mengatur properti tampilan elemen menjadi inline  
 d-none - mengatur properti tampilan elemen ke none