Cara Membuat Hover Card Menggunakan shadcn-ui

Hallo, temen-temen developer web. Dalam artikel ini, kita akan membahas langkah demi langkah tentang bagaimana membuat hover card menggunakan shadcn-ui. Mulai dari instalasi hingga penggunaan komponen hover card.

Dengan hover card, pengguna bisa melihat informasi tambahan atau detail tentang suatu item hanya dengan mengarahkan kursor mouse ke atasnya. Misalnya, saat kamu me-navigasi ke gambar produk di toko online, hover card bisa menampilkan detail harga, ulasan, dan opsi pembelian tanpa harus mengklik lebih lanjut.

Buat kamu yang belum melakukan instalasi shadcn-ui di Proyek, kamu bisa melakukan instalasi terlebih dahulu pada artikel sebelumnya, yaitu "Cara Install shadcn-ui Pada Project Next JS".

Instalasi Hover Card

Agar kita bisa menggunakan hover card, kita harus meng-install-nya terlebih dahulu komponen hover card. Kamu bisa jalankan teks di bawah ini menggunakan terminal:

npx shadcn-ui@latest add hover-card

Jika sudah berhasil di-install maka otomatis akan generate folder baru bernama components\ui dan berisikan file bernama hover-card.tsx seperti gambar di bawah ini:

Jika sudah seperti gambar di atas maka instalasi sudah selesai.

Penggunaan Komponen Hover Card

Sekarang saatnya kita bahas bagaimana menggunakan hover card dari shadcn-ui. Ketika kamu sudah berhasil meng-install-nya, langkah berikutnya adalah memulai penggunaannya.

1. Langkah Pertama: Import Semua Komponen Hover Card

Jika kamu menggunakan Next JS versi App Router, kamu bisa memulai dari file page.tsx . Lalu import semua komponen dari hover card, kamu bisa copy dan paste kode di bawah ini dan simpan paling atas:

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

Sebelum kita menggunakan komponennya, mari kita bahas terlebih dahulu komponen HoverCard , HoverCardContent , dan HoverCardTrigger :

• HoverCard: Kamu bisa memikirkan HoverCard sebagai wadah untuk semua informasi atau konten tambahan yang ingin kamu tampilkan kepada pengguna saat mereka melakukan hover.
• HoverCardContent: HoverCardContent adalah bagian dari HoverCard yang berisi konten tambahan atau informasi yang ingin kamu tampilkan kepada pengguna. Ini bisa berupa teks, gambar, atau bahkan kombinasi keduanya. Isi HoverCardContent akan muncul ketika pengguna mengarahkan kursor mouse ke HoverCard.
• HoverCardTrigger: HoverCardTrigger adalah elemen yang memicu atau mengaktifkan tampilan HoverCardContent saat pengguna melakukan hover di atasnya.

Sudah pahamkan? Mari kita lanjut ke penggunaan🔥

2. Langkah Kedua: Gunakan Komponen Hover Card

Setelah kita import semua komponen hover card, selanjutnya adalah menggunakan komponen tersebut ke dalam user interface. Silahkan kamu copy kode di bawah:

export default function Home() {
  return (
    <main className="h-screen w-full flex flex-col justify-center items-center">
      <HoverCard>
        <HoverCardTrigger>What Is BuildWithAngga?</HoverCardTrigger>
        <HoverCardContent>
         
        </HoverCardContent>
      </HoverCard>

    </main>
  )
}

Pada kode di atas kita telah menggunakan komponen dari hover card dan hanya baru mengisikan komponen tag <HoverCardTrigger> </HoverCardTrigger>

3. Langkah Ketiga: Buat Konten Hover Card

Selanjutnya adalah kita harus membuat konten hover card di dalam tag <HoverCardContent></HoverCardContent> . Kamu bisa copy kode di bawah ini:

<div className="flex space-x-4 p-4">
    <img src="<https://buildwithangga.com/themes/front/images/logo_bwa_new.svg>" className="w-[60px] h-[60px]" alt="logo" />
    <div>
       <h6 className="font-semibold text-sm mb-1">BuildWithAngga</h6>
       <p className="text-sm text-muted-foreground">BuildWithAngga menyediakan kelas UI/UX design, Web Development, dan Freelancer untuk pemula.</p>
    </div>
</div>

Berikut review sebuah gambar dari hasil kode di atas:

Penutup

Hover card memiliki keunggulan yang memungkinkan pengguna untuk melihat informasi tambahan dengan cepat tanpa harus meninggalkan halaman. Selain itu, hover card juga membantu mengatur tata letak halaman dengan cara yang lebih estetis dan efisien, memastikan informasi penting tetap terlihat namun tidak mengganggu pengalaman pengguna secara keseluruhan.

Nah, begitulah cara kamu bisa membuat hover card menggunakan shadcn-ui! Gimana, gampang kan? Dengan langkah-langkah yang udah kamu ikuti tadi, sekarang kamu udah bisa bikin situs web-mu makin keren dengan hover card yang interaktif.

Buat kamu yang ingin tidak sabar menjadi expert! Di BuildWithAngga telah menyediakan kelas-kelas berupa project base dari yang gratis hingga berbayar!. Yang dimana kamu akan mendapatkan materi-materi yang belum pernah kamu pelajari dan bisa dijadikan sebuah portfolio. Jika kamu ingin tau bagaimana cara membuat website Job Portal, langsung saja cek Kelas Online Full-Stack JavaScript Next JS Developer: Build Job Portal Website.

So, ayo kita menjadi expert bersama BuildWithAngga🚀

See you guys!