React Tailwind Komponens Építő: Egyéni UI Komponensek Élő Előnézettel

Hozzon létre React Tailwind Komponenseket Azonnal a Vizuális Szerkesztővel

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.

A React Tailwind Komponens Építő Kulcsfontosságú Jellemzői

• Többféle Komponenstípus: Gombok, szöveges beviteli mezők, szövegterületek, legördülő menük és kenyérmorzsák készítése
• Élő Előnézet: Valós időben láthatja, ahogy a komponensek frissülnek a tulajdonságok módosításakor
• Responsive Tesztelés: Előnézze a komponenseket mobil, tablet és asztali nézetekben
• Állapot-vizualizáció: Tesztelje, hogyan néznek ki a komponensek különböző állapotokban (normál, hover, fókusz, aktív)
• Kódgenerálás: Tiszta, használatra kész React-kódot kapjon Tailwind CSS osztályokkal
• Másolás a vágólapra: Egyetlen kattintással könnyedén másolhatja a generált kódot
• Függőségek nélkül: Teljesen a böngészőben működik, külső API-hívások vagy háttérrendszer nélkül

Hogyan használja a React Tailwind Komponens Építőt: Lépésről lépésre útmutató

1. lépés: Válassza ki a React Komponens Típusát

Kezdje a komponens típusának kiválasztásával a rendelkezésre álló lehetőségek közül:

• Gomb: Hívócélú gombokat, küldő gombokat vagy navigációs gombokat hozhat létre
• Szöveges beviteli mező: Egysoros szöveges beviteli mezőket tervezhet űrlapokhoz
• Szövegterület: Többsoros szöveges beviteli területeket készíthet hosszabb tartalmakhoz
• Legördülő menü: Testreszabható opciókkal rendelkező legördülő kiválasztó menüket hozhat létre
• Kenyérmorzsa: Navigációs kenyérmorzsákat tervezhet az oldalhierarchia megjelenítéséhez

Minden komponenstípushoz saját testreszabható tulajdonságok tartoznak, amelyek a tulajdonságok panelen jelennek meg.

2. lépés: Testreszabás Tailwind CSS Tulajdonságokkal

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:

• Szövegtartalom: Állítsa be a gombokra kiírt szöveget vagy a beviteli mezők helyőrző szövegét
• Színek: Válasszon szöveget és háttérszíneket a Tailwind színpalettájából
• Belső térköz: Állítsa be a komponens belső térközét
• Külső térköz: Állítsa be a komponens külső térközét
• Szegély: Adjon hozzá különböző stílusú, szélességű és színű szegélyeket
• Lekerekítés: Kerekítse le a komponens sarkait
• Szélesség: Állítsa be a komponens szélességét (automatikus, teljes vagy százalékos alapú)
• Tipográfia: Állítsa be a betűméretet, vastagságot és egyéb szövegtulajdonságokat

Egyes komponenstípusokhoz további tulajdonságok is elérhetők:

• Szöveges beviteli mező/Szövegterület: Állítsa be a helyőrző szöveget, a kötelező állapotot és a letiltott állapotot
• Szövegterület: Állítsa be a sorok számát
• Legördülő menü: Adjon hozzá, szerkesszen vagy távolítson el opciókat
• Kenyérmorzsa: Konfigurálja a navigációs elemeket és linkeket

3. lépés: Élő Előnézet React Komponensek

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:

• Tesztelje a Responsive Viselkedést: Váltson a mobil, tablet és asztali nézetek között, hogy biztosítsa, a komponens jól néz ki minden képernyőméreten
• Ellenőrizze a Különböző Állapotokat: Nézze meg, hogyan jelenik meg a komponens normál, hover, fókusz és aktív állapotokban

4. lépés: Exportálja a React Tailwind Kódot

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:

• Tekintse át a Generált Kódot: Nézze meg a pontos React JSX kódot az összes alkalmazott Tailwind osztállyal
• Másolja a Vágólapra: Kattintson a "Kód másolása" gombra a kód vágólapra másolásához
• Használja a Projektjében: Illessze be a kódot közvetlenül a React projektjébe

React Tailwind Komponens Típusok: Teljes Útmutató

Gombok

A gombok alapvető UI-elemek a felhasználói interakciókhoz. A építőnkkel különféle gombstílusokat hozhat létre:

• Elsődleges akciógombok
• Másodlagos vagy körvonalazott gombok
• Ikonosgombok
• Teljes szélességű gombok
• Letiltott gombok

Fő Testreszabási Lehetőségek:

• Szövegtartalom
• Háttér- és szövegszínek
• Belső és külső térköz
• Szegély és lekerekítés
• Szélesség és magasság
• Betűméret és vastagság
• Hover, fókusz és aktív állapotok

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>
6

Szöveges Beviteli Mezők

A 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:

• Helyőrző szöveg
• Szegélystílusok és színek
• Belső térköz és szélesség
• Kötelező és letiltott állapotok
• Fókusz stílusok

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/>
7

Szövegterületek

A 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:

• Sorok száma
• Helyőrző szöveg
• Átméretezési viselkedés
• Szegély és belső térköz
• Kötelező és letiltott állapotok

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>
6

Legördülő Menük

A 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:

• Menüelemek (szöveg és érték)
• Szegély és belső térköz
• Szélesség és megjelenés
• Kötelező és letiltott állapotok

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>
9

Kenyérmorzsa Navigáció

A 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:

• Navigációs elemek és linkek
• Elválasztó stílus
• Szöveg- és hover-színek
• Térköz az elemek között

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>
16

Tailwind CSS Osztályok és Tulajdonságok Referencia

A 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:

Színek

A Tailwind egy átfogó színpalettát biztosít. Néhány példa:

• Szövegszínek: text-{color}-{árnyalat} (pl. text-blue-500, text-red-600)
• Háttérszínek: bg-{color}-{árnyalat} (pl. bg-green-500, bg-gray-100)
• Szegélyszínek: border-{color}-{árnyalat} (pl. border-gray-300)

Térközök

Szabályozza a belső és külső térközöket ezekkel az osztályokkal:

• Belső térköz: p-{méret}, px-{méret}, py-{méret} (pl. p-4, px-3 py-2)
• Külső térköz: m-{méret}, mx-{méret}, my-{méret} (pl. m-2, mx-auto)

Tipográfia

Állítsa be a szöveg megjelenését ezekkel:

• Betűméret: text-{méret} (pl. text-sm, text-lg)
• Betűvastagság: font-{vastagság} (pl. font-bold, font-medium)
• Szöveg-igazítás: text-{igazítás} (pl. text-center, text-right)

Szegélyek

Testreszabhatja a szegélyeket ezekkel:

• Szegélyszélesség: border, border-{szélesség} (pl. border-2)
• Lekerekítés: rounded, rounded-{méret} (pl. rounded-md, rounded-full)

Szélesség és Magasság

Állítsa be a méreteket ezekkel:

• Szélesség: w-{méret} (pl. w-full, w-1/2)
• Magasság: h-{méret} (pl. h-10, h-auto)

Interaktív Állapotok

Stílusozza a különböző állapotokat ezekkel:

• Hover: hover:{tulajdonság} (pl. hover:bg-blue-600)
• Fókusz: focus:{tulajdonság} (pl. focus:ring-2)
• Aktív: active:{tulajdonság} (pl. `active:bg