Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Če v aplikacijo React dodate izbirnik barv, lahko uporabniki veliko olajšajo odločanje o barvah, ki jih želijo uporabiti. Izbirniki barv so odlično orodje za uporabnike, ki delajo z grafično aplikacijo ali katero koli aplikacijo, ki podpira personalizacijo.

React-color knjižnica ponuja široko paleto možnosti in številne sloge izbirnika barv, ki ustrezajo vašim potrebam.

Dodajanje izbirnika barv vaši aplikaciji

Knjižnica barv React olajša dodajanje izbirnika barv vaši aplikaciji React. Ta knjižnica uporabnikom omogoča preprost in intuitiven način izbire barv za svoje aplikacije. Koda je preprosta za uporabo in zagotavlja odlično uporabniško izkušnjo. Preden dodate izbirnik barv, morate najprej ustvarite preprosto aplikacijo React.

Pregled React-color

Knjižnica barv react je odličen način za dodajanje izbirnika barv vaši aplikaciji React. Ponuja vmesnik, enostaven za uporabo, ki uporabnikom omogoča izbiro med široko paleto barv. Knjižnica ponuja tudi pripomočke, s katerimi lahko prilagodite izbirnik barv.

instagram viewer

Koda za dodajanje izbirnika barv vaši aplikaciji React je preprosta. Če želite uporabljati knjižnico React-color, morate najprej namestiti knjižnico z uporabo npm, upravitelj paketov za Node.js.

npm reagiram-barva

Nato preprosto dodajte naslednjo kodo komponenti, za katero želite prikazati izbirnik barv:

uvoz Reagiraj od'reagirati'
uvoz {SketchPicker} od'react-color'
razredKomponentase raztezaReagiraj.Komponenta{
 render() {
vrnitev<SketchPicker />
 }
}
izvozprivzeto Komponenta

Zgornja koda bo upodobila osnovni izbirnik barv. Uporabnikom bo omogočal izbiro med različnimi barvami. Izbirnik bo prikazal tudi HEX kodo izbrane barve, ki jo lahko uporabite v drugih delih vaše aplikacije.

Razpoložljivi rekviziti

Knjižnica react-color ponuja pripomočke za prilagajanje izbirnika barv. S temi pripomočki lahko spremenite velikost izbirnika, razpoložljive barve in še veliko več.

Spodaj so razpoložljivi pripomočki za izbirnik barv:

  • premer: širina izbirnika barv v slikovnih pikah.
  • višina: Višina izbirnika barv v slikovnih pikah.
  • barva: Začetna barva izbirnika.
  • onChange: funkcija povratnega klica, ki se zažene, ko se spremeni barva.
  • onChangeComplete: funkcija povratnega klica, ki se zažene, ko je sprememba barve končana.

Naslednja koda prikazuje, kako uporabiti vse razpoložljive rekvizite za izbirnik barv:

uvoz Reagiraj od'reagirati'
uvoz {SketchPicker} od'react-color'

razredKomponentase raztezaReagiraj.Komponenta{

 render() {
vrnitev (
 širina={200}
 višina={200}
 barva="#ff0000"
 onChange={(barva) => konzola.log (barva)}
 onChangeComplete={(barva, dogodek)=> konzola.log (barva)}
 />
 )
 }
}
izvozprivzeto Komponenta

Zgornja koda bo upodobila izbirnik barv s širino 200 slikovnih pik, višino 200 slikovnih pik, začetno barvo #ff0000 in paleto barv. Prikazalo se bo tudi polje za vnos barvne kode in prikazan kanal alfa. Ko se barva spremeni, bo poklical povratni klic onChange in novo barvo zabeležil v konzolo.

Dodajanje dodatnih izbirnikov barv

Knjižnica react-color ponuja vrsto različnih izbirnikov barv, med katerimi lahko izbirate, poleg SketchPickerja, uporabljenega v zadnjem razdelku, pa lahko uporabite tudi ChromePicker.

Uvozite ChromePicker na enak način, kot ste uvozili SketchPicker:

uvoz { ChromePicker } od'react-color';

Ko uvozite ChromePicker, ga lahko uporabite v svoji aplikaciji tako, da dodate to kodo:

 barva={ to.state.ozadje }
 onChangeComplete={ to.handleChangeComplete }
 disableAlpha={prav}
/>

ChromePicker uporablja iste pripomočke kot SketchPicker, vendar ima tudi nekaj dodatnih možnosti, kot je možnost onemogočanja kanala alfa, kar lahko storite s predlogom disableAlpha. Barvo lahko nastavite tudi neposredno z barvnim pripomočkom.

V knjižnici reakcijskih barv so na voljo tudi drugi izbirniki barv, kot so Block, Twitter in GitHub. Vsak od teh izbirnikov ima svoje pripomočke, zato za več informacij preverite dokumentacijo.

Izboljšajte svojo uporabniško izkušnjo z izbirnikom barv

Dodajanje izbirnika barv vaši aplikaciji React je odličen način za izboljšanje uporabniške izkušnje. Uporabnikom omogoča hitro in preprosto izbiro barv za njihove aplikacije. Izbirnik barv lahko naredite tudi uporabniku prijaznejši z uporabo Tailwind CSS.