"VuetifyJs" adalah Kerangka Kerja "Desain Material" yang bagus untuk "VueJs". Muncul dengan banyak komponen siap pakai. Seorang “juara tersembunyi” adalah sistem responsif yang dibangun. Ini bukan sebuah komponen, tetapi fitur deklaratif di beberapa komponennya. Saya akan menunjukkan kepada Anda di artikel ini cara membuat teks responsif, formulir, gambar, dan hampir semuanya — terakhir dengan menggunakan objek breakpoint. Jadi jika Anda ingin membuat aplikasi web yang sesuai dengan setiap ukuran viewport, VuetifyJs dan tentu saja artikel ini cocok untuk Anda ;)
Saya berasumsi bahwa Anda sedang menjalankan proyek VueJs dengan VuetifyJs, jadi saya melewatkan hal-hal tentang pembuatan proyek itu. Jika Anda ingin mencoba tutorial ini dalam pengaturan baru, silakan baca Tutorial Memulai Cepat Vuetify. Hal lain: Saya menggunakan skrip ketikan (dan saya dapat merekomendasikan ini). Jika Anda menggunakan Javascript mungkin ada sedikit perbedaan pada komponen Anda, namun pada artikel ini kami hampir tidak memiliki pengkodean, jadi hal ini seharusnya tidak menjadi masalah.
Titik henti sementara
Breakpoint dalam aplikasi web responsif mewakili ukuran tampilan yang berbeda. Tentunya memiliki ponsel pintar yang ukurannya berbeda dari tablet, atau notebook, atau monitor PC biasa atau layar ultra lebar. Kita sebagai pengembang web harus membuat aplikasi yang dapat digunakan pada semua ukuran layar — setidaknya. Menurut saya, ini akan berfungsi dan terlihat bagus di semua ukuran layar. Untuk melakukan ini, Spesifikasi Desain Material memberikan breakpoint kepada kami. Satu untuk setiap jenis perangkat.
Tangkapan layar di atas menunjukkan titik henti sementara area pandang Desain Material. Sistem breakpoint ini banyak digunakan oleh VuetifyJs. Anda dapat memeriksa dokumentasi untuk informasi lebih lanjut.
Teks Responsif
Beberapa fitur teks responsif hadir dengan Vuetify 2.3.0. Jadi early bird yang satu atau lainnya harus menggunakan versi beta.
Jadi apa itu teks responsif? Ukuran teks tergantung pada ukuran layar. Jika Anda memiliki judul pada tampilan ultra lebar, ukuran font 80 piksel mungkin terlihat lebih baik daripada 20 piksel. Di sisi lain — judul 80 piksel dapat menghancurkan keseluruhan desain pada ponsel mungil. Jadi teks responsif sangat masuk akal. Tentu saja Anda dapat melakukan ini dengan css dan media queries. Namun di VuetifyJs ini adalah fitur deklaratif yang siap digunakan.
Gambar di atas menunjukkan bagaimana judul dan bahkan teks dapat berubah berdasarkan ukuran tampilan. Di Vuetify Anda bisa mendapatkan perilaku ini hanya dengan mendeklarasikan kelas berbeda pada elemen teks Anda:
<template>
<v-row class="pa-3">
<h1
class="
text-h4 [1]
text-md-h2 [2]
text-lg-h1 [2]
text-xl-h1 [2]
text-truncate" [3]
>This is my heading</h1>
<p
class="
text--secondary
text-caption
text-sm-body-2
text-md-body-1
text-lg-body-1
text-xl-body-1
text-justify">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut...
</p>
</v-row>
</template>
/// @/components/ResponsiveText.vue
Anda selalu memiliki kelas ukuran teks default [1] yang juga mencakup breakpoint terkecil (xs). Defaultnya dapat ditimpa dengan menggunakan kelas breakpoint untuk setiap breakpoint [2] — jika Anda menginginkan ukuran teks yang berbeda sesuai dengan defaultnya. Polanya selalu text-[breakpoint]-[fontsize]. Khususnya pada heading, alat yang hebat adalah text-truncate, yang memotong teks jika tidak muat di elemen luar.
Formulir Responsif
Masalah besar lainnya dalam membuat aplikasi web responsif adalah formulir. Mereka harus diatur, tergantung pada ukuran tampilan. Di sinilah sistem jaringan listrik yang hebat dapat menunjukkan kekuatannya. Tentu saja sistem grid tidak hanya berguna dalam penggunaan formulir, namun merupakan kasus umum untuk aplikasi web responsif. Jadi saya menggunakan contoh formulir — cara kerjanya selalu sama, apa pun yang ingin Anda tampilkan di layar.
Sistem grid terdiri dari baris dan kolom. Setiap baris “virtual” memiliki 12 kolom “virtual”, yang menghasilkan kisi-kisi dengan jumlah baris yang berubah-ubah dengan masing-masing 12 kolom. Ada dua elemen di vuetify — v-row dan v-column. Penting untuk dipahami, bahwa Anda dapat menempatkan v-row dan v-column ke dalam sistem grid, namun keduanya tidak harus sama dengan grid statis n hingga 12.
Bidang pada gambar di atas semuanya diberi nama dengan R(ow)[number]C(olumn)[number]. Jadi Anda bisa melihat, bagaimana bidang bergerak, dalam sistem grid, dan mengubah ukuran tampilan. Kita bisa melihat baris formulir pertama (R1C1, R1C2, R1C3) untuk memperjelasnya. Di layar besar, baris pertama (yang sama dengan elemen v-row) menampung tiga bidang dalam tiga elemen v-col. v-col pertama tersebar di 6 kolom virtual, dua lainnya masing-masing di atas 3. Jadi mereka tersebar di 12 kolom virtual secara total.
Mari kita lihat pada screenshot kiri bawah. Bentuknya sama, ukuran tampilannya lebih rendah. Elemen v-col pertama tersebar di 12 kolom virtual, dua lainnya masing-masing tersebar di 6 kolom. Jadi elemen v-row membutuhkan dua baris à 12 kolom virtual. Tangkapan layar kanan bawah menunjukkan bentuk yang sama dalam tampilan yang sangat kecil. v-row di sini membutuhkan tiga baris virtual dan masing-masing v-col tersebar di 12 kolom.
Pertanyaannya adalah — bagaimana saya bisa mendapatkan perilaku ini dari VuetifyJs? Untungnya ini adalah bagian yang mudah. Sederhananya seperti menulis jumlah kolom virtual ke dalam atribut breakpoint:
...
<v-row>
<v-col cols="12" md="6" lg="6" xl="6">
<v-text-field
label="Field R1C1"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3" lg="3" xl="3">
<v-text-field
label="Field R1C2"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3" lg="3" xl="3">
<v-text-field
label="Field R1C3"
></v-text-field>
</v-col>
</v-row>
...
/// @/components/ResponsiveForm.vue
Terdapat atribut breakpoint untuk setiap breakpoint Desain Material, kecuali xs. Yang ini tercakup dalam atribut default cols. Dengan sistem grid VuetifyJs, Anda dapat membuat tata letak responsif yang sangat kuat tanpa baris kode JavaScript apa pun.
Ukuran gambar responsif
Responsif gambar berasal dari kemampuannya memuat gambar terbaik dalam ukuran dan kualitas untuk perangkat. Untuk ini elemen img menawarkan atribut scrset dan sizes. Ada banyak sekali artikel bagus di web, jadi saya tidak akan menulis artikel lain. Pesan untuk pengguna VuetifyJs adalah: Kedua atribut ini juga ada di komponen v-img. Jadi Anda dapat menggunakan hal-hal responsif standar dengan fitur-fitur hebat seperti gambar pramuat lambat atau atribut contain.
... <v-img src="http://catify.de/.../village_1264.jpg" lazy-src="http://catify.de/.../village_blur.jpg" srcset="http://catify.de/.../village_600.jpg 600w, http://catify.de/.../village_960.jpg 960w, http://catify.de/.../village_1264.jpg 1264w, http://catify.de/.../village_1904.jpg 1904w, http://catify.de/.../village_2400.jpg 2400w" width="100%" ></v-img> ... /// @/components/ResponsiveImage.vue
Tipe Responsif- atau JavaScript
Untuk setiap keinginan dalam daya tanggap, yang tidak dipenuhi oleh VuetifyJ secara deklaratif, mereka memberikan objek breakpoint responsif kepada Anda. Ini dapat digunakan dalam properti komputasi, metode, atau hampir di mana pun dalam konteks VueJs:
this.$vuetify.breakpoint
Ini mendukung Anda dengan informasi tentang breakpoint saat ini, kondisional, dimensi, dll. Anda dapat melihat dokumentasi untuk lebih lanjut. Dalam contoh saya menggunakan objek ini, untuk beralih dari banyak ikon di bilah aplikasi ke ikon burger, untuk membuka menu tersembunyi. Ini cukup dilakukan dalam satu baris kode [1]:
<script lang="ts">
import Vue from 'vue'
import { Component } from "vue-property-decorator"
@Component
export default class ResponsiveActionIcons extends Vue {
get shrink() {
return this.$vuetify.breakpoint.smAndDown [1]
}
show() {
console.log("show menu...")
}
}
</script>
/// @/components/ResponsiveActionIcons.vue
Tamat
Anda dapat menemukan sumber sampel VuetifyJs responsif saya di repositori github. Saya harap Anda menikmati artikel ini. Silakan tinggalkan komentar jika Anda memiliki pertanyaan atau ingin memberikan tanggapan.
