בנה רכיבי 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 CSS באופן מיידי. מדובר בבונה רכיבי React Tailwind מקוון חינמי המאפשר למפתחים ומעצבים לבנות, להתאים אישית ולייצא רכיבי ממשק משתמש מוכנים לייצור מבלי לכתוב קוד CSS ידנית. עם בונה React Tailwind עם תצוגה מקדימה חיה שלנו, אתה יכול לראות שינויים בזמן אמת בעת שאתה מעצב לחצנים, טפסים, קלטים ורכיבי ניווט באמצעות מסגרת CSS הממוקדת בשירות של Tailwind.
בונה רכיבי React Tailwind שלנו תומך ביצירת אלמנטי ממשק משתמש חיוניים כולל לחצנים, קלטי טקסט, אזורי טקסט, תפריטי בחירה, וניווט לחם עוגה. כל רכיב React יכול להיות מותאם אישית באמצעות מחלקות שירות Tailwind CSS עבור צבעים, מרווחים, טיפוגרפיה, גבולות ועיצוב מגיב - כל זאת עם תצוגה מקדימה חיה מיידית המתעדכנת באופן דינמי בעת שאתה משנה את התכונות. מושלם עבור פרוטוטיפינג מהיר ופיתוח רכיבים.
התחל על-ידי בחירת סוג הרכיב שאתה רוצה לבנות מתוך האפשרויות הזמינות:
לכל סוג רכיב יש סט משלו של תכונות מותאמות אישית שיופיעו בלוח התכונות.
לאחר בחירת סוג רכיב, אתה יכול להתאים אישית את המראה והתנהגות שלו באמצעות לוח התכונות. תכונות נפוצות כוללות:
עבור סוגי רכיבים ספציפיים, קיימות תכונות נוספות:
בעת שאתה מתאים את התכונות, התצוגה המקדימה מתעדכנת בזמן אמת, מציגה בדיוק איך הרכיב שלך יראה. אתה יכול גם:
לאחר שאתה מרוצה מהרכיב שלך, הכלי יוצר אוטומטית את קוד React המתאים עם מחלקות Tailwind CSS. אתה יכול:
לחצנים הם אלמנטי ממשק משתמש חיוניים עבור אינטראקציות משתמש. עם הבונה שלנו, אתה יכול ליצור סגנונות לחצן שונים:
אפשרויות התאמה אישית עיקריות:
דוגמת קוד שנוצר:
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גלה עוד כלים שעשויים להיות שימושיים עבור זרימת העבודה שלך