Vytvárajte vlastné komponenty React s Tailwind CSS. Vytvárajte tlačidlá, vstupy, textové oblasti, rozbaľovacie zoznamy a drobné navigácie s okamžitým náhľadom a vygenerovaným kódom pripraveným na použitie vo vašich projektoch.
Vytvorte komponenty React s Tailwind CSS a zobrazte živý náhľad
<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>
Tvorca komponentov React Tailwind je výkonný vizuálny editor, ktorý vám pomôže okamžite vytvárať vlastné komponenty React s Tailwind CSS. Tento bezplatný online tvorca komponentov React Tailwind umožňuje vývojárom a dizajnérom vytvárať, prispôsobovať a exportovať produkčné používateľské rozhrania bez ručného písania kódu CSS. S naším živým náhľadom React Tailwind builder môžete vidieť zmeny v reálnom čase, keď navrhujete tlačidlá, formuláre, vstupy a navigačné komponenty pomocou utility-first CSS frameworku Tailwind.
Náš tvorca komponentov React Tailwind podporuje vytváranie základných používateľských rozhraní vrátane tlačidiel, textových vstupov, textových oblastí, rozbaľovacích ponúk a navigácie pomocou drobkovej navigácie. Každá komponenta React môže byť plne prispôsobená pomocou tried utility Tailwind CSS pre farby, rozloženie, typografiu, okraje a responzívny dizajn - všetko s okamžitým živým náhľadom, ktorý sa dynamicky aktualizuje pri úprave vlastností. Ideálne na rýchle prototypovanie a vývoj komponentov.
Začnite výberom typu komponenty, ktorú chcete vytvoriť z dostupných možností:
Každý typ komponenty má vlastnú sadu prispôsobiteľných vlastností, ktoré sa objavia v paneli vlastností.
Po výbere typu komponenty môžete prispôsobiť jej vzhľad a správanie pomocou panela vlastností. Medzi bežné vlastnosti patria:
Pre konkrétne typy komponentov sú k dispozícii ďalšie vlastnosti:
Keď upravujete vlastnosti, živý náhľad sa v reálnom čase aktualizuje a ukazuje presne, ako bude vaša komponenta vyzerať. Môžete tiež:
Keď ste spokojní s vašou komponentou, nástroj automaticky vygeneruje zodpovedajúci kód React s triedami Tailwind CSS. Môžete:
Tlačidlá sú základné používateľské rozhrania pre interakcie používateľov. S naším tvorca môžete vytvárať rôzne štýly tlačidiel:
Kľúčové možnosti prispôsobenia:
Príklad vygenerovaného kódu:
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 Odoslať
5</button>
6Textové vstupy umožňujú používateľom zadávať jednoriadkový text vo formulároch. Náš tvorca vám pomôže vytvoriť vstupy, ktoré zodpovedajú vášmu dizajnovému systému:
Kľúčové možnosti prispôsobenia:
Príklad vygenerovaného kódu:
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="Zadajte svoje meno"
5 required
6/>
7Textové oblasti sa používajú na viacriadkový textový vstup, ako sú komentáre alebo popisy:
Kľúčové možnosti prispôsobenia:
Príklad vygenerovaného kódu:
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="Zadajte svoju správu"
4 rows={4}
5></textarea>
6Rozbaľovacie ponuky umožňujú používateľom vybrať si zo zoznamu možností:
Kľúčové možnosti prispôsobenia:
Príklad vygenerovaného kódu:
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">Možnosť 1</option>
6 <option value="option2">Možnosť 2</option>
7 <option value="option3">Možnosť 3</option>
8</select>
9Drobková navigácia pomáha používateľom pochopiť ich umiestnenie v hierarchii webovej stránky:
Kľúčové možnosti prispôsobenia:
Príklad vygenerovaného kódu:
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">Domov</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">Produkty</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>
16Náš tvorca komponentov využíva triedy utility Tailwind CSS na štýlovanie komponentov. Tu je rýchla referencia najčastejšie používaných vlastností:
Tailwind poskytuje komplexnú farebnú paletu. Niektoré príklady:
text-{color}-{shade} (napr. text-blue-500, text-red-600)bg-{color}-{shade} (napr. bg-green-500, bg-gray-100)border-{color}-{shade} (napr. border-gray-300)Ovládajte odsadenie a okraj pomocou týchto tried:
p-{size}, px-{size}, py-{size} (napr. p-4, px-3 py-2)m-{size}, mx-{size}, my-{size} (napr. m-2, mx-auto)Upravte vzhľad textu pomocou:
text-{size} (napr. text-sm, text-lg)font-{weight} (napr. font-bold, font-medium)text-{alignment} (napr. text-center, text-right)Prispôsobte okraje pomocou:
border, border-{width} (napr. border-2)rounded, rounded-{size} (napr. rounded-md, rounded-full)Nastavte rozmery pomocou:
w-{size} (napr. w-full, w-1/2)h-{size} (napr. h-10, h-auto)Štýlujte rôzne stavy pomocou:
hover:{property} (napr. hover:bg-blue-600)focus:{property} (napr. focus:ring-2)active:{property} (napr. active:bg-blue-700)disabled:{property} (napr. disabled:opacity-50)Tvorca komponentov React Tailwind je dokonalý na rýchle prototypovanie používateľských rozhraní pred ich implementáciou vo vašom skutočnom kóde. Toto môže ušetriť významný čas vývoja tým
Objavte ďalšie nástroje, ktoré by mohli byť užitočné pre vašu pracovnú postupnosť