20 ir daugiau geriausių „React“ UI komponentų bibliotekų / rėmelių 2020 metams

Geriausios „React“ UI komponentų bibliotekos / rėmai


Šiame šaltinyje mes ieškome geriausios „React“ vartotojo sąsajos komponentų bibliotekos ir rėmai, kuriuos galima rasti žiniatinklyje. Bet pirma:

Kas yra reaguoti?

„React“ yra atvirojo kodo „JavaScript“ biblioteka, kuri padeda sukurti aukščiausią sąsają tiek žiniatinkliui, tiek programoms mobiliesiems. Jis patogiai derinamas su kitomis „JavaScript“ sistemomis ir bibliotekomis, jame yra maža, atskira kodo dalis, vadinama komponentais. Būtent šie komponentai bus dėmesio centre šiuose šaltiniuose.

Puiku, kad komponentai yra tai, kad jie yra moduliniai ir neturi daug konkrečių programų priklausomybių. Tai reiškia, kad jūs turite pakartotinai naudoti komponentus, kad sukurtumėte nepaprastas programas ir sąsajas. Ir ačiū Šiek tiek, galite jais pasidalyti ir su kitais „React“ entuziastais.

Prieš pradėdami kitą projektą su „React“, skirkite keletą minučių ir nuskaitykite šį geriausių „React“ vartotojo sąsajos komponentų bibliotekų sąrašą, kuris gali padėti sukurti nuostabiai atrodančią vartotojo sąsają..

Geriausios „React“ UI komponentų bibliotekos ir rėmai 2020 m

Medžiagų rinkinys Reaguoti

UI komponentų bibliotekos: Medžiagų rinkinys

Sukurtas įkvėptas „Google“ medžiagos dizaino, „Material Kit React“ sukuria elementų, kurie kaip pagrindinė savybė yra nuoseklumas, rinkinį. Tokiu būdu jūsų žiniatinklio projektas išlieka panašus į savo išvaizdą ir funkciją.

Bendras išdėstymas primena kelis popieriaus lapus. Tai suteikia maketų gylį ir tvarką. Pateikti trys pavyzdžių puslapiai. Šie puslapiai ne tik iliustruos, kas įmanoma naudojant šį rinkinį, bet ir naudojami kaip šablonai, kuriuose tekstą ir vaizdus galite pakeisti savo.

Rinkinyje taip pat yra keletas pagrindinių elementų, tokių kaip mygtukai, ženkleliai, slankmačiai, meniu, puslapiai, naršymo juostos, skirtukai ir tabletės. Galėsite pritaikyti daugumos elementų stilių, dydį ir spalvą. „JavaScript“ elementus sudaro moduliai, patarimai, datos rinkiklis, karuselės ir popoveriai. Galite ne tik naudoti rinkinį naujam projektui pradėti, bet ir galite pertvarkyti bet kurį seną „Bootstrap“ projektą. Medžiagų rinkinys reaguoja Pro versija yra daug daugiau komponentų, skyrių ir pavyzdžių puslapių.

Skruzdžių dizainas reaguoti

Skruzdžių dizainas reaguoti

Ši „React“ vartotojo sąsajos biblioteka yra verslo lygio produktų projektavimo sistema. Tai pagrįsta Skruzdžių dizainas projektą, kuriame yra aukštos kokybės komponentų ir demonstracinių versijų rinkinys, skirtas turtingoms, interaktyvioms vartotojo sąsajoms kurti. Komponentai apima internacionalizacijos palaikymą kelioms kalboms.

Jūs taip pat turite galimybę tinkinkite komponentus prie savo dizaino specifikacijų. „Ant Design“ savo stiliaus kalba naudoja „Less.js“. Skruzdžių dizainas komponentai apima mygtukus, piktogramas, tinklelius, informacijos rinkinį, išskleidžiamuosius meniu, puslapius ir dar daugiau.

Projekte yra beveik 60 tūkstančių žvaigždžių „GitHub“, todėl jis yra labai populiarus tarp kūrėjų.

Reaguoti administratorius

„React“ UI komponentų bibliotekos: „React Admin“

Ši biblioteka tinka kurti verslų verslui (B2B) administratoriaus programas ant REST / GraphQL API ir yra pritaikoma pagal dizainą. Jis sukurtas kartu su daugeliu gerai žinomų projektų, be „React“: Medžiagos vartotojo sąsaja, „React Router“, „Redux“ ir „React“ galutinė forma. Pastarasis yra populiarus valstybės valdymo sprendimas.

Be nemokamos versijos ir jo komponentai, taip pat yra įmonės sprendimas. Verslo sprendimas apima „Marmelab“ (kūrėjų) palaikymą ir prieigą prie privačių modulių.

„React Admin“ gali pasigirti maždaug 12 000 žvaigždžių „GitHub“, ir yra aktyviai prižiūrimas.

Shards reaguoti

Reaguoti UI komponentų bibliotekos: skaldos

„Shards React“ yra atviro kodo, modernus „React“ vartotojo sąsajos rinkinys, sukurtas nuo nulio ir skirtas greitam veikimui. Moderni dizaino sistema leidžia pakeisti daugelį dalykų. Be to, galite atsisiųsti šaltinio failus, kad pakeistumėte reikalus ir kodo lygiu. Stiliui naudojamas SCSS tik pagerina kūrėjų patirtį.

Ši biblioteka yra pagrįsta Šarkos, ir naudoja Reaguoti „Datepicker“Reaguokite į Popperį (padėties nustatymo variklis) ir „noUIShlider“. Tai palaiko „Material“ ir „Fontawesome“ piktogramas. „Shards Pro“ pakete yra 15 paruoštų puslapių, kurie padės jums pradėti. Naudinga, kad šiuose puslapiuose naudojami blokai, kuriais galite judėti.

Su ~ 270 žvaigždžių „GitHub“, jame taip pat yra dešimtys pasirinktinių „React“ komponentų, tokių kaip diapazono slankikliai ir perjungimo įėjimai. 350+ komponentai užtikrina, kad su Shards React galite sukurti beveik visų tipų svetaines.

Medžiaga-UI

Reaguoti vartotojo sąsajos komponentų bibliotekos ir rėmai - medžiagos vartotojo sąsaja

Su didžiulėmis 55 000 žvaigždžių „GitHub“, „Material-UI“ patenka tarp populiariausių „React“ UI komponentų bibliotekų. Komponentai priklauso nuo reagavimo, tačiau jie naudojami „Google“ medžiagoje. Tiems iš jūsų, kuriems reikia užpildyti, medžiagos dizainas semiasi įkvėpimo iš fizinio pasaulio ir faktūrų, išlaikant minimalius faktinius UI elementus..

Galimas platus naudingų komponentų asortimentas, pvz., Programų juostos, automatinis užbaigimas, ženkleliai, mygtukai, kortelės, dialogo langai, piktogramos, meniu, skaidrės ir dar daugiau. Naudinga, kad „Material-UI“ taip pat siūlo reaguoti temas ir šablonus, kad galėtumėte naudoti pasirinktinę spalvų temą savo programai.

Reaguoti „Bootstrap“

reaguoti-įkrovos

Kitas mūsų „React“ UI komponentų bibliotekų sąraše yra „React Bootstrap“, UI rinkinys, išlaikantis „Bootstrap“ branduolį. Kad galėtumėte geriau valdyti kiekvieno komponento formą ir funkcijas, jis pakeičia „Bootstrap“ „JavaScript“ į „React“. Kiekvienas komponentas yra pastatytas taip, kad būtų lengvai prieinamas, svarbus kuriant fasado rėmus.

Kadangi „React Bootstrap“ labai nesiskiria nuo „Bootstrap“ ištakų, kūrėjai gali pasirinkti iš tūkstančių lengvai prieinamų „Bootstrap“ temų. Tai uždirbo daugiau nei 14500 žvaigždžių „GitHub“.

Reaguokite virtualiai

reaguoti - virtualizuotas

Kuriate daug informacijos reikalaujančią fasadą? „Re reaguoti virtualizuota“ gali būti biblioteka, į kurią reikia pasinerti. Tai apima daugybę komponentų, skirtų efektyviai atkurti didelius sąrašus, lenteles ir tinklelius. Pvz., Rasite mūro, kolonų, automatinių keitiklių, krypčių rūšiavimo, langų slinkties ir dar daugiau. Be to, lenteles galite tinkinti konfigūruodami eilučių aukštį ir langeliuose pateikdami vietos žymeklius.

Be to, „React Virtualized“ turi labai mažai priklausomybių ir palaiko standartines naršykles, įskaitant naujausias mobiliųjų įrenginių „iOS“ ir „Android“ naršykles. Jame yra daugiau nei 18 000 žvaigždžių „GitHub“.

Reaguoja argono projektavimo sistema

UI komponentų bibliotekos: Argon Design System React

Ši biblioteka siūlo nemokamą „Bootstrap 4“, „React“ ir „Reactstrap“ projektavimo sistemą. Komplekte yra 100 modernių ir puošnių elementų, kurie įdiegti į visiškai funkcionuojantį kodą, todėl be pastangų galite perjungti iš puslapio į tikrąją svetainę..

„Argon“ dizaino sistema siūlo iš anksto sukurti pavyzdžių puslapiai ir daugybė variantų visiems komponentams, tokiems kaip spalvos, stilius, užvedimas ir fokusavimas.

Nusižiūrėkite į visas komponentų rinkinys, kuriame yra pagrindiniai elementai, tipografija, naršymo juostos, perspėjimai, vaizdai, piktogramos, „Javascript“ komponentai ir dar daugiau.

Techninis piešinys

blueprintjs

Projekto „React“ komponentai visų pirma skirti naudoti darbalaukio programose. Šie komponentai ypač tinkami kuriant sudėtingas ir duomenų tankesnes sąsajas. Iš komponentų bibliotekos galite pasiimti kodo bitus piktogramų generavimui ir rodymui, sąveikai su datomis ir laikais, laiko juostų pasirinkimui ir dar daugiau.

Kas dar yra šioje komponentų bibliotekoje? Labai daug – bandelės, mygtukai, figūrinės išnašos, kortelės, daliklis, naršymo juostos, skirtukai, žymės ir daug daugiau. Įjungta „GitHub“, jis susisieja su daugiau nei 15 000 žvaigždžių.

Galbūt jus taip pat domina šie straipsniai:

  • Nemokami reaguoti vietiniai programų kūrimo šablonai
  • Geriausi kampiniai administratoriaus prietaisų skydelio šablonai

Semantinis UI reagavimas

Reaguoti UI komponentų bibliotekos: semantinis-ui

Semantinė vartotojo sąsaja savo vystymosi sistemai naudoja žmonėms patogų HTML ir yra integruota su „React“, „Angular“, „Meteor“, „Ember“ ir daugeliu kitų schemų. Visos „jQuery“ funkcijos buvo iš naujo įdiegtos „React“.

Tai leidžia įkelti bet kokią „Semantic UI CSS“ temą ant „Semantic UI React“ programos. Be to, jūs taip pat turėsite visišką prieigą prie žymėjimo, o tai reiškia, kad tinkinti komponentus galite lanksčiai. Tai tikėtina žvaigždė „GitHub“ yra daugiau nei 11 000.

Reaguoti į įrankių dėžę

reaguoti-įrankių dėžė

Kita „React“ UI komponentų biblioteka, kurią galite naudoti įgyvendindami „Google“ medžiagų projektavimo principus savo projekte, yra „React“ įrankių dėžė. „React Toolbox“ pasikliauja CSS moduliai šiam tikslui. Nors galite naudoti bet kurį modulio rinkinį, jis tinkamai integruojamas į internetinė pakuotė darbo eiga. Galvoju, kad „React Toolbox“ komanda lankytojams teikia naršyklės redaktorių, kuriame galite eksperimentuoti su komponentais realiuoju laiku.

Dirbdami su „React Toolbox“, galite pasirinkti importuoti komponentus į paketus arba neapdorotus komponentus. Skirtumas yra tas, kad pirmieji komponentai turi visas būtinas priklausomybes ir temas, įvestas jums. Tai reiškia, kad kiekvienos priklausomybės CSS bus automatiškai prieinama jūsų galutinėje CSS. Priešingai, su neapdorotais komponentais CSS neįtraukta. Tai reiškia, kad turite tinkamai parinkti komponentą, naudodami ypatybes. „React Toolbox“ yra daugiau nei 8000 žvaigždžių „GitHub“.

Reaguoti darbalaukį

Reaguoti UI komponentų bibliotekos: reaguoti darbalaukyje

Kita mūsų komponentų biblioteka, „React Desktop“, naudoja „macOS“, „Sierra“ ir „Windows 10“ komponentus, siekdama suteikti žiniatinklio darbalaukyje savo patirtį.

Ši kolekcija yra „JavaScript“ biblioteka, pastatyta viršuje „Facebook“ reakcija biblioteką ir ji yra suderinama su bet kuriuo „JavaScript“ pagrindu sukurtu projektu. Šis įrankis viršija 8 000 žvaigždučių įvertinimą „GitHub“.

Onsen UI

onsen-ui

Jei ketinate kurti kelių platformų programas mobiliesiems, domėsitės šiuo pasiūlymu mūsų „React“ UI komponentų bibliotekų sąraše. „Onsen“ sąsaja yra mobiliųjų programų kūrimo sistema, naudojanti HTML5 ir „JavaScript“ ir teikianti integraciją su „Angular“, „Vue.js“ ir „React“. Visi komponentai yra sukurti automatiškai pagal platformą, todėl jis palaiko ir „iOS“, ir „Android“ naudojant tą patį šaltinio kodą.

„Onsen UI“ suderinama su daugeliu populiarių „React“ sistemų. Interaktyvus vadovėlis padės jums gerai pradėti naudotis šiuo įrankiu. Komponentų bibliotekoje naudojama gryna CSS be „JavaScript“ elgesio. Dėl kai kurių papildomų detalių padės pritaikyti elementai. Žvaigždė tiki „GitHub“ viršija 7800.

Evergreen

Reaguoti UI komponentų bibliotekos: visžalis

„Evergreen“ yra „React“ komponentų rinkinys, tinkantis verslo klasės interneto programoms. Kadangi naudoja Reaguokite primityviai, jis yra labai lankstus. Tuo pačiu metu jis veikia taip pat lengvai ir tiesiai iš dėžutės.

Tai apima platų komponentų ir įrankių spektrą, pradedant nuo pagrindinio išdėstymo, tipografijos, spalvų ir piktogramų, baigiant funkcijomis pagrįstais komponentais, tokiais kaip išskleidžiamieji meniu, perjungimai, failų įkėlimas ir grįžtamojo ryšio rodikliai. Įdiegę „Evergreen“ paketą, galite pasirinkti komponentus, kuriuos norite importuoti. Šiuo metu jame yra daugiau nei 9 000 žvaigždžių „GitHub“.

„Reactstrap“

reaktyvinis gaudyklė

Jei norite sužinoti apie paprastus „React Bootstrap 4“ komponentus, patikrinkite „Reactstrap“. Kartu pateikiamos dvi pagrindinės platinimo versijos. Viena, pagrindinė versija, neįtraukianti pasirenkamų priklausomybių. Tai suteikia daugiau lankstumo konfigūruojant reikalingas priklausomybes.

Antroji versija yra pilna versija, apimanti visas pasirenkamas priklausomybes. Tai rekomenduojama naudoti mažesnėms programoms. „Reactstrap“ yra dar viena kolekcija „React“ vartotojo sąsajos komponentų bibliotekoje, peržengianti 8700 žvaigždės ženklą „GitHub“.

Rebasas

Reaguoti UI komponentų bibliotekos: rebass

„Rebass“ yra tik aštuoni pagrindiniai komponentai, visi labai mažame faile. Komponentai yra išplečiami ir keičiami bei sukurti reaguojant į žiniatinklio dizainą.

Komponentams naudojama stiliaus sistema ir jie yra puikus atspirties taškas plėtojant jūsų programos UI komponentus. „ThemeProvider“ taip pat gali jums padėti. Žvaigždė tiki „GitHub“ yra daugiau nei 6000.

Grommet

įvorė

„Grommet“ rinkinyje yra plati komponentų biblioteka, o vartotojai skaičiuoja didelius vardus, tokius kaip „Netflix“ ir „Boeing“. Nesvarbu, ar jūsų programa skirta telefonams, ar platesniems ekranams, galėsite kurti maketus. Prieinamumas pasiekiamas per klaviatūrą arba ekrano skaitytuvą.

Teminiai įrankiai padeda pritaikyti spalvą, tipą ir išdėstymą. Šioje „React“ UI komponentų bibliotekoje yra daugiau nei 6 000 žvaigždžių „GitHub“.

Elementari vartotojo sąsaja

Reaguokite UI komponentų bibliotekas: elemental-ui

„Elemental UI“ pateikia keletą pagrindinių funkcinių komponentų, skirtų naudoti atskirai arba bet kokiame derinyje, nesvarbu, ar tai numatytasis stilius, ar po jų pakeitimo. Kai kuriuos komponentus sudaro formos, mygtukai, kortelės ir moduliai.

Projektas yra kuriamas, tačiau jam priskiriama daugiau nei 4000 žvaigždžių „GitHub“.

„React Suite“

rsuite

„React Suite“ yra daugybė komponentinių bibliotekų, skirtų įmonės sistemos produktams. Tai palaiko visas pagrindines naršykles ir platformas, taip pat teikia serverio puses.

Jei esate namuose su mažiau tobulinimu, komponentų pritaikymas neturėtų sukelti problemų. Šios bibliotekos komponentai yra piktogramos, krautuvai, dalikliai, patarimai ir dar daugiau, o „React Suite“ turi beveik 4000 žvaigždžių „GitHub“.

Belle

belle

Tarp įdomiausių „React UI“ komponentų bibliotekų „Belle“ siūlo tikrai platų komponentų asortimentą. Šiuos komponentus galite tinkinti dviem lygiais – baziniu lygiu visiems komponentams kartu, taip pat kiekvienam komponentui atskirai.

Komponentai tiekiami mobiliesiems telefonams ir ARIA palaikymui. „Belle“ naudojimo būdas yra pirmiausia nustatyti paprastą programą su „React“, o tada importuoti bet kurį „Belle“ komponentą ir iškart pradėti naudoti. Šioje komponentų bibliotekoje yra daugiau nei 2400 žvaigždžių „GitHub“.

reaguoti-md

reaguoti-md

Dar viena „React“ UI komponentų biblioteka, į kurią turėtumėte atsižvelgti, jei savo projekte norite įdiegti medžiagų dizainą, yra „react-md“. Tai suteikia galimybę pasirinkti „React“ komponentus, kurie veikia su „Sass“. Šiuo tikslu „Sass“ stilius yra atskirtas vietoj įdėtinio stiliaus. Tai palengvina komponentų pritaikymą pagal esamus stilius.

Spalvas ir tipografiją galima tinkinti, o išsami dokumentacija padės jums atsisakyti pagrindų. Įjungta „GitHub“, „react-md“ yra daugiau nei 2000 žvaigždžių.

„PrimeReact“

pagrindinis reakcija

Šis „React“ vartotojo sąsajos komponentų bibliotekų sąrašas būtų neišsamus be „PrimeReact“. Jame pateikiami komponentai, kurie patenkina beveik visus pagrindinius sąsajos reikalavimus, tokius kaip įvesties parinktys, meniu, duomenų pateikimas, pranešimai ir dar daugiau.

Jame taip pat atkreipiamas dėmesys į mobiliųjų įrenginių patirtį, naudojant jutikliams pritaikytus reaguojančius dizaino elementus. Yra daugybė šablonų ir temų, leidžiančių tinkinti ir pasirinkti tarp plokščių ir medžiagų dizaino. Šioje komponentų bibliotekoje yra daugiau nei 1 200 žvaigždžių „GitHub“.

„KendoReact“

kendoreakcija

Kitaip nei anksčiau minėtos „React“ vartotojo sąsajos komponentų bibliotekos, „KendoReact“ yra aukščiausios kokybės komponentų rinkinys, kurio licencijos prasideda nuo 799 USD. Tai gali pasigirti įspūdingu klientų sąrašu, kuriame yra „Microsoft“, NASA ir „Sony“. Jūs taip pat galite naudoti tai norėdami sukurti greitas ir turtingas programas su įspūdinga vartotojo sąsaja.

Komponentų rinkinys yra sukurtas specialiai „React“ plėtrai. Tai užtikrina nulinę priklausomybę ir visi komponentai yra visiškai optimizuoti „React“. Be to, jei turite esamą komponentų biblioteką, ją galite tiesiog pridėti iš „KendoReact“, neperrašydami visos bibliotekos.

Tai yra mūsų geriausių „React“ UI komponentų bibliotekų sąrašas. Ar čia jūsų mėgstamiausia biblioteka?

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 50–80%:

* Šiame įraše yra filialų nuorodos, o tai reiškia, kad jei spustelėsite vieną iš produktų nuorodų ir nusipirksite produktą, gausime nedidelį mokestį. Vis dėlto nesijaudinkite, vis tiek mokėsite standartinę sumą, todėl iš jūsų nereikės mokėti.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map