Izveidojiet pielāgotas React komponentes ar Tailwind CSS. Izveidojiet pogas, ievades laukus, teksta laukus, izvēlnes un maizes drupačas ar reāllaika priekšskatījumu un ģenerētu kodu, kas gatavs lietošanai jūsu projektos.
Izveidojiet React komponentus ar Tailwind CSS un skatiet tiešraides priekšskatījumu
<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 Component Builder ir spēcīgs vizuālais redaktors, kas palīdz jums nekavējoties izveidot pielāgotas React komponentes ar Tailwind CSS. Šis bezmaksas tiešsaistes React Tailwind komponenšu veidotājs ļauj izstrādātājiem un dizaineriem būvēt, pielāgot un eksportēt ražošanai gatavus UI komponentus, nerakstot manuāli CSS kodu. Ar mūsu tiešā priekšskatījuma React Tailwind veidotāju jūs varat redzēt reāllaika izmaiņas, veidojot pogas, formas, ievades laukus un navigācijas komponentus, izmantojot Tailwind utility-first CSS ietvaru.
Mūsu React Tailwind komponenšu veidotājs atbalsta būtisku UI elementu izveidi, tostarp pogas, teksta ievades, teksta laukus, izvēlnes nolaižamās izvēlnes un maizes drupačas navigāciju. Katra React komponente var tikt pilnībā pielāgota, izmantojot Tailwind CSS utility klases krāsām, telpiskumam, tipografijai, robežām un adaptīvam dizainam - ar tūlītēju tiešo priekšskatījumu, kas dinamiski atjaunojas, modificējot īpašības. Ideāli piemērots ātrai prototipu veidošanai un komponentu izstrādei.
Sāciet, izvēloties komponentes veidu, ko vēlaties izveidot no pieejamajām opcijām:
Katram komponentes veidam ir savs kopums no pielāgojamām īpašībām, kas parādīsies īpašību panelī.
Pēc komponentes veida izvēles varat pielāgot tās izskatu un uzvedību, izmantojot īpašību paneli. Bieži lietotās īpašības ietver:
Konkrētiem komponenšu veidiem ir pieejamas papildu īpašības:
Pielāgojot īpašības, tiešais priekšskatījums tiek atjaunināts reālajā laikā, parādot, kā izskatīsies jūsu komponente. Jūs arī varat:
Kad esat apmierināts ar savu komponentu, rīks automātiski ģenerē atbilstošo React kodu ar Tailwind CSS klasēm. Jūs varat:
Pogas ir būtiski UI elementi lietotāju mijiedarbībai. Ar mūsu veidotāju varat izveidot dažādus pogu stilus:
Galvenās pielāgošanas opcijas:
Piemērs ģenerētajam kodam:
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 Iesniegt
5</button>
6Teksta ievades ļauj lietotājiem ievadīt vienas rindiņas tekstu formās. Mūsu veidotājs palīdz izveidot ievades, kas atbilst jūsu dizaina sistēmai:
Galvenās pielāgošanas opcijas:
Piemērs ģenerētajam kodam:
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="Ievadiet savu vārdu"
5 required
6/>
7Teksta lauks tiek izmantots daudzrindu teksta ievadei, piemēram, komentāriem vai aprakstiem:
Galvenās pielāgošanas opcijas:
Piemērs ģenerētajam kodam:
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="Ievadiet savu ziņojumu"
4 rows={4}
5></textarea>
6Izvēlnes nolaižamās izvēlnes ļauj lietotājiem izvēlēties no saraksta ar opcijām:
Galvenās pielāgošanas opcijas:
Piemērs ģenerētajam kodam:
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. opcija</option>
6 <option value="option2">2. opcija</option>
7 <option value="option3">3. opcija</option>
8</select>
9Maizes drupačas palīdz lietotājiem saprast to atrašanās vietu tīmekļa vietnes hierarhijā:
Galvenās pielāgošanas opcijas:
Piemērs ģenerētajam kodam:
1<nav className="flex" aria-label="Maizes drupačas">
2 <ol className="flex space-x-2 text-gray-700">
3 <li className="flex items-center">
4 <a href="/" className="hover:text-blue-600">Sākums</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">Produkti</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">Kategorija</a>
13 </li>
14 </ol>
15</nav>
16Mūsu komponenšu veidotājs izmanto Tailwind CSS utility klases, lai noformētu komponentes. Šeit ir īss atsauces materiāls par visbiežāk lietotajām īpašībām:
Tailwind nodrošina visaptverošu krāsu paleti. Dažas piemēri:
text-{color}-{shade} (piem., text-blue-500, text-red-600)bg-{color}-{shade} (piem., bg-green-500, bg-gray-100)border-{color}-{shade} (piem., border-gray-300)Kontrolējiet iekšējo un ārējo telpiskumu ar šīm klasēm:
p-{size}, px-{size}, py-{size} (piem., p-4, px-3 py-2)m-{size}, mx-{size}, my-{size} (piem., m-2, mx-auto)Pielāgojiet teksta izskatu ar:
text-{size} (piem., text-sm, text-lg)font-{weight} (piem., font-bold, font-medium)text-{alignment} (piem., text-center, text-right)Pielāgojiet robežas ar:
border, border-{width} (piem., border-2)rounded, rounded-{size} (piem., rounded-md, rounded-full)Iestatiet izmērus ar:
w-{size} (piem., w-full, w-1/2)Atklājiet vairāk rīku, kas varētu būt noderīgi jūsu darbplūsmai