20+ 2020-ci il üçün ən yaxşı reaktiv UI komponent kitabxanaları / çərçivələr

20+ 2020-ci il üçün ən yaxşı reaktiv UI komponent kitabxanaları / çərçivələr

20+ 2020-ci il üçün ən yaxşı reaktiv UI komponent kitabxanaları / çərçivələr
СОДЕРЖАНИЕ
02 июня 2020

Ən yaxşı reaktiv UI komponent kitabxanaları / çərçivələr


Bu mənbədə İnternetdə mövcud olan ən yaxşı React UI komponent kitabxanaları və çərçivələri nəzərdən keçiririk. Ancaq əvvəlcə:

Reaksiya nədir?

React, həm veb həm də mobil tətbiqetmələr üçün üst bir interfeys qurmağa kömək edən açıq mənbəli JavaScript kitabxanasıdır. Digər JavaScript çərçivələri və kitabxanaları ilə rahat şəkildə birləşir və komponentlər adlandırılan kiçik, bağımsız bir kod ehtiva edir. Bu resursda diqqət mərkəzində olacaq komponentlərdir.

Komponentlərin xoş tərəfi odur ki, çox tətbiqetmədən asılılıq olmadan moduldurlar. Bu, zəhmli tətbiqlər və interfeysləri sürətli şəkildə qurmaq üçün yenidən istifadə etməyiniz deməkdir. Və sayəsində Bit, onları digər React meraklıları ilə də bölüşə bilərsiniz.

Növbəti layihənizi React ilə başlamazdan əvvəl, zəhmli görünüşlü UI yaratmağınıza kömək edə biləcək ən yaxşı React UI komponent kitabxanalarının bu siyahısını skan etmək üçün bir neçə dəqiqə çəkin.

2020-ci ildə ən yaxşı reaktiv UI komponent kitabxanaları və çərçivələri

Material dəsti reaksiya

Reaktiv UI komponent kitabxanaları: Material Kit React

Google-ın Material Dizaynından ilham alaraq hazırlanmış Material Kit React əsas xüsusiyyəti kimi ardıcıllıq yaradan elementlər toplusu yaradır. Beləliklə, veb layihəniz xarici görünüşdə və oxşarlıqda oxşarlıq saxlayır.

Ümumi nizam çox vərəqə bənzəyir. Bu layoutlara dərinlik və sifariş verir. Üç nümunə səhifələr daxil edilmişdir. Yalnız bu səhifələr bu dəstlə nəyin mümkün olduğunu göstərməyəcək, həm də mətn və şəkilləri öz yerinizlə əvəz edə biləcəyiniz şablon kimi xidmət edəcəkdir..

Kit ayrıca düymələr, döş nişanları, sürgülər, menyu, paginasiya, naviqasiya çubuğu, nişanlar və həblər kimi bir sıra əsas elementlərdən ibarətdir. Bir çox element üçün üslubu, ölçüsü və rəngini düzəldə biləcəksiniz. JavaScript elementlərinə Modallar, alət göstərişləri, tarix seçimi, karusellər və popovers daxildir. Kit yeni bir layihəyə başlamaq üçün istifadə etməklə yanaşı, köhnə Bootstrap layihəsini də yenidən düzəldə bilərsiniz. Material Kit reaksiya Pro versiyası daha çox komponent, bölmə və nümunə səhifələrini ehtiva edir.

Reaksiya üçün qarışqa dizaynı

Reaksiya üçün qarışqa dizaynı

Bu React UI kitabxanası müəssisə səviyyəli məhsullar üçün dizayn sistemidir. Bu əsaslanır Qarışqa Dizayn layihə və zəngin, interaktiv UI qurmaq üçün yüksək keyfiyyətli komponentlər və demoları ehtiva edir. Komponentlərə onlarla dildə beynəlmiləlləşmə dəstəyi daxildir.

Sənin də qabiliyyətin var komponentləri düzəliş edin öz dizayn xüsusiyyətlərinizə. Qarışqa Dizaynı üslub dili üçün Less.js istifadə edir. Qarışqa Dizaynı komponentləri düymələr, nişanlar, ızgaralar, çörək qırıntıları, açılan menyular, pagination və daha çox şey daxildir.

Layihədə təxminən 60k ulduz var GitHub-da, buna görə inkişaf etdiricilər arasında olduqca məşhurdur.

Adminə reaksiya verin

UI komponent kitabxanalarına reaksiya verin: Adminə reaksiya verin

Bu kitabxana REST / GraphQL API-lərinin üstündə biznesdən biznesə (B2B) idarəetmə tətbiqləri qurmaq üçün uygundur və dizaynı ilə tənzimlənir. Reaksiya ilə yanaşı bir çox tanınmış layihələr ilə qurulmuşdur: Material UI, React Router, Redux və Reaksiya Son Forması. Sonuncu, məşhur bir dövlət idarəetmə həllidir.

Pulsuz versiyaya əlavə olaraq və onun komponentləri, bir müəssisə həlli də var. Müəssisə həllinə Marmelab (yaradıcılar) tərəfindən dəstək və şəxsi modullara giriş daxildir.

React Admin təxminən 12k ulduzla öyünür GitHub-da, və fəal şəkildə saxlanılır.

Şards reaksiya verir

Reaktiv UI komponent kitabxanaları: shards

Shards React, sıfırdan qurulan və sürətli performansa istiqamətlənmiş açıq bir mənbəli, müasir React UI dəstidir. Müasir dizayn sistemi bir çox şeyi dəyişdirməyə imkan verir. Bundan əlavə, kod səviyyəsində hər şeyi dəyişdirmək üçün mənbə sənədlərini yükləyə bilərsiniz. Styling üçün istifadə olunan SCSS yalnız geliştirici təcrübəsini artırır.

Bu kitabxana əsaslanır Shards, və istifadə edir Reaksiya tarixçəsiPopperə reaksiya verin (yerləşdirmə mühərriki) və noUIShlider. Material və Fontawesome nişanlar dəstəkləyir. The Shards Pro paketdə başlamağa kömək edən 15 əvvəlcədən hazırlanmış səhifələr var. Bu səhifələrdə gəzə biləcəyiniz bloklardan istifadə edin.

~ 270 ulduz ilə GitHub, bu, həmçinin sıra sürgüləri və keçid girişləri kimi onlarla xüsusi React komponentlərini ehtiva edir. 350+ komponentləri Shards React ilə demək olar ki, hər cür veb sayt qura biləcəyinizi təmin edir.

Material-UI

Reaktiv UI komponent kitabxanaları və çərçivələr - material UI

İşıqlı 55K ulduzla GitHub, Material-UI ən populyar React UI komponent kitabxanaları sırasında yer alır. Komponentlər React-a güvənir, lakin Google-ın Material Dizaynından istifadə edin. Doldurmağı ehtiyac duyanlar üçün, maddi dizayn fiziki dünyadan və faktiki UI elementlərini minimum səviyyədə saxlayaraq ilham alır.

Tətbiq çubuğu, avtomatik tamamlama, döş nişanları, düymələr, kartlar, informasiya qutuları, nişanlar, menyular, sürgülər və sair kimi çox sayda faydalı komponent mövcuddur. Faydalı olaraq, Material-UI həm də Reaksiya mövzuları və şablonları təklif edir, beləliklə tətbiqiniz üçün xüsusi rəng mövzusuna sahib ola bilərsiniz.

Çəkmə reaktivi

reaksiya-başlama

React UI komponent kitabxanalarımızın növbəti siyahısında React Bootstrap, Bootstrap nüvəsini qoruyan bir UI dəstidir. Hər bir komponentin forması və funksiyasına daha çox nəzarət etmək üçün, Bootstrapın JavaScript-ni React ilə əvəz edir. Hər bir komponent asanlıqla əldə edilə bilən, ön çərçivə bina üçün vacib olan şəkildə qurulur.

React Bootstrap Bootstrap mənşələrindən çox şey sapmadığına görə, inkişaf etdiricilər minlərlə Bootstrap mövzularından asanlıqla seçim edə bilərlər. 14500+ ulduz qazandı GitHub.

Reaksiya verin

reaksiya-virtualizasiya

Məlumatı ağır olan bir cəbhə qurmaq? Reaksiya Virtualizə girmək lazım olan kitabxana ola bilər. Bu, geniş siyahıları, cədvəlləri və ızgaraları səmərəli göstərmək üçün çox sayda komponentdən ibarətdir. Məsələn, hörgü, sütun, otozizer, istiqamət dəyişdiriciləri, pəncərə kaydırıcıları və daha çoxunu tapa bilərsiniz. Bundan əlavə, cərgə yüksəkliklərini konfiqurasiya edərək cədvəlləri düzəldə bilərsiniz və hücrələrdə yer yerlərini göstərə bilərsiniz.

Ayrıca, React Virtualized çox az asılılığa malikdir və standart brauzerləri, o cümlədən iOS və Android üçün son mobil brauzerləri dəstəkləyir. 18,000+ ulduz var GitHub.

Argon Dizayn Sistemi Reaksiyası

Reaktiv UI komponent kitabxanaları: Argon Dizayn Sistemi Reakt

Bu kitabxana Bootstrap 4, React və Reactstrap üçün pulsuz bir dizayn sistemi təklif edir. Tamamilə işləyən bir kodda tətbiq olunan 100 müasir və parlaq element ilə gəlir, beləliklə bir səhifədən həqiqi veb saytına asanlıqla keçə bilərsiniz.

Argon Dizayn Sistemi təklif edir əvvəlcədən qurulmuş nümunə səhifələri rənglər, üslublar, hover və fokus kimi bütün komponentlər üçün bir ovuc dəyişmə.

-Də bir xəbərdarlıq edin bütün komponentlər dəsti, əsas elementlər, mətbəə, navbarlar, siqnallar, şəkillər, nişanlar, Javascript komponentləri və s.

Blueprint

planlar

Blueprint-dəki reaksiya komponentləri ilk növbədə masaüstü tətbiqlərdə istifadə üçün nəzərdə tutulub. Bu komponentlər mürəkkəb və məlumat sıxlıqlı interfeyslər yaratmaq üçün xüsusilə uyğundur. Komponent kitabxanasından nişanlar yaratmaq və göstərmək üçün, tarixlər və vaxtlarla qarşılıqlı əlaqə qurmaq, saat qurşağı və daha çoxunu seçmək üçün kod parçaları ala bilərsiniz..

Bu komponentlər kitabxanasında başqa nə var? Həqiqətən çox şey – çörək qırıntıları, düymələr, zənglər, kartlar, bölücü, navbarlar, nişanlar, etiketlər və daha çox. Yandırın GitHub, 15,000+ ulduzda saatlar təşkil edir.

Bu yazılarla da maraqlana bilərsiniz:

  • Tətbiq inkişafı üçün pulsuz reaktiv doğma şablonları
  • Ən yaxşı bucaqlı idarəetmə paneli şablonları

Semantik UI reaksiyası

Reaktiv UI komponent kitabxanaları: semantik-ui

Semantik UI, inkişaf çərçivəsi üçün insana yararlı HTML istifadə edir və React, Angular, Meteor, Ember və bir çox digər çərçivə ilə birləşmələrə malikdir. Bütün jQuery funksionallığı React-da yenidən həyata keçirildi.

Semantik UI Reakt tətbiqinizin üstünə hər hansı bir Semantik UI CSS mövzusunu yükləməyinizə imkan verir. Üstəlik, işarələməyə tam giriş əldə edə bilərsiniz, yəni komponentlərin özelleştirilməsində rahatlıq var. Ulduz sayılır GitHub 11 mindən çoxdur.

Reaksiya alətləri qutusu

reaksiya-alət qutusu

Layihənizdə Google’un maddi dizayn prinsiplərini həyata keçirmək üçün istifadə edə biləcəyiniz başqa bir React UI komponentləri kitabxanası React Toolbox’dur. React Toolbox güvənir CSS modulları Bu məqsədlə. Hər hansı bir modul bağlayıcıdan istifadə edə bilsəniz də, səliqəli ilə birləşdirir veb-paket iş axını. Diqqətlə, React Toolbox komandası qonaqları real vaxt rejimində komponentlərlə sınaqdan keçirə biləcəyiniz brauzer redaktoru ilə təmin edir..

React Toolbox ilə işləyərkən komponentləri paketlərə və ya xam komponentlərə idxal etməyi seçə bilərsiniz. Fərq, birincisi üçün, komponentlər sizin üçün enjekte edilmiş bütün zəruri asılılıqlar və mövzularla birlikdə gəlir. Bu o deməkdir ki, hər bir asılılıq üçün CSS avtomatik olaraq son CSS-də mövcud olacaqdır. Əksinə, xam komponentlər ilə heç bir CSS daxil edilmir. Düzgün tərtib edilmək üçün komponentə xüsusiyyətlər vasitəsilə bir mövzu təqdim etməlisiniz. React Toolbox 8000-dən çox ulduzdadır GitHub.

Reaksiya masası

Reaktiv UI komponent kitabxanaları: reaksiya masası

Növbəti komponentlər kitabxanamız, React Desktop, doğma masaüstü təcrübəsini vebə gətirmək məqsədi ilə macOS, Sierra və Windows 10 komponentlərindən istifadə edir..

Bu kolleksiya üstündə qurulmuş JavaScript kitabxanasıdır Facebook-un reaksiyası kitabxana və hər hansı bir JavaScript əsaslı layihəyə uyğundur. Bu vasitə 8.000 ulduz reytinqini keçir GitHub.

Onsen UI

onsen-ui

Çarpaz platforma mobil tətbiqetmələri yaratmağınız halında, React UI komponent kitabxanalarımızın siyahısında bu təkliflə maraqlanacaqsınız. Onsen UI HTML5 və JavaScript istifadə edən və Angular, Vue.js və React ilə inteqrasiya təmin edən bir mobil tətbiqetmənin inkişaf çərçivəsidir. Bütün komponentlər platforma əsasında avtomatik tərtib edilmişdir və buna görə də eyni mənbə kodu istifadə edərək həm iOS, həm də Android-də dəstəklənir.

Onsen UI, bir çox məşhur React çərçivələri ilə uyğun gəlir. İnteraktiv bir dərs bu vasitə ilə yaxşı bir başlanğıc əldə etməyə kömək edir. Komponent kitabxanasında heç bir JavaScript davranışı olmayan təmiz CSS istifadə olunur. Bəzi əlavə məlumatlar üçün xüsusi elementlər kömək edir. Ulduz sayılır GitHub 7.800-dən çoxdur.

Həmişəyaşıl

Reaktiv UI komponent kitabxanaları: həmişəyaşıl

Evergreen, müəssisə səviyyəli veb tətbiqləri üçün uyğun olan bir sıra reaksiya komponentlərini ehtiva edir. İstifadə etdiyindən İbtidai reaksiya verin, yüksək çevikdir. Eyni zamanda, qutudan dərhal asanlıqla işləyir.

Buraya əsas planlardan, mətbəədən, rənglərdən və nişanlardan başlayaraq açılanlar, keçidlər, fayl yükləmələri və geribildirim göstəriciləri kimi fəaliyyətə əsaslanan komponentlərə qədər geniş tərkib hissələr və alətlər daxildir. Evergreen paketini quraşdırdıqdan sonra idxal etmək istədiyiniz komponentləri seçib seçə bilərsiniz. Hal hazırda 9,000+ ulduz var GitHub.

Reaktiv kəmər

reaksiya silahı

Sadə React Bootstrap 4 komponentləri üçün Reactstrap-a baxın. İki əsas paylama versiyası ilə gəlir. Bir, isteğe bağlılığı istisna edən əsas bir versiya. Bu, tələb olunan asılılıqların konfiqurasiyasında daha çox rahatlıq verir.

İkinci versiya, bütün ixtiyari asılılıqları əhatə edən tam versiyadır. Bu kiçik tətbiqlər üçün tövsiyə olunur. Reactstrap, Reaktiv UI komponentləri kitabxanasındakı 8,700 ulduz nişanını keçən başqa bir kolleksiyadır GitHub.

Rebas

Reaktiv UI komponent kitabxanaları: rebas

Rebas yalnız səkkiz təməl komponentdən ibarətdir, hamısı super kiçik bir sənəddədir. Komponentlər genişlənən və temalı və həssas veb dizayn üçün qurulmuşdur.

Komponentlər üslublu sistemdən istifadə edir və tətbiqiniz üçün xüsusi UI komponentlərinə yayılmaq üçün əla başlanğıc nöqtəsi kimi xidmət edir. ThemeProvider də bu işdə sizə kömək edə bilər. Ulduz sayılır GitHub 6.000-dən çoxdur.

Grommet

grommet

Grommet dəstindəki geniş bir kitabxanaya sahibdir və istifadəçiləri arasında Netflix və Boeing kimi böyük adları sayır. Tətbiqiniz telefonlar üçün və ya daha geniş ekranlar üçün olsun, layout dizaynını hazırlaya bilərsiniz. Giriş klaviatura və ya ekran oxuyucusu vasitəsilə.

Theming tools rəng, növü və düzeni üçün özelleştirme kömək edir. Bu React UI komponentləri kitabxanasında 6000-dən çox ulduz sayı var GitHub.

Elemental UI

Reaktiv UI komponent kitabxanaları: elementar-ui

Elemental UI, standart üslubda və ya temalardan sonra müstəqil istifadə üçün və ya hər hansı bir birləşmə üçün bir sıra əsas funksional komponentləri təmin edir. Bəzi komponentlərə formalar, düymələr, kartlar və modallar daxildir.

Layihə inkişaf mərhələsindədir, lakin 4.000+ ulduz sayını idarə edir GitHub.

Suite reaksiya verin

rsuite

React Suite, müəssisə sistemi məhsulları üçün bir sıra komponent kitabxanaları ehtiva edir. Bütün əsas brauzerləri və platformaları, eləcə də server tərəfi göstərməyi dəstəkləyir.

Az inkişafla evdə olsanız, komponentləri özelleştirmek heç bir problem yaratmamalıdır. Bu kitabxananın tərkib hissələrinə nişanlar, yükləyicilər, bölücülər, alət dəstləri və daha çox daxildir və React Suite-də təxminən 4000 ulduz var GitHub.

Belle

bele

Ən maraqlı React UI komponent kitabxanaları arasında Belle, həqiqətən geniş tərkib hissələrini təklif edir. Bu komponentləri iki səviyyədə düzəldə bilərsiniz – bütün komponentlər üçün baza səviyyəsini, ayrıca hər bir komponenti.

Komponentlər mobil dəstək və ARIA dəstəyi ilə gəlir. Belle istifadə etmənin yolu əvvəlcə React ilə sadə bir tətbiq qurmaq və sonra hər hansı bir Belle komponentini idxal etmək və dərhal istifadə etməyə başlamaqdır. Bu komponent kitabxanada 2400-dən çox ulduz var GitHub.

reaksiya-md

reaksiya-md

Layihənizdə material dizaynını həyata keçirmək istəsəniz nəzərə almalı olduğunuz daha bir React UI komponentləri kitabxanası reaksiya-md. Sass ilə işləyən Reaktiv komponentlər seçimini verir. Bu məqsədlə, Sass-da daxili üslubun əvəzinə üslublar ayrılmışdır. Bu, mövcud üslublara uyğun olaraq komponentləri düzəltməyi asanlaşdırır.

Rənglər və mətbəə xüsusi olaraq düzəldilə bilər və ətraflı sənədlər əsasları keçmişə gətirməyə kömək edəcəkdir. Yandırın GitHub, reaksiya-md 2000-dən çox ulduz sayır.

PrimeReact

ibtidai

React UI komponent kitabxanalarının bu siyahısı PrimeReact olmadan tam olmazdı. Giriş seçimləri, menyular, məlumat təqdimatı, mesajlar və daha çox kimi demək olar ki, bütün əsas interfeys tələblərini əhatə edən komponentləri təmin edir.

Sensor optimallaşdırılmış cavab dizayn elementləri ilə də mobil təcrübəyə diqqət yetirir. Düz və material dizaynı arasında fərdiləşdirməyə və seçməyə imkan verən bir sıra şablon və mövzular var. Bu komponent kitabxanada 1200-dən çox ulduz var GitHub.

KendoReact

kendoreakt

Yuxarıda göstərilən React UI komponent kitabxanalarından fərqli olaraq, KendoReact, 799 dollardan başlayan lisenziyaları olan mükafat dəstidir. Microsoft, NASA və Sony’yi əhatə edən təsirli bir müştəri siyahısına sahibdir. Və siz də təsirli UI ilə sürətli və xüsusiyyətli zəngin proqramlar yaratmaq üçün istifadə edə bilərsiniz.

Komponent dəsti reaksiya inkişafı üçün xüsusi olaraq qurulmuşdur. Bu, sıfır asılılıq təmin edir və bütün komponentlər React üçün tam optimallaşdırılmışdır. Əlavə olaraq, mövcud komponent kitabxananız varsa, KendoReact-dan bütün kitabxananı yenidən yazmadan əlavə edə bilərsiniz..

Yaxşı, reaktiv UI komponentləri kitabxanalarımızın siyahısı. Ən sevdiyiniz kitabxanadır?

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

* Bu yazıda filial əlaqələri var, yəni məhsul əlaqələrindən birini vurub məhsulu satın alsanız, kiçik bir ödəniş alacağımızı bildirir. Narahat olmayın, yenə də standart məbləği ödəyəcəksiniz, buna görə sizin tərəfinizdə heç bir xərc yoxdur.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector