Mengenal Komponen Form Input Vuetify | Bagian 1

2
0
Deskripsi

Bagian pertama pengenalan komponen Vuetify ini akan membahas mengenai anatomi dan cara penggunaan komponen dari yang paling dasar. Contoh kode disertakan dan bisa diuji langsung tanpa perlu menginstall aplikasi. Yuk ikuti pembelajarannya.

Form input adalah komponen yang bisa digunakan untuk kolom inputan dari user. Misalnya form login biasanya terdiri dari inputan email dan password. Nah pada materi kali ini, kita akan mengenal beberapa form input (selanjutnya disebut komponen) yang tersedia di Vuetify.

Tujuan Pembelajaran

Memahami pembuatan inputan user menggunakan komponen yang disediakan oleh Vuetify serta memahami cara menggunakan atribut-atribut yang dimilikinya.

Komponen 

Text Field: v-text-field

Tool Uji Coba

Playground Vuetify yang dapat diakses melalui play.vuetifyjs.com.

Pembahasan

Text Field adalah komponen Vuetify yang dapat digunakan untuk mengumpulkan informasi dari pengguna seperti nama, email, password, dan lain sebagainya.

Komponen ini terdiri dari 6 (enam) bagian yaitu:

  • Container: bagian yang membungkus isi dari text field
  • prepend icon: icon kustom yang letaknya sebelum input
  • Prepend-inner icon: icon kustom yang letaknya di permulaan input
  • Label: teks yang digunakan untuk memberitahu user terkait input
  • Append-inner icon: icon kustom yang letaknya persis diakhir input
  • Append icon: icon kustom yang letaknya setelah input
post-image-65fdfc5fa70f6.png
Anatomi Text Field vuetify

Mulai dari nomor 2 sampai 6 bisa digunakan sekaligus atau beberapa bagian saja. jadi kita bisa menggunakan input dengan label saja, input dengan label dan satu icon, input dengan label dan 2 icon, atau lainnya. Tergantung kebutuhan kita.

Penggunaan Text Field

Contoh penggunaan textfield secara paling dasar adalah seperti di bawah ini:

<v-text-field label="Email"></v-text-field>

Jika ingin menambahkan icon kita bisa menggunakan prepend-icon="nama-icon", prepend-inner-icon="nama-icon", append-inner-icon="nama-icon", atau append-icon="nama-icon".

Contonya adalah sebagai berikut:

<v-text-field label="Email" prepend-icon="mdi-email"></v-text-field>

Vuetify secara resmi menggunakan icon dari Material Design Icon untuk menambahkan icon di Playground. Silahkan coba  contoh kode di atas menggunakan Playground Vuetify dan lihat hasilnya.

Mengubah Warna

Secara umum, komponen-komponen dalam Vuetify dapat diubah menggunakan properti color="kode-warna" atau color="nama-warna". Referensi warna yang bisa digunakan dalam Vuetify bisa diakse melalui halaman Material Color Pallete. Contoh penggunaannya adalah sebagai berikut:

<v-text-field label="Email" prepend-icon="mdi-email" color="pink-darken-4"></v-text-field>

Mengubah Ukuran Densitas

Komponen-komponen Vuetify secara umum memiliki 3 jenis densitas yaitu:  'default' | 'comfortable' | 'compact'. Contoh penggunaannya adalah sebagai berikut:

<v-text-field label="Email" prepend-icon="mdi-email" color="pink-darken-4" density="compact"></v-text-field>

Menambah Keterangan

Keterangan pada input bisa ditambah menggunakan properti hint="isi keterangan". Keterangan yang ditambahkan menggunakan hint akan muncul di bawah input ketika kursor sedang aktif didalamnya (diklik). Kalau kursor tidak aktif maka keterangan otomatis disembunyikan. Kalau ingin keterangannya selalu muncul maka kita bisa menambahkan properti persistent-hint. Contoh penggunaan hint sebagai berikut:

<v-text-field label="Email" prepend-icon="mdi-email" color="pink-darken-4" density="compact" hint="Silahkan tulis alamat email yang valid"></v-text-field>

Mengubah Varian

Komponen text field memiliki beberapa variant yaitu: | 'underlined'  | 'outlined'  | 'filled'  | 'solo'  | 'solo-inverted'  | 'solo-filled'  | 'plain'. Cara menggunakannya cukup menambahkan properti variant="nama-variant". Contoh:

<v-text-field label="Email" prepend-icon="mdi-email" color="pink-darken-4" density="compact" hint="Silahkan tulis alamat email yang valid" variant="outline"></v-text-field>

Sebetulnya masih banyak properti yang dapat digunakan untuk membuat text field sesuai kebutuhan kita seperti rounded, clearable, base-color, dan lain sebagainya. Namun pada materi kali ini kita cukupkan dulu pada properti-properti yang paling sering digunakan itu dulu. Nanti properti lainnya akan dibahas pada materi berikutnya secara bertahap.

Praktikum

Untuk menguji pemahaman dan mengasah kemampuan menggunakan komponen text field, cobalah buat dua buah form input dengan ketentuan sebagai berikut:

  • Sebuah input dengan label Email memiliki icon email (mdi-email). Input berwarna teal dengan varian outline.
  • Sebuah input dengan label Password memiliki icon gembok (mdi-lock). Input type password berwarna teal dengan varian outline.

Selamat mengerjakan.

Karya ini GRATIS! Tapi kamu boleh kok kasih tip biar kreator hepi 🥰

Selanjutnya Cara Memilih Calon Pasangan
0
0
Catatan pertama tentang bagaimana caranya menentukan kriteria dalam memilih calon pasangan. Cocok bagi jomblo yang ingin segera 👉👈
Apakah konten ini melanggar ketentuan yang berlaku sesuai syarat dan persetujuan? Laporkan