Gå til indhold

Vaul

En drawer-komponent uden indbygget styling, der er skræddersyet til problemfri integration i React-applikationer og forbedrer interaktionen på mobilenheder.

Vaul er en drawer-komponent uden indbygget styling, der er udviklet specifikt til React-applikationer. Den fungerer som et alternativ til dialoger og er optimeret til tablets og mobilenheder. Komponenten er designet med fleksibilitet for øje, så udviklere kan tilpasse, hvordan drawer-komponenten opfører sig og ser ud i deres applikationer.

En af dens vigtigste funktioner er muligheden for at skalere baggrunden, når drawer-komponenten åbnes, hvilket skaber en mere medrivende brugeroplevelse. Drawer-komponenten kan styres programmatisk, så udviklere kan styre dens åbne tilstand via React's tilstandsstyring.

Vaul har et enkelt API til integration med tydeligt definerede komponenter som Drawer.Root, Drawer.Trigger, Drawer.Content og Drawer.Overlay, der giver en overskuelig struktur, når det indarbejdes i applikationer. Biblioteket understøtter forskellige funktioner som fastgørelsespunkter for bedre brugerinteraktion, tilpasning af drawer-komponentens container og indstillinger, der forhindrer, at den kan lukkes.

Denne komponent er ideel til udviklere, der vil implementere en responsiv, mobilvenlig drawer-funktion uden begrænsningerne fra komponenter med indbygget styling, som kan kollidere med applikationens designsystem.

Du kan se en række interaktive demoer på CodeSandbox for at få omfattende eksempler på brugen. De viser komponentens forskellige funktioner, såsom rullekontroller og brugerdefinerede fastgørelsespunkter.

Funktioner

  • Drawer-komponent uden indbygget styling
  • Optimeret til mobil og tablet
  • Skalering af baggrunden
  • Brugerdefinerede fastgørelsespunkter
  • Programmatisk styring af åben tilstand
  • Understøtter indlejrede drawer-komponenter
  • Fleksibel placering af indhold
  • Brugerdefineret portal til rendering

Relaterede elementer

Headless React-komponenter uden styling, så du kan bygge tilgængelige og meget tilpasselige grænseflader med fuld kontrol over udseendet.

GitHub-stjerner
5.2K
Opdateret
Aug 17, 2025
Licens
MIT License

Et omfattende sæt open source-UI-komponenter, der gør det nemt og effektivt at bygge Vue.js-applikationer.

GitHub-stjerner
11.0K
Opdateret
Dec 6, 2024
Licens
MIT License

Ustylede, tilgængelige React-primitiver med open source til webapps og designsystemer i høj kvalitet.

GitHub-stjerner
16.0K
Opdateret
Dec 6, 2024
Licens
MIT License

Denne open source-UI-løsning gør det muligt at skabe avancerede designsystemer med komponenter, der kan tilpasses forskellige visuelle stilarter og tilgængelighedsstandarder.

GitHub-stjerner
3.9K
Opdateret
Dec 6, 2024
Licens
MIT License

Byg hurtigt og effektivt tilgængelige webapplikationer med et solidt udvalg af essentielle komponenter, der er nemme at bruge og meget tilpasselige.

GitHub-stjerner
38.1K
Opdateret
Dec 6, 2024
Licens
MIT License

Denne komponent er en komplet løsning til kommandomenuer i React med fokus på både brugeroplevelse og fleksibilitet for udviklere.

GitHub-stjerner
10.0K
Opdateret
Dec 6, 2024
Licens
MIT License

Et projekt, der gør det nemt at oprette dokumentationswebsteder med fokus på indhold og brugervenlighed.

GitHub-stjerner
57.0K
Opdateret
Dec 6, 2024
Licens
MIT License

En alsidig samling smukt designede komponenter, der forbedrer dine webprojekter og effektiviserer din designproces.

Om KickstartUI

KickstartUI er det oplagte sted at finde de bedste UI-frameworks, biblioteker og buildværktøjer. Vi udvælger omhyggeligt førsteklasses ressourcer, der hjælper udviklere med at gøre deres UI-idéer til virkelighed. Uanset om du bygger en responsiv webapp, udformer en mobilgrænseflade eller designer en interaktiv prototype, tilbyder vores platform de nødvendige værktøjer til at sætte fart på dine projekter og forbedre brugeroplevelsen. Udforsk vores omfattende samling for at følge med i de nyeste tendenser, åbne op for nye muligheder og løfte dine UI-designs. Klar til at kickstarte dit næste projekt? Gå på opdagelse i vores udvalgte ressourcer, eller søg efter værktøjer, der passer til dine behov.