20+ ספריות / מסגרות רכיב ממשק משתמש טוב יותר לתגובה לשנת 2020

ספריות / מסגרות רכיב ממשק המשתמש הטוב ביותר להגיב


במשאב זה אנו בוחנים את מיטב ספריות ורכיבי ממשק ה- React של ממשק המשתמש הזמינים באינטרנט. אבל קודם:

מה זה תגובה?

React היא ספריית JavaScript עם קוד פתוח המסייעת לך לבנות ממשק עליון הן לאינטרנט והן לאפליקציות לנייד. זה משתלב בנוחות עם מסגרות וספריות אחרות של JavaScript, ומכיל קטעי קוד זעירים ועצמאים הנקראים רכיבים. זה המרכיבים האלה שעומדים להיות באור הזרקורים במשאב זה.

הדבר הנחמד עם רכיבים הוא שהם מודולריים ללא הרבה תלות ספציפית ליישום. המשמעות היא שתשתמשו מחדש ברכיבים לבניית אפליקציות וממשקים מדהימים בצורה מהירה ביותר. ותודה ל קצת, תוכלו לשתף אותם גם עם חובבי React אחרים.

לפני שתתחיל את הפרויקט הבא שלך עם React, קח כמה דקות לסרוק את רשימת הספריות הטובות ביותר של React UI של רכיבי ממשק שיכולים לעזור לך ליצור ממשק משתמש מדהים למראה..

ספריות ומסגרות רכיב UI הטובות ביותר לתגובה בשנת 2020

תגובת ערכת חומר

React ספריות רכיבי ממשק משתמש: React Kit Kit

Material Kit React, שנוצר בהשראה מעיצוב החומרים של גוגל, בונה מערך של אלמנטים המציגים עקביות כתכונה העיקרית. באופן זה, פרויקט האינטרנט שלך שומר על דמיון במראה ופונקציות לאורך כל הדרך.

הפריסה הכללית דומה לגיליונות נייר מרובים. זה מעניק עומק וסדר לפריסות. שלושה דפי דוגמה כלולים. לא רק שדפים אלה ידגימו מה אפשרי בערכה זו, הם משמשים גם כתבניות בהן תוכלו להחליף טקסט ותמונות בעצמכם..

הערכה כוללת גם מספר אלמנטים בסיסיים כמו כפתורים, תגים, סליידרים, תפריט, עימוד, פסי ניווט, כרטיסיות וכדורים. תוכל להתאים אישית את הסגנון, הגודל והצבע עבור רוב האלמנטים. אלמנטים של JavaScript כוללים מודלים, טיפים לכלים, בוחר תאריך תאריך, קרוסלות ופופוורים. מלבד השימוש בערכה כדי להתחיל פרוייקט חדש, תוכלו גם לבצע מחדש כל פרויקט ישן של Bootstrap. הערכת החומר גרסת מקצוען מכיל הרבה יותר רכיבים, קטעים ודפי דוגמה.

עיצוב נמלים לתגובה

עיצוב נמלים לתגובה

ספריית ממשק המשתמש של React היא מערכת תכנון למוצרים ברמת הארגון. זה מבוסס על עיצוב נמלים פרויקט ומכיל קבוצה של רכיבים והדגמות באיכות גבוהה לבניית ממשקי משתמש אינטראקטיביים עשירים. המרכיבים כוללים תמיכה בינלאומית בעשרות שפות.

יש לך גם את היכולת התאם אישית את הרכיבים למפרט העיצוב שלך. עיצוב נמלים משתמש ב- Less.js בשפת הסגנון שלה. עיצוב הנמלים רכיבים כוללים כפתורים, אייקונים, רשתות, פירור לחם, תפריטים נפתחים, עימוד ועוד.

בפרויקט כמעט 60,000 כוכבים ב- GitHub, אז זה פופולרי מאוד בקרב מפתחים.

הגיב לניהול

תגיב ספריות רכיבי ממשק משתמש: React Admin

ספרייה זו מתאימה לבניית יישומי ניהול עסקיים לעסקים (B2B) על גבי ממשקי API של REST / GraphQL והיא ניתנת להתאמה אישית על ידי עיצוב. הוא בנוי עם מספר פרויקטים ידועים בנוסף ל- React: ממשק המשתמש החומרי, React Router, Redux ו- React Form Final. האחרון הוא פיתרון פופולרי לניהול מדינות.

בנוסף לגרסת החינם ו- מרכיביו, יש גם פיתרון ארגוני. הפיתרון הארגוני כולל תמיכה פרו של Marmelab (היוצרים) וגישה למודולים פרטיים.

מנהל התגובה מתגאה בכ- 12,000 כוכבים ב- GitHub, ומתוחזק באופן פעיל.

תגובת השומרים

תגיב ספריות רכיבי ממשק משתמש: רסיסים

Shards React הוא קוד פתוח, ערכת ממשק משתמש React מודרנית שנבנית מאפס ומיועדת לביצועים מהירים. מערכת העיצוב המודרנית מאפשרת לשנות דברים רבים. מה שכן, תוכלו להוריד את קבצי המקור כדי לשנות גם דברים ברמת הקוד. SCSS המשמש לסטיילינג משפר רק את חוויית המפתחים.

ספריה זו מבוססת על שומרים, ושימושים הגיב ליו”ר תאריךהגיב פופר (מנוע מיקום) ו- noUIShlider. זה תומך בסמלים חומריים ופונטותיים. ה Shards Pro החבילה כוללת 15 דפים שנעשו מראש ומסייעים לך להתחיל. בעזרה, דפים אלה משתמשים בלוקים שתוכלו לנוע בהם.

עם ~ 270 כוכבים ב GitHub, הוא כולל גם עשרות רכיבים מותאמים אישית של React, כגון מחוון טווחים וכניסות להחלפה. רכיבי 350+ מבטיחים שתוכל לבנות כמעט כל סוג של אתר באמצעות Shards React.

ממשק משתמש

הגיב ספריות ורכיבי ממשק UI - ממשק משתמש חומרי

עם 55K כוכבים עצומים GitHub, ממשק משתמש-חומרי נמנה עם ספריות הרכיב UI הפופולריות ביותר. הרכיבים מסתמכים על React, אך משתמשים בעיצוב החומרים של גוגל. לאלו מכם הזקוקים למילוי, עיצוב חומרי לוקח השראה מהעולם הפיזי והמרקמים תוך שמירה על אלמנטים ממשק המשתמש ממשק המשתמש.

קיימים מגוון רחב של רכיבים מועילים, כמו סרגל אפליקציות, השלמה אוטומטית, תגים, כפתורים, קלפים, תיבות דו-שיח, אייקונים, תפריטים, סליידרים ועוד. באופן מועיל, ממשק UI מציע גם תגיות ותבניות של React, כך שתוכל לקבל עיצוב צבע מותאם אישית עבור האפליקציה שלך.

הגיב את רצועת האתחול

תגוב-רצועת אתחול

הבא ברשימה שלנו של ספריות רכיבי ממשק המשתמש הוא React Bootstrap, ערכת ממשק משתמש ששומרת על ליבת ה- Bootstrap שלה. על מנת לתת לך שליטה רבה יותר על הצורה והפונקציה של כל רכיב, הוא מחליף את ה- JavaScript של Bootstrap ב- React. כל רכיב בנוי להיות נגיש בקלות, חשוב לבניית מסגרת חזיתית.

ומכיוון ש React Bootstrap אינו סוטה הרבה ממקורות Bootstrap שלה, מפתחים יכולים לבחור מבין אלפי הנושאים הזמינים ב- Bootstrap. הרוויחו 14500+ כוכבים ב- GitHub.

הגיב וירטואליזציה

תגיב-וירטואליזציה

בונים חזיתית שהנתונים כבדים? React Virtualized עשוי להיות הספרייה שעליך לטבול בה. זה כולל רכיבים רבים לביצוע יעיל של רשימות גדולות, טבלאות ורשתות. לדוגמה, תוכלו למצוא בנייה, עמודות, מחליפים אוטומטיים, מיון כיוונים, גלילי חלונות ועוד. יתר על כן, באפשרותך להתאים אישית את הטבלאות על ידי קביעת התצורה של גובה השורה ולהצגת מצייני מיקום בתאים.

כמו כן, ל- React Virtualized יש מעט מאוד תלות ותומך בדפדפנים סטנדרטיים, כולל דפדפנים ניידים אחרונים עבור iOS ו- Android. יש בו 18,000+ כוכבים ב- GitHub.

תגובת מערכת עיצוב ארגון

ספריות רכיבי ממשק משתמש: React System Design React

ספרייה זו מציעה מערכת עיצוב בחינם עבור Bootstrap 4, React ו- Reactstrap. הוא מגיע עם 100 אלמנטים מודרניים ומשגעים אשר מיושמים בקוד פונקציונלי לחלוטין, כך שתוכלו לעבור מדף לאתר עצמו ללא מאמץ..

מערכת עיצוב ארגון מציעה דפי דוגמה שנבנו מראש וקומץ וריאציות לכל הרכיבים כגון צבעים, סגנונות, רחף ומיקוד.

קח הצצה אל ה סט שלם של רכיבים, הכולל אלמנטים בסיסיים, טיפוגרפיה, סרגלים, התראות, תמונות, אייקונים, רכיבי Javascript ועוד.

תכנית

blueprintjs

רכיבי ה- React ב- Blueprint מיועדים בעיקר ליישומים שולחניים. רכיבים אלה מתאימים במיוחד לבניית ממשקים מורכבים וצפופים בנתונים. מספריית הרכיבים תוכלו להרים פיסות קוד להפקה ולהצגת אייקונים, לאינטראקציה עם תאריכים ושעות, לבחירת אזורי זמן ועוד.

מה עוד יש בספריית הרכיבים הזו? הרבה באמת – פירורי לחם, כפתורים, הסברים, קלפים, מחלק, סרגלי ניווט, כרטיסיות, תגיות ועוד ועוד. על GitHub, זה נפתח בכ- 15,000+ כוכבים.

יתכן שאתה מעוניין במאמרים אלה:

  • תבניות מקוריות חינם להגיב עבור פיתוח אפליקציות
  • תבניות לוח המחוונים לניהול זוויתי הטובות ביותר

תגובה ממשק משתמש סמנטי

תגיב ספריות רכיבי ממשק משתמש: סמנטי-ui

ממשק משתמש סמנטי משתמש ב- HTML ידידותי לבני אדם למסגרת הפיתוח שלו ויש לו אינטגרציות עם React, Angular, Meteor, Ember ומסגרות רבות אחרות. כל הפונקציונליות של jQuery יושמה מחדש ב- React.

זה מאפשר לך לטעון כל נושא CSS UI סמנטי מעל אפליקציית ה- React UI סמנטית שלך. יתר על כן, תהיה לך גישה מלאה לסימון, כלומר יש גמישות בהתאמה אישית של רכיבים. זה כוכב לסמוך עליו GitHub הוא מעל 11,000.

תגיב ארגז כלים

ארגז כלים להגיב

ספריית רכיבי ממשק משתמש של React בה תוכלו להשתמש בכדי ליישם את עקרונות התכנון החומרי של גוגל בפרויקט שלכם היא React Toolbox. ארגז הכלים של React מסתמך על מודולי CSS למטרה זו. למרות שאתה יכול להשתמש בכל מגביל מודולים, הוא משתלב בצורה מסודרת webpack זרימת עבודה. במחשבה, הצוות ב- React Toolbox מספק למבקרים עורך בדפדפן בו תוכלו להתנסות עם הרכיבים בזמן אמת..

במהלך העבודה עם ארגז הכלים של React, תוכלו לבחור לייבא רכיבים בצרורות או ברכיבים גולמיים. ההבדל הוא שלראשונה, המרכיבים מגיעים עם כל התלות והנושאים הנדרשים לך. משמעות הדבר היא ש- CSS לכל תלות יהיה זמין ב- CSS הסופי שלך באופן אוטומטי. נהפוך הוא, עם רכיבים גולמיים, אין CSS כלול. פירוש הדבר שתצטרך לספק נושא באמצעות מאפיינים לרכיב שיהיה מעוצב כראוי. ארגז הכלים של React נמצא ביותר מ- 8,000 כוכבים GitHub.

הגיב על שולחן העבודה

תגיב ספריות רכיבי ממשק משתמש: react-desktop

ספריית הרכיבים הבאה שלנו, React Desktop, משתמשת ברכיבי macOS, Sierra ו- Windows 10 במטרה להביא חוויית שולחן עבודה מקורית לרשת..

אוסף זה הוא ספריית JavaScript שנבנית על גבי התגובה של פייסבוק הספרייה והיא תואמת לכל פרויקט מבוסס JavaScript. כלי זה חוצה את דירוג 8,000 הכוכבים ב- GitHub.

ממשק משתמש אונסן

onsen-ui

אם תרצה ליצור אפליקציות סלולריות חוצות, תוכל להתעניין בהצעה זו ברשימת ספריות רכיבי ממשק המשתמש. ממשק Onsen הוא מסגרת לפיתוח אפליקציות לנייד המשתמשת ב- HTML5 ו- JavaScript ומספקת אינטגרציה עם Angular, Vue.js ו- React. כל הרכיבים מעוצבים באופן אוטומטי על בסיס הפלטפורמה, וכך היא תומכת גם ב- iOS וגם באנדרואיד באמצעות אותו קוד מקור.

ממשק משתמש Onsen תואם למסגרות רבות של React פופולריות. מדריך אינטראקטיבי עוזר לך להתחיל טוב עם הכלי הזה. ספריית הרכיבים מעסיקה CSS טהור ללא התנהגות JavaScript. לפרטים נוספים, אלמנטים מותאמים אישית עוזרים. הכוכב סומך על GitHub עולה על 7,800.

ירוק-עד

הגיב ספריות רכיבי ממשק משתמש: ירוק-עד

Evergreen מכיל קבוצה של רכיבי React המתאימים ליישומי אינטרנט ברמה ארגונית. מכיוון שהוא משתמש הגיב פרימיטיבי, זה גמיש מאוד. יחד עם זאת זה עובד באותה קלות ממש מחוץ לקופסה.

הוא כולל מגוון רחב של רכיבים וכלים החל מפריסות בסיסיות, טיפוגרפיה, צבעים וסמלים וכלה ברכיבים מבוססי פונקציה כמו נפתחות, החלפת קבצים, העלאת קבצים ומחוון משוב. לאחר התקנת חבילת Evergreen תוכלו לבחור ולבחור את הרכיבים שברצונכם לייבא. כרגע יש בו 9,000+ כוכבים ב- GitHub.

רסטרטור חוזר

רסטרסט

עבור רכיבים פשוטים של React Bootstrap 4, עיין ב Reactstrap. זה מגיע עם שתי גרסאות הפצה ראשוניות. האחת, גרסה בסיסית שאינה כוללת תלות אופציונליות. זה מאפשר לך גמישות רבה יותר בהגדרת התלות הנדרשת.

הגרסה השנייה היא הגרסה המלאה הכוללת את כל התלות האופציונליות. יישום זה מומלץ ליישומים קטנים יותר. Reactstrap הוא אוסף נוסף בספריית הרכיבים React UI החוצה את 8,700 הכוכבים GitHub.

מחדש

הגיב ספריות רכיבי ממשק משתמש: מחדש

Rebass מכיל שמונה מרכיבים יסודיים, כולם בקובץ סופר-קטן. הרכיבים ניתנים להרחבה וניתנים לשינוי, ונבנים לעיצוב אתרים רספונסיבי.

הרכיבים משתמשים במערכת מעוצבת ומשמשים כנקודת התחלה מצוינת להרחבה לרכיבי ממשק משתמש מותאמים אישית עבור האפליקציה שלך. ThemeProvider יכול גם לעזור לך בכך. הכוכב סומך על GitHub הוא מעל 6,000.

גרומט

גרומט

ל- Grommet ספריית רכיבים רחבה בערכה שלה והיא סופרת שמות גדולים כמו נטפליקס ובואינג בקרב המשתמשים שלה. בין אם האפליקציה שלך מיועדת לטלפונים או לתצוגת מסכים רחבים יותר, תוכל לעצב פריסות. הנגישות היא באמצעות קורא מקשים או מסך.

כלים נושאים עוזרים בהתאמה אישית לצבעים, לסוג ולפריסה. בספריית רכיבי ממשק המשתמש של React יש ספירת כוכבים העולה על 6,000 על GitHub.

ממשק המשתמש היסודי

תגיב ספריות רכיבי ממשק משתמש: elemental-ui

ממשק המשתמש של Elemental מספק מספר רכיבים פונקציונליים בסיסיים לשימוש עצמאי או בכל שילוב, בין אם בסגנון ברירת מחדל או לאחר נושא. חלק מהרכיבים כוללים טפסים, כפתורים, קלפים ומודלים.

הפרויקט בפיתוח, אך מצליח להסתמך על 4,000+ כוכבים GitHub.

React Suite

rsuite

React Suite מכיל מגוון ספריות רכיבים למוצרי מערכת ארגוניים. הוא תומך בכל הדפדפנים והפלטפורמות העיקריים, כמו גם ביצועים בצד השרת.

אם אתה בבית עם פחות פיתוח, התאמת הרכיבים לא אמורה להוות בעיה. הרכיבים בספריה זו כוללים סמלים, מעמיסים, חלוקות, טיפים לכלים ועוד ו- React Suite מכיל קרוב ל -4,000 כוכבים ב- GitHub.

בל

בלה

בין ספריות הרכיבים המעניינות ביותר של React UI, בל מציעה מגוון רחב מאוד של רכיבים. אתה יכול להתאים אישית רכיבים אלה בשתי רמות – רמת הבסיס של כל הרכיבים באופן קולקטיבי, כמו גם כל רכיב בנפרד.

הרכיבים מגיעים עם תמיכה בניידים ותמיכה ב- ARIA. הדרך להשתמש בשימוש בבל היא קודם כל להגדיר אפליקציה פשוטה עם React, ואז לייבא כל רכיב של Belle ולהתחיל להשתמש בה מייד. בספריית רכיבים זו יש יותר מ- 2,400 כוכבים GitHub.

תגיב- md

תגיב- md

ספריית רכיבי ממשק משתמש נוסף של React שתצטרך לקחת בחשבון אם ברצונך ליישם עיצוב חומרים בפרויקט שלך היא rea-md. זה נותן לך בחירה של רכיבי React שעובדים עם Sass. למטרה זו, קיימת הפרדה בין סגנונות בסאס במקום סטיילינג מוטבע. זה מקל עליך להתאים אישית רכיבים בהתאם לסגנונות הקיימים.

ניתן להתאים צבעים וטיפוגרפיה והתיעוד המפורט יסייע לך לעבור את היסודות. על GitHub, rea-md מונה יותר מ -2,000 כוכבים.

PrimeReact

ראשונה

רשימה זו של ספריות רכיב ממשק המשתמש React לא תהיה שלמה ללא PrimeReact. הוא מספק רכיבים לכיסוי כמעט כל דרישות הממשק הבסיסיות כגון אפשרויות קלט, תפריטים, הצגת נתונים, הודעות ועוד.

זה גם שם לב לחוויה הניידת, עם אלמנטים עיצוביים המותאמים למגע המותאמים למגע. יש מספר תבניות ועיצוביות המאפשרות התאמה אישית ובחירה בין עיצוב שטוח לחומר. בספריית רכיבים זו יש יותר מ- 1,200 כוכבים GitHub.

KendoReact

kendoreact

בשונה מספריות רכיבי ממשק המשתמש של React לעיל, KendoReact היא מערך רכיבים מובחר, עם רישיונות החל מ- $ 799. הוא מתהדר ברשימת לקוחות מרשימה הכוללת את מיקרוסופט, נאס”א וסוני. וגם אתה יכול להשתמש בו כדי ליצור אפליקציות מהירות ועשירות תכונות עם ממשק משתמש מרשים.

מערך הרכיבים בנוי במיוחד לפיתוח React. זה מבטיח אפס תלות וכל הרכיבים מותאמים באופן מלא לתגובה. בנוסף, אם יש לך ספריית רכיבים קיימת, אתה יכול פשוט להוסיף לה מ- KendoReact מבלי שתצטרך לשכתב את כל הספרייה.

ובכן, זו הרשימה שלנו עם ספריות הרכיבים הטובים ביותר של ממשק המשתמש בתגובה. האם הספרייה האהובה עליך כאן?

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 50-80%:

* פוסט זה מכיל קישורי שותפים, מה שאומר שאם תלחץ על אחד מקישורי המוצר ואז תרכוש את המוצר, נקבל עמלה קטנה. עם זאת, אל תדאגי, עדיין תשלם את הסכום הסטנדרטי כך שאין עלות מצידך.

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