React Tailwind Component Builder: Izveidojiet pielāgotas UI komponentes ar tiešo priekšskatījumu

Izveidojiet React Tailwind komponentes nekavējoties ar vizuālo redaktoru

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.

Galvenās React Tailwind Component Builder funkcijas

• Dažādi komponentu veidi: Izveidojiet pogas, teksta ievades, teksta laukus, izvēlnes un maizes drupačas navigāciju
• Tiešais priekšskatījums: Skatiet, kā jūsu komponentes tiek atjauninātas reālajā laikā, modificējot īpašības
• Adaptīvā testēšana: Priekšskatiet savas komponentes mobilajā, planšetdatora un darbvirsmas skatā
• Stāvokļa vizualizācija: Pārbaudiet, kā jūsu komponentes izskatās dažādos stāvokļos (normālā, pārlidojuma, fokusa, aktīvā)
• Koda ģenerēšana: Iegūstiet tīru, gatavu lietošanai React kodu ar Tailwind CSS klasēm
• Kopēšana uz starpliktuvi: Viegli kopējiet ģenerēto kodu ar vienu klikšķi
• Nav atkarību: Darbojas pilnībā pārlūkprogrammā bez ārējiem API zvaniem vai servera prasībām

Kā izmantot React Tailwind Component Builder: soli pa solim

1. solis: Izvēlieties savu React komponentes veidu

Sāciet, izvēloties komponentes veidu, ko vēlaties izveidot no pieejamajām opcijām:

• Poga: Izveidojiet uzaicinājuma pogas, iesniegšanas pogas vai navigācijas pogas
• Teksta ievade: Izveidojiet formas ievades laukus vienas rindiņas teksta ievadei
• Teksta lauks: Izveidojiet daudzrindu teksta ievades laukus garākam saturam
• Izvēlne: Izveidojiet nolaižamās izvēlnes ar pielāgojamām opcijām
• Maizes drupačas: Izveidojiet navigācijas maizes drupačas, lai parādītu lapas hierarhiju

Katram komponentes veidam ir savs kopums no pielāgojamām īpašībām, kas parādīsies īpašību panelī.

2. solis: Pielāgojiet Tailwind CSS īpašības

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:

• Teksta saturs: Iestatiet tekstu, kas tiek parādīts pogās, vai aizpildījuma tekstu ievadēm
• Krāsas: Izvēlieties teksta un fona krāsas no Tailwind krāsu paletēm
• Iekšējais telpiskums: Pielāgojiet komponentes iekšējo telpiskumu
• Ārējais telpiskums: Iestatiet komponentes ārējo telpiskumu
• Robežas: Pievienojiet robežas ar dažādiem stiliem, platumiem un krāsām
• Robežu noapaļojums: Noapaļojiet komponentes stūrus
• Platums: Iestatiet komponentes platumu (automātisks, pilns vai procentuāls)
• Tipografija: Pielāgojiet fontu lielumu, svaru un citas teksta īpašības

Konkrētiem komponenšu veidiem ir pieejamas papildu īpašības:

• Teksta ievade/Teksta lauks: Iestatiet aizpildījuma tekstu, obligāto statusu un atspējoto stāvokli
• Teksta lauks: Pielāgojiet rindu skaitu
• Izvēlne: Pievienojiet, rediģējiet vai noņemiet opcijas
• Maizes drupačas: Konfigurējiet navigācijas vienumus un saites

3. solis: Tiešais React komponentu priekšskatījums

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:

• Pārbaudīt adaptīvo uzvedību: Pārslēdzieties starp mobilā, planšetdatora un darbvirsmas skatiem, lai nodrošinātu, ka jūsu komponente labi izskatās visos ekrāna izmēros
• Pārbaudīt dažādus stāvokļus: Skatiet, kā jūsu komponente izskatās normālā, pārlidojuma, fokusa un aktīvā stāvoklī

4. solis: Eksportējiet React Tailwind kodu

Kad esat apmierināts ar savu komponentu, rīks automātiski ģenerē atbilstošo React kodu ar Tailwind CSS klasēm. Jūs varat:

• Pārskatīt ģenerēto kodu: Skatiet precīzo React JSX kodu ar visām piemērotajām Tailwind klasēm
• Kopēt uz starpliktuvi: Noklikšķiniet uz "Kopēt kodu", lai kopētu kodu uz jūsu starpliktuvi
• Izmantot savā projektā: Ielīmējiet kodu tieši savā React projektā

React Tailwind komponentu veidi: pilnīgs ceļvedis

Pogas

Pogas ir būtiski UI elementi lietotāju mijiedarbībai. Ar mūsu veidotāju varat izveidot dažādus pogu stilus:

• Primārās darbības pogas
• Sekundārās vai kontūra pogas
• Ikonu pogas
• Pilna platuma pogas
• Atspējotas pogas

Galvenās pielāgošanas opcijas:

• Teksta saturs
• Fona un teksta krāsas
• Iekšējais un ārējais telpiskums
• Robežas un robežu noapaļojums
• Platums un augstums
• Fontu lielums un svars
• Pārlidojuma, fokusa un aktīvie stāvokļi

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

Teksta ievades

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

• Aizpildījuma teksts
• Robežu stili un krāsas
• Iekšējais telpiskums un platums
• Obligātais un atspējotais stāvoklis
• Fokusa stili

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

Teksta lauks

Teksta lauks tiek izmantots daudzrindu teksta ievadei, piemēram, komentāriem vai aprakstiem:

Galvenās pielāgošanas opcijas:

• Rindu skaits
• Aizpildījuma teksts
• Izmēra maiņas uzvedība
• Robežas un iekšējais telpiskums
• Obligātais un atspējotais stāvoklis

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

Izvēlnes nolaižamās izvēlnes

Izvēlnes nolaižamās izvēlnes ļauj lietotājiem izvēlēties no saraksta ar opcijām:

Galvenās pielāgošanas opcijas:

• Opciju vienumi (teksts un vērtība)
• Robežas un iekšējais telpiskums
• Platums un izskats
• Obligātais un atspējotais stāvoklis

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

Maizes drupačas navigācija

Maizes drupačas palīdz lietotājiem saprast to atrašanās vietu tīmekļa vietnes hierarhijā:

Galvenās pielāgošanas opcijas:

• Navigācijas vienumi un saites
• Atdalītāja stils
• Teksta un pārlidojuma krāsas
• Telpiskums starp vienumiem

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

Tailwind CSS klašu un īpašību atsauce

Mū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:

Krāsas

Tailwind nodrošina visaptverošu krāsu paleti. Dažas piemēri:

• Teksta krāsas: text-{color}-{shade} (piem., text-blue-500, text-red-600)
• Fona krāsas: bg-{color}-{shade} (piem., bg-green-500, bg-gray-100)
• Robežu krāsas: border-{color}-{shade} (piem., border-gray-300)

Telpiskums

Kontrolējiet iekšējo un ārējo telpiskumu ar šīm klasēm:

• Iekšējais telpiskums: p-{size}, px-{size}, py-{size} (piem., p-4, px-3 py-2)
• Ārējais telpiskums: m-{size}, mx-{size}, my-{size} (piem., m-2, mx-auto)

Tipografija

Pielāgojiet teksta izskatu ar:

• Fontu lielums: text-{size} (piem., text-sm, text-lg)
• Fontu svars: font-{weight} (piem., font-bold, font-medium)
• Teksta līdzināšana: text-{alignment} (piem., text-center, text-right)

Robežas

Pielāgojiet robežas ar:

• Robežu platums: border, border-{width} (piem., border-2)
• Robežu noapaļojums: rounded, rounded-{size} (piem., rounded-md, rounded-full)

Platums un augstums

Iestatiet izmērus ar:

• Platums: w-{size} (piem., w-full, w-1/2)
• Augstums: