Egyéni React komponensek készítése Tailwind CSS-sel. Hozzon létre gombokat, beviteli mezőket, szövegterületeket, legördülő menüket és kenyérmorzsákat valós idejű előnézettel és generált kóddal, amely készen áll a projektjeiben való felhasználásra.
Hozzon létre React komponenseket Tailwind CSS-sel és tekintse meg az élő előnézetet
<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>
A React Tailwind Komponens Építő egy erőteljes vizuális szerkesztő, amely segít egyéni React komponensek létrehozásában Tailwind CSS-sel azonnal. Ez a ingyenes online React Tailwind komponens építő lehetővé teszi a fejlesztők és tervezők számára, hogy CSS-kód manuális írása nélkül építsenek, testreszabják és exportálják a termelésre kész UI-komponenseket. A React Tailwind élő előnézet építőnkkel valós időben láthatja a változásokat, ahogy gombokat, űrlapokat, beviteli mezőket és navigációs komponenseket tervez a Tailwind utility-first CSS-keretrendszer használatával.
A React Tailwind komponens építőnk támogatja az alapvető UI-elemek, például gombok, szöveges beviteli mezők, szövegterületek, legördülő menük és kenyérmorzsák létrehozását. Minden React-komponens teljesen testreszabható a Tailwind CSS utility osztályok használatával a színek, térközök, tipográfia, szegélyek és a responsive design tekintetében - mindez azonnali élő előnézettel, amely dinamikusan frissül, ahogy módosítja a tulajdonságokat. Tökéletes a gyors prototípuskészítéshez és komponensfejlesztéshez.
Kezdje a komponens típusának kiválasztásával a rendelkezésre álló lehetőségek közül:
Minden komponenstípushoz saját testreszabható tulajdonságok tartoznak, amelyek a tulajdonságok panelen jelennek meg.
Miután kiválasztotta a komponens típusát, a tulajdonságok panelen keresztül testre szabhatja annak megjelenését és viselkedését. A gyakori tulajdonságok közé tartoznak:
Egyes komponenstípusokhoz további tulajdonságok is elérhetők:
Ahogy módosítja a tulajdonságokat, az élő előnézet valós időben frissül, megmutatva pontosan, hogyan fog kinézni a komponens. Emellett:
Miután elégedett a komponensével, az eszköz automatikusan generálja a megfelelő React kódot a Tailwind CSS osztályokkal. Ezt követően:
A gombok alapvető UI-elemek a felhasználói interakciókhoz. A építőnkkel különféle gombstílusokat hozhat létre:
Fő Testreszabási Lehetőségek:
Példa Generált Kód:
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 Küldés
5</button>
6A szöveges beviteli mezők lehetővé teszik a felhasználók számára, hogy egysoros szöveget adjanak meg űrlapokon. A építőnk segít olyan beviteli mezőket létrehozni, amelyek illeszkednek a tervezési rendszerhez:
Fő Testreszabási Lehetőségek:
Példa Generált Kód:
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="Írja be a nevét"
5 required
6/>
7A szövegterületek többsoros szöveges bevitelre szolgálnak, például megjegyzésekhez vagy leírásokhoz:
Fő Testreszabási Lehetőségek:
Példa Generált Kód:
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="Írja be az üzenetét"
4 rows={4}
5></textarea>
6A legördülő menük lehetővé teszik a felhasználók számára, hogy válasszanak egy listából:
Fő Testreszabási Lehetőségek:
Példa Generált Kód:
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. opció</option>
6 <option value="option2">2. opció</option>
7 <option value="option3">3. opció</option>
8</select>
9A kenyérmorzsák segítenek a felhasználóknak megérteni, hol tartózkodnak a weboldal hierarchiájában:
Fő Testreszabási Lehetőségek:
Példa Generált Kód:
1<nav className="flex" aria-label="Kenyérmorzsa">
2 <ol className="flex space-x-2 text-gray-700">
3 <li className="flex items-center">
4 <a href="/" className="hover:text-blue-600">Kezdőlap</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">Termékek</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">Kategória</a>
13 </li>
14 </ol>
15</nav>
16A komponens építőnk a Tailwind CSS utility osztályait használja a komponensek stílusozására. Itt egy gyors referencia a leggyakrabban használt tulajdonságokhoz:
A Tailwind egy átfogó színpalettát biztosít. Néhány példa:
text-{color}-{árnyalat} (pl. text-blue-500, text-red-600)bg-{color}-{árnyalat} (pl. bg-green-500, bg-gray-100)border-{color}-{árnyalat} (pl. border-gray-300)Szabályozza a belső és külső térközöket ezekkel az osztályokkal:
p-{méret}, px-{méret}, py-{méret} (pl. p-4, px-3 py-2)m-{méret}, mx-{méret}, my-{méret} (pl. m-2, mx-auto)Állítsa be a szöveg megjelenését ezekkel:
text-{méret} (pl. text-sm, text-lg)font-{vastagság} (pl. font-bold, font-medium)text-{igazítás} (pl. text-center, text-right)Testreszabhatja a szegélyeket ezekkel:
border, border-{szélesség} (pl. border-2)rounded, rounded-{méret} (pl. rounded-md, rounded-full)Állítsa be a méreteket ezekkel:
w-{méret} (pl. w-full, w-1/2)h-{méret} (pl. h-10, h-auto)Stílusozza a különböző állapotokat ezekkel:
hover:{tulajdonság} (pl. hover:bg-blue-600)focus:{tulajdonság} (pl. focus:ring-2)active:{tulajdonság} (pl. `active:bgFedezzen fel több olyan eszközt, amely hasznos lehet a munkafolyamatához