בונה רכיבי React Tailwind עם תצוגה חיה ויצוא קוד
בנה רכיבי React מותאמים אישית עם Tailwind CSS. צור כפתורים, קלטים, תחומי טקסט, בחירות ופירורי לחם עם תצוגה בזמן אמת ופלט קוד מוכן לשימוש בפרויקטים שלך.
בונה רכיבי React עם Tailwind CSS
בנה רכיבי React עם Tailwind CSS וראה תצוגה חיה
סוג רכיב
מאפיינים
תצוגה מותאמת
תצוגה של מצב
תצוגה חיה
קוד שנוצר
<button className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" > Button </button>
תיעוד
בונה רכיבי React Tailwind: צור רכיבי ממשק משתמש מותאמים אישית עם תצוגה מקדימה חיה
בנה רכיבי React Tailwind באופן מיידי עם עורך חזותי
בונה רכיבי React Tailwind הוא עורך חזותי עוצמתי המסייע לך ליצור רכיבי React מותאמים אישית עם Tailwind CSS באופן מיידי. מדובר בבונה רכיבי React Tailwind מקוון חינמי המאפשר למפתחים ומעצבים לבנות, להתאים אישית ולייצא רכיבי ממשק משתמש מוכנים לייצור מבלי לכתוב קוד CSS ידנית. עם בונה React Tailwind עם תצוגה מקדימה חיה שלנו, אתה יכול לראות שינויים בזמן אמת בעת שאתה מעצב לחצנים, טפסים, קלטים ורכיבי ניווט באמצעות מסגרת CSS הממוקדת בשירות של Tailwind.
בונה רכיבי React Tailwind שלנו תומך ביצירת אלמנטי ממשק משתמש חיוניים כולל לחצנים, קלטי טקסט, אזורי טקסט, תפריטי בחירה, וניווט לחם עוגה. כל רכיב React יכול להיות מותאם אישית באמצעות מחלקות שירות Tailwind CSS עבור צבעים, מרווחים, טיפוגרפיה, גבולות ועיצוב מגיב - כל זאת עם תצוגה מקדימה חיה מיידית המתעדכנת באופן דינמי בעת שאתה משנה את התכונות. מושלם עבור פרוטוטיפינג מהיר ופיתוח רכיבים.
תכונות עיקריות של בונה רכיבי React Tailwind
- סוגי רכיבים מרובים: בנה לחצנים, קלטי טקסט, אזורי טקסט, תפריטי בחירה וניווט לחם עוגה
- תצוגה מקדימה חיה: ראה את הרכיבים שלך מתעדכנים בזמן אמת בעת שאתה משנה את התכונות
- בדיקת מגיבות: הצג את הרכיבים שלך בתצוגות של נייד, טאבלט ומחשב שולחני
- הדמיית מצב: בדוק איך הרכיבים שלך נראים במצבים שונים (רגיל, מעבר עכבר, מיקוד, פעיל)
- יצירת קוד: קבל קוד React נקי ומוכן לשימוש עם מחלקות Tailwind CSS
- העתקה ללוח הגזירה: העתק בקלות את הקוד שנוצר בלחיצה אחת
- ללא תלות: פועל לחלוטין בדפדפן ללא שיחות API חיצוניות או דרישות גיבוי
כיצד להשתמש בבונה רכיבי React Tailwind: מדריך צעד-אחר-צעד
שלב 1: בחר את סוג הרכיב React שלך
התחל על-ידי בחירת סוג הרכיב שאתה רוצה לבנות מתוך האפשרויות הזמינות:
- לחצן: צור לחצני קריאה לפעולה, לחצני שליחה או לחצני ניווט
- קלט טקסט: עצב שדות קלט טופס לאיסוף טקסט בשורה אחת
- אזור טקסט: בנה אזורי קלט טקסט רב-שורתיים לתוכן ארוך יותר
- בחירה: צור תפריטי בחירה נפתחים עם אפשרויות מותאמות אישית
- לחם עוגה: עצב לחמי עוגה ניווט להצגת היררכיית העמוד
לכל סוג רכיב יש סט משלו של תכונות מותאמות אישית שיופיעו בלוח התכונות.
שלב 2: התאם אישית את תכונות Tailwind CSS
לאחר בחירת סוג רכיב, אתה יכול להתאים אישית את המראה והתנהגות שלו באמצעות לוח התכונות. תכונות נפוצות כוללות:
- תוכן טקסט: הגדר את הטקסט המוצג על לחצנים או טקסט שמור מקום עבור קלטים
- צבעים: בחר צבעי טקסט ורקע מתוך הפלטת הצבעים של Tailwind
- מרווח פנימי: התאם את המרווח הפנימי של הרכיב
- מרווח חיצוני: הגדר את המרווח החיצוני סביב הרכיב
- גבול: הוסף גבולות עם סגנונות, רוחבים וצבעים שונים
- רדיוס גבול: עגל את הפינות של הרכיב שלך
- רוחב: הגדר את רוחב הרכיב (אוטומטי, מלא או מבוסס אחוזים)
- טיפוגרפיה: התאם את גודל הגופן, העובי והתכונות הטקסטואליות האחרות
עבור סוגי רכיבים ספציפיים, קיימות תכונות נוספות:
- קלט טקסט/אזור טקסט: הגדר טקסט שמור מקום, סטטוס נדרש ומצב מנוטרל
- אזור טקסט: התאם את מספר השורות
- בחירה: הוסף, ערוך או הסר אפשרויות
- לחם עוגה: הגדר פריטי ניווט וקישורים
שלב 3: תצוגה מקדימה חיה של רכיבי React
בעת שאתה מתאים את התכונות, התצוגה המקדימה מתעדכנת בזמן אמת, מציגה בדיוק איך הרכיב שלך יראה. אתה יכול גם:
- בדוק התנהגות מגיבה: החלף בין תצוגות של נייד, טאבלט ומחשב שולחני כדי להבטיח שהרכיב שלך נראה טוב בכל גודלי מסך
- בדוק מצבים שונים: ראה איך הרכיב שלך נראה במצבים רגיל, מעבר עכבר, מיקוד ופעיל
שלב 4: ייצא קוד React Tailwind
לאחר שאתה מרוצה מהרכיב שלך, הכלי יוצר אוטומטית את קוד React המתאים עם מחלקות Tailwind CSS. אתה יכול:
- סקור את הקוד שנוצר: ראה את קוד JSX React המדויק עם כל מחלקות Tailwind שיושמו
- העתק ללוח הגזירה: לחץ על הלחצן "העתק קוד" כדי להעתיק את הקוד ללוח הגזירה
- השתמש בפרויקט שלך: הדבק את הקוד ישירות לתוך פרויקט React שלך
סוגי רכיבי React Tailwind: מדריך מלא
לחצנים
לחצנים הם אלמנטי ממשק משתמש חיוניים עבור אינטראקציות משתמש. עם הבונה שלנו, אתה יכול ליצור סגנונות לחצן שונים:
- לחצני פעולה ראשיים
- לחצנים משניים או מתוארים
- לחצני סמל
- לחצנים ברוחב מלא
- לחצנים מנוטרלים
אפשרויות התאמה אישית עיקריות:
- תוכן טקסט
- צבעי רקע וטקסט
- מרווח פנימי וחיצוני
- גבול ורדיוס גבול
- רוחב וגובה
- גודל וכובד גופן
- מצבי מעבר עכבר, מיקוד ופעיל
דוגמת קוד שנוצר:
1<button
2 className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 focus:outline-none"
3>
4 שלח
5</button>
6קלטי טקסט
קלטי טקסט מאפשרים למשתמשים להזין טקסט בשורה אחת בטפסים. הבונה שלנו עוזר לך ליצור קלטים התואמים למערכת העיצוב שלך:
אפשרויות התאמה אישית עיקריות:
- טקסט שמור מקום
- סגנונות וצבעי גבול
- מרווח פנימי ורוחב
- מצבי נדרש ומנוטרל
- סגנונות מיקוד
דוגמת קוד שנוצר:
1<input
2 type="text"
3 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
4 placeholder="הזן את שמך"
5 required
6/>
7אזורי טקסט
אזורי טקסט משמשים לקלט טקסט רב-שורתי, כמו הערות או תיאורים:
אפשרויות התאמה אישית עיקריות:
- מספר שורות
- טקסט שמור מקום
- התנהגות שינוי גודל
- גבול ומרווח פנימי
- מצבי נדרש ומנוטרל
דוגמת קוד שנוצר:
1<textarea
2 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3 placeholder="הזן את ההודעה שלך"
4 rows={4}
5></textarea>
6תפריטי בחירה
תפריטי בחירה מאפשרים למשתמשים לבחור מתוך רשימת אפשרויות:
אפשרויות התאמה אישית עיקריות:
- פריטי אפשרויות (טקסט וערך)
- גבול ומרווח פנימי
- רוחב ומראה
- מצבי נדרש ומנוטרל
דוגמת קוד שנוצר:
1<select
2 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3 required
4>
5 <option value="option1">אפשרות 1</option>
6 <option value="option2">אפשרות 2</option>
7 <option value="option3">אפשרות 3</option>
8</select>
9ניווט לחם עוגה
לחמי עוגה עוזרים למשתמשים להבין את מיקומם בתוך היררכיית האתר:
אפשרויות התאמה אישית עיקריות:
- פריטי ניווט וקישורים
- סגנון מפריד
- צבעי טקסט ומעבר עכבר
- מרווח בין פריטים
דוגמת קוד שנוצר:
1<nav className="flex" aria-label="Breadcrumb">
2 <ol className="flex space-x-2 text-gray-700">
3 <li className="flex items-center">
4 <a href="/" className="hover:text-blue-600">בית</a>
5 </li>
6 <li className="flex items-center">
7 <span className="mx-2 text-gray-400">/</span>
8 <a href="/products" className="hover:text-blue-600">מוצרים</a>
9 </li>
10 <li className="flex items-center">
11 <span className="mx-2 text-gray-400">/</span>
12 <a href="/products/category" className="hover:text-blue-600">קטגוריה</a>
13 </li>
14 </ol>
15</nav>
16מדריך מקוצר: בנה את הרכיב React Tailwind הראשון
כלים קשורים
גלה עוד כלים שעשויים להיות שימושיים עבור זרימת העבודה שלך