Siirry sisältöön

Vaul

Tyylittelemätön drawer-komponentti, joka integroituu saumattomasti React-sovelluksiin ja parantaa mobiililaitteiden käyttökokemusta.

Vaul on tyylittelemätön drawer-komponentti, joka on suunniteltu erityisesti React-sovelluksille. Se toimii dialogin vaihtoehtona ja on optimoitu tableteille ja mobiililaitteille. Komponentti on suunniteltu joustavaksi, joten kehittäjät voivat mukauttaa drawerin toimintaa ja ulkoasua sovelluksissaan.

Yksi sen keskeisistä ominaisuuksista on taustan skaalaaminen drawerin avautuessa, mikä luo käyttäjälle mukaansatempaavamman kokemuksen. Draweria voi ohjata ohjelmallisesti, joten kehittäjät voivat hallita sen avaamista ja sulkemista Reactin tilanhallinnan avulla.

Vaul tarjoaa helppokäyttöisen API:n integrointiin sekä selkeästi määritellyt komponentit, kuten Drawer.Root, Drawer.Trigger, Drawer.Content ja Drawer.Overlay. Ne auttavat pitämään sovellukseen lisättävän rakenteen selkeänä. Kirjasto tukee useita toimintoja, kuten käyttäjäkokemusta parantavia kiinnityspisteitä, drawerin säilön mukauttamista ja asetusta, joka estää sulkemisen.

Komponentti sopii kehittäjille, jotka haluavat lisätä responsiivisen, mobiiliystävällisen drawerin ilman tyyliteltyjen komponenttien rajoitteita tai ristiriitoja sovelluksen suunnittelujärjestelmän kanssa.

Kattavia käyttöesimerkkejä varten käyttäjät voivat tutustua CodeSandboxissa oleviin interaktiivisiin demoihin, jotka esittelevät komponentin eri ominaisuuksia, kuten vierityksen hallintaa ja mukautettuja kiinnityspisteitä.

Ominaisuudet

  • Tyylittelemätön drawer-komponentti
  • Optimoitu mobiililaitteille ja tableteille
  • Taustan skaalaus
  • Mukautettavat kiinnityspisteet
  • Avatun tilan ohjelmallinen hallinta
  • Tukee sisäkkäisiä drawereita
  • Sisällön joustava sijoittelu
  • Mukautettu portaali renderöintiin

Aiheeseen liittyvät kohteet

Päättömiä, tyylittelemättömiä React-komponentteja saavutettavien ja helposti mukautettavien käyttöliittymien rakentamiseen tyylien täydessä hallinnassa.

GitHub-tähdet
5.2K
Päivitetty
Aug 17, 2025
Lisenssi
MIT License

Laaja valikoima avoimen lähdekoodin UI-komponentteja, jotka on suunniteltu Vue.js-sovellusten rakentamiseen sujuvasti ja tehokkaasti.

GitHub-tähdet
11.0K
Päivitetty
Dec 6, 2024
Lisenssi
MIT License

Tyylittelemättömiä, saavutettavia ja avoimen lähdekoodin React-peruskomponentteja laadukkaisiin verkkosovelluksiin ja design-järjestelmiin.

GitHub-tähdet
16.0K
Päivitetty
Dec 6, 2024
Lisenssi
MIT License

Tämä avoimen lähdekoodin UI-ratkaisu mahdollistaa kehittyneiden suunnittelujärjestelmien luomisen mukautettavilla komponenteilla, jotka voidaan sovittaa erilaisiin visuaalisiin tyyleihin ja saavutettavuusstandardeihin.

GitHub-tähdet
3.9K
Päivitetty
Dec 6, 2024
Lisenssi
MIT License

Rakenna saavutettavia verkkosovelluksia nopeasti ja tehokkaasti vankalla valikoimalla olennaisia komponentteja, joita on helppo käyttää ja mukauttaa.

GitHub-tähdet
38.1K
Päivitetty
Dec 6, 2024
Lisenssi
MIT License

Tämä komponentti tarjoaa React-sovelluksille kattavan komentovalikkoratkaisun, jossa painotetaan sekä käyttökokemusta että kehittäjien joustavuutta.

GitHub-tähdet
10.0K
Päivitetty
Dec 6, 2024
Lisenssi
MIT License

Projekti, joka auttaa luomaan dokumentaatiosivustoja vaivattomasti ja keskittyy sisältöön ja käytettävyyteen.

GitHub-tähdet
57.0K
Päivitetty
Dec 6, 2024
Lisenssi
MIT License

Monipuolinen kokoelma kauniisti suunniteltuja komponentteja, jotka parantavat verkkoprojekteja ja sujuvoittavat suunnittelutyötä.

Tietoa KickstartUI:sta

KickstartUI on paras paikka löytää parhaat UI-kehykset, kirjastot ja rakennustyökalut. Kokoamme huolella laadukkaita resursseja, jotta kehittäjät voivat toteuttaa UI-ideansa. Rakennatpa responsiivista verkkosovellusta, suunnitteletpa mobiilikäyttöliittymää tai luot vuorovaikutteista prototyyppiä, alustamme tarjoaa olennaiset työkalut projektien vauhdittamiseen ja käyttökokemuksen parantamiseen. Tutustu laajaan kokoelmaamme, pysy ajan tasalla uusimmista suuntauksista, löydä uusia mahdollisuuksia ja vie UI-suunnittelusi uudelle tasolle. Oletko valmis käynnistämään seuraavan projektisi? Tutustu esiteltyihin resursseihin tai etsi tarpeisiisi sopivia työkaluja.