Vuetify: Meletakkan v-card di Tengah Secara Horizontal & Vertikal

v-card yang diletakkan di tengah secara horizontal maupun vertikal bisa digunakan untuk berbagai keperluan. Salah satu contohnya adalah untuk membuat form register atau login. Nah! pada artikel kali ini, contoh yang dibuat adalah form untuk berlangganan artikel di Nusagates. Yuk langsung saja lihat cara pembuatannya.

Prasyarat Artikel

Uji coba yang dilakukan pada artikel ini menggunakan bahan dasar sebagi berikut:

• Vue.js 3.4.21
• Vuetify 3.5.9
• Playground Vuetify yang bisa diakses melalui link play.vuetifyjs.com

Meletakkan v-card di Tengah Layar

Menempatkan suatu komponen di tengah-tengah layar secara horizontal maupun vertikal di Vuetify sangatlah mudah. Hanya dengan menambahkan class yang telah di sediakan pada komponen yang kita buat itu. Dua class yang kita butuhkan adalah sebagai berikut:

• mx-auto untuk membuat komponen ditempatkan di tengah-tengah secara horizontal
• my-auto untuk membuat komponen ditempatkan di tengah-tengah secara vertikal

Lihatlah contoh kode di bawah ini untuk menempatkan v-card di tengah-tengah layar secara horizontal dan vertikal.

<template>
  <v-app>
    <v-card class="mx-auto my-auto" title="Free Article" width="350">
      <v-card-text>
        <span v-text="msg" />
        <v-text-field prepend-icon="mdi-email" class="my-2" density="compact" label="Email" />
        <v-btn>Langganan</v-btn>
      </v-card-text>
    </v-card>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('Hello, Nusagates Lover! Mau dapat pembaruan artikel menarik secara berkala dari Nusagates?')
</script>

Hasil dari kode di atas bisa dilihat pada gambar andalan artikel ini. Kamu bisa juga langsung copas kode di atas ke Playground Vuetify untuk melihat langsung hasilnya.