Lewati ke konten

Vaul adalah komponen drawer tanpa gaya bawaan yang dirancang khusus untuk aplikasi React. Komponen ini berfungsi sebagai pengganti dialog dan dioptimalkan untuk digunakan pada tablet dan perangkat seluler. Komponen ini dibuat agar fleksibel, sehingga developer dapat menyesuaikan perilaku dan tampilan drawer di aplikasi mereka.

Salah satu fitur utamanya adalah kemampuan untuk memperbesar latar belakang saat drawer dibuka, sehingga menciptakan pengalaman yang lebih imersif bagi pengguna. Drawer dapat dikendalikan secara terprogram, sehingga developer dapat mengatur status terbukanya melalui pengelolaan state React.

Vaul menyediakan API yang sederhana untuk integrasi, dengan komponen yang jelas seperti Drawer.Root, Drawer.Trigger, Drawer.Content, dan Drawer.Overlay, sehingga strukturnya tertata saat digunakan dalam aplikasi. Pustaka ini mendukung berbagai fungsi, seperti titik snap untuk meningkatkan interaksi pengguna, kustomisasi wadah drawer, dan opsi agar drawer tidak dapat ditutup.

Komponen ini ideal bagi developer yang ingin menerapkan fitur drawer responsif dan ramah perangkat seluler tanpa batasan komponen bergaya yang dapat berbenturan dengan sistem desain aplikasi mereka.

Untuk contoh penggunaan yang lengkap, pengguna dapat menjelajahi demo interaktif di CodeSandbox yang menampilkan berbagai fitur komponen, seperti kontrol gulir dan titik snap kustom.

Fitur

  • Komponen drawer tanpa gaya bawaan
  • Dioptimalkan untuk perangkat seluler dan tablet
  • Skala latar belakang
  • Titik snap yang dapat disesuaikan
  • Kontrol terprogram atas status terbuka
  • Mendukung drawer bertingkat
  • Penempatan konten yang fleksibel
  • Portal kustom untuk rendering

Item Terkait

BaseUI

Komponen React tanpa headless dan tanpa gaya bawaan untuk membangun antarmuka yang aksesibel dan sangat mudah disesuaikan dengan kendali penuh atas gaya.

PrimeVue

Kumpulan komponen UI open source yang kaya, dirancang untuk membangun aplikasi Vue.js dengan lancar dan efisien.

Radix Primitives

Primitif React open source yang aksesibel dan tanpa gaya untuk aplikasi web serta sistem desain berkualitas tinggi.

ArkUI

Solusi UI open source ini memungkinkan pembuatan sistem desain canggih menggunakan komponen yang dapat disesuaikan dengan berbagai gaya visual dan standar aksesibilitas.

ChakraUI

Buat aplikasi web yang aksesibel dengan cepat dan efisien menggunakan rangkaian komponen penting yang andal, mudah digunakan, dan sangat mudah disesuaikan.

cmdk

Komponen ini menyediakan solusi menu perintah yang lengkap untuk React, dengan fokus pada pengalaman pengguna dan fleksibilitas developer.

Docusaurus

Proyek untuk membantu membuat situs dokumentasi dengan mudah, dengan fokus pada konten dan kemudahan penggunaan.

MagicUI

Kumpulan komponen serbaguna dengan desain indah untuk menyempurnakan proyek web dan menyederhanakan proses desain Anda.