4 parimat stiilita komponentide teeki kohandatavate reageerimisrakenduste loomiseks

Reacti rakenduste arendusprotsessi lihtsustamiseks saate kasutada komponentide teeke, mis pakuvad eelehitatud stiiliga elemente. Need teegid võivad säästa palju aega ja vaeva, kuid võivad piirata ka teie kontrolli oma rakenduse stiili üle. Kui vajate oma Reacti rakenduste stiili rohkem kontrolli, kaaluge stiilita komponentide teegi kasutamist.

Mis on stiilita komponentide teegid?

Stiilita komponent teeke kasutatakse juurdepääsetavate Reacti rakenduste arendamiseks. Need on korduvkasutatavate kasutajaliidese komponentide kogumid ilma eelmääratletud stiilideta. Need pakuvad teile kasutajaliidese elementide põhistruktuuri ilma igasuguse stiilita. See annab teile täieliku kontrolli selle üle, kuidas teie komponendid välja näevad ja tunnevad.

Stiilita komponentide teekide eelised

Siin on mõned stiilita komponenditeekide kasutamise eelised.

• Täielik kontroll stiili üle: Stiilita komponenditeegid annavad teile täieliku kontrolli selle üle, kuidas teie komponendid välja näevad. Komponentide kohandamiseks oma vajadustele vastavaks saate kasutada mis tahes CSS-i või stiiliraamistikku.
  instagram viewer
• Kiirendada arengut: Stiilita komponentide teegid võivad aidata teil arendust kiirendada, pakkudes eelnevalt koostatud komponentide komplekti, mida saate oma rakenduses kasutada.
• Lihtne hooldada: Stiilita komponentide teeke on lihtne hooldada, kuna need ei ole tihedalt seotud ühegi konkreetse stiiliraamistikuga. See tähendab, et saate stiili hõlpsalt värskendada ilma aluseks olevat koodi muutmata.

Radix UI on stiilita komponentide teek, mis keskendub juurdepääsetavusele. See pakub kasutajaliidese komponentide komplekti, mis on mõeldud kõigile kasutajatele juurdepääsetavaks. Sa saad looge Radixi kasutajaliidese abil kauneid Reacti rakendusi.

Radixi kasutajaliidesega töötades saate installida üksikud komponendid, mida vajate kogu teegi asemel. See tagab, et teie rakendus jääb kergeks.

Näiteks kui vajate ainult akordioni komponenti, saate selle oma rakendusse installida, käivitades järgmise käsu:

npm install @radix-ui/react-accordion

Pärast akordionikomponendi installimist saate oma Reacti rakenduses akordione luua.

Siin on näide akordioni komponendi kasutamisest:

import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return (


"single" defaultValue="item-1" collapsible>
"item-1">
Is this accordion unstyled?</Accordion.Trigger>
Yes. It is unstyled.</Accordion.Content>
 </Accordion.Item>
 </Accordion.Root>
 </div>
 )
}

Ülaltoodud koodiplokk seadistab põhilise stiilita akordionikomponendi, kasutades @radix-ui/react-accordion raamatukogu, mis võimaldab kohandatava sisuga kokkupandavaid üksusi.

Kood genereerib akordioni, mis näeb välja selline:

React Aria teek on konksude komplekt Reacti kasutajaliideste loomiseks. Teek muudab juurdepääsetavate veebirakenduste loomise lihtsamaks, pakkudes komponentide kogumit, mis järgib juurdepääsetavuse parimaid tavasid.

Adobe töötas välja ja haldab React Aria raamatukogu. Teek on osa ulatuslikumast Adobe Spectrum Design Systemist, mis pakub laiaulatuslikke disainijuhiseid ja ressursse juurdepääsetavate kasutajaliideste loomiseks. React Aria teegi pakutavad elemendid on stiilita, mis võimaldab teil elemente oma vajadustele vastavaks kohandada.

React Aria kasutamiseks oma Reacti rakenduses installige see, käivitades järgmise käsu:

npm install react-aria

Siin on näide selle kohta, kuidas luua nupukomponenti kasutades UseButton konks:

import React from'react'
import {useButton} from'react-aria';
functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (

 {props.children}
 </button>
 );
}
exportdefault Button;

Nüüd saate importida ja renderdada nuppu mis tahes muus teie valitud komponendis.

Näiteks:

import React from'react'
import Button from'./Button';
functionApp() {
return (
Click Me</Button>
 );
}
exportdefault App;

Kui renderdate ülaltoodud koodiploki, genereerib see lihtsa nupu, mis näeb välja järgmine:

Kui teil on React Aria kasutamine konksude tõttu ebamugav, kasutage Reageerige Aria komponentidele hoopis raamatukogu. See teek pakub eelehitatud komponente, mis on vaikimisi juurdepääsetavad. See on õhuke kiht React Aria raamatukogu peal. Pakutavad komponendid on stiilita, seega on need kaks teeki väga sarnased.

Põhikasutajaliides on stiilita React UI teek, mis pakub kasutajaliidese komponente ilma stiilita. Materjali kasutajaliidese meeskond lõi Base UI koos põhikomponentidega, mida saate kasutada oma kohandatud Reacti rakenduste loomiseks. Nad põhinesid Base UI teegil samal alusel materjali kasutajaliidesena vastupidav insener, kuid Base UI ei rakenda materjalidisaini.

Saate installida oma Reacti rakendusse Base UI selle käsuga:

npm install @mui/base

Põhikasutajaliides pakub komponente liikvel olles, mis tähendab, et saate komponente otse teegist importida ja kasutada. Samuti pakub see konkse, mida saate oma komponentide loomiseks ja konfigureerimiseks kasutada.

Siin on näide Base UI komponentide kasutamisest:

import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (


Click Me</Button>
 </div>
 );
}

See kood loob lihtsa nupu, kasutades Nupp Base UI teegi komponent. Võite kasutada ka UseButton konks sama ülesande täitmiseks.

import React from"react";
import useButton from"@mui/base/useButton";
exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (


Click Me</button>
 </div>
 );
}

The UseButton konks ja Nupp komponent genereerib stiilita nupu, nagu on näidatud alloleval pildil.

Teine teek, mida saate uurida, on Headless UI, mis pakub stiilita kasutajaliidese elemente, mis annab teile vabaduse kohandada oma kasutajaliidese komponentide välimust ja käitumist vastavalt oma äranägemisele.

Teegi saate installida järgmise käsuga:

npm install @headlessui/react

Pärast teegi installimist saate kasutada mitmeid komponente, mida teegi oma Reacti rakenduses pakub.

Näiteks:

import React from"react";
import { Popover } from"@headlessui/react";
exportdefaultfunctionApp() {
return (




Popover</Popover.Button>

This is a Popover</p>
 </Popover.Panel>
 </Popover>
 </div>
 );
}

Selles näites loote hüpikakna, kasutades Läbi astuma komponent peata kasutajaliidese teegist. Ülaltoodud koodiplokk genereerib hüpikakna, mis näeb välja selline.

Saate stiilita komponentidega täieliku kontrolli

Stiilita komponentide teegid annavad teile täieliku kontrolli oma Reacti rakenduse stiili üle, võimaldades teil luua ainulaadseid kasutuskogemusi. Need raamatukogud pakuvad teie vajadustele vastavaid valikuid. Ülaltoodud teeke kasutades saate luua visuaalselt atraktiivseid ja väga kohandatavaid Reacti rakendusi.