Hoppa till innehåll

Vaul är en ostylad drawer-komponent som är särskilt utformad för React-applikationer. Den fungerar som ett alternativ till dialoger och är optimerad för surfplattor och mobila enheter. Komponenten är byggd med flexibilitet i åtanke, så att utvecklare kan anpassa hur drawer-komponenten beter sig och ser ut i sina applikationer.

En av dess viktigaste funktioner är möjligheten att skala bakgrunden när drawer-komponenten öppnas, vilket ger användarna en mer omslutande upplevelse. Komponenten kan styras programmatiskt, så att utvecklare kan hantera dess öppna läge med Reacts tillståndshantering.

Vaul har ett enkelt API för integrering och tydligt definierade komponenter som Drawer.Root, Drawer.Trigger, Drawer.Content och Drawer.Overlay. Det ger en strukturerad grund när komponenten läggs till i applikationer. Biblioteket stöder flera funktioner, till exempel fästpunkter för bättre användarinteraktion, anpassningsbar placering av innehållet i drawer-komponenten och möjligheten att förhindra att den kan stängas.

Komponenten passar utvecklare som vill lägga till en responsiv drawer-funktion för mobila enheter utan begränsningarna hos stiliserade komponenter som kan krocka med applikationens designsystem.

För utförliga användningsexempel kan du utforska interaktiva demonstrationer på CodeSandbox. Där visas komponentens olika funktioner, till exempel rullningskontroller och anpassade fästpunkter.

Funktioner

  • Ostylad drawer-komponent
  • Optimerad för mobiler och surfplattor
  • Skalning av bakgrunden
  • Anpassningsbara fästpunkter
  • Programmatisk styrning av öppet läge
  • Stöd för nästlade drawer-komponenter
  • Flexibel placering av innehåll
  • Anpassad portal för rendering

Relaterade objekt

BaseUI

Headless React-komponenter utan fördefinierad stil för att bygga tillgängliga och mycket anpassningsbara gränssnitt med full kontroll över utseendet.

PrimeVue

Ett omfattande utbud av UI-komponenter med öppen källkod, särskilt utformade för att enkelt och effektivt bygga Vue.js-applikationer.

Radix Primitives

Ostilade, tillgängliga React-primitiver med öppen källkod för webbappar och designsystem av hög kvalitet.

ArkUI

Den här UI-lösningen med öppen källkod gör det möjligt att skapa avancerade designsystem med anpassningsbara komponenter som kan utformas för olika visuella stilar och tillgänglighetsstandarder.

ChakraUI

Skapa snabbt och effektivt tillgängliga webbapplikationer med en gedigen uppsättning viktiga komponenter som är enkla att använda och mycket anpassningsbara.

cmdk

Den här komponenten är en komplett lösning för kommandomenyer i React med fokus på både användarupplevelse och flexibilitet för utvecklare.

Docusaurus

Ett projekt som hjälper dig att enkelt skapa dokumentationswebbplatser med fokus på innehåll och användbarhet.

MagicUI

En mångsidig samling vackert utformade komponenter som förbättrar dina webbprojekt och effektiviserar designprocessen.