લાઇવ પ્રીવ્યૂ અને કોડ નિકાસ સાથે રિએક્ટ ટેલવિન્ડ કમ્પોનન્ટ બિલ્ડર
ટેલવિન્ડ CSS સાથે કસ્ટમ રિએક્ટ કમ્પોનન્ટ્સ બનાવો. બટનો, ઇનપુટ્સ, ટેક્સ્ટ એરિયાઓ, સિલેક્ટ્સ અને બ્રેડક્રમ્બ્સ બનાવો જે તમારા પ્રોજેક્ટ્સમાં વાપરવા માટે તૈયાર છે.
ટેલવિન્ડ CSS સાથે રિએક્ટ કમ્પોનેન્ટ બિલ્ડર
ટેલવિન્ડ CSS સાથે રિએક્ટ કમ્પોનેન્ટ બનાવો અને લાઇવ પ્રીવ્યૂ જુઓ
કમ્પોનેન્ટ પ્રકાર
ગુણધર્મો
પ્રતિસાદી દૃશ્ય
સ્થિતિ પ્રીવ્યૂ
લાઇવ પ્રીવ્યૂ
જનરેટ થયેલ કોડ
<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 કમ્પોનેન્ટ બિલ્ડર: લાઇવ પ્રીવ્યૂ સાથે કસ્ટમ UI કમ્પોનેન્ટ્સ બનાવો
વિઝ્યુઅલ એડિટર સાથે React Tailwind કમ્પોનેન્ટ્સ તરત બનાવો
React Tailwind કમ્પોનેન્ટ બિલ્ડર એ એક શક્તિશાળી વિઝ્યુઅલ એડિટર છે જે તમને Tailwind CSS સાથે કસ્ટમ React કમ્પોનેન્ટ્સ બનાવવામાં મદદ કરે છે. આ ફ્રી ઓનલાઇન React Tailwind કમ્પોનેન્ટ બિલ્ડર ડેવલપર્સ અને ડિઝાઇનર્સને મેન્યુઅલી CSS કોડ લખ્યા વિના ઉત્પાદન-તૈયાર UI કમ્પોનેન્ટ્સ બનાવવા, કસ્ટમાઇઝ કરવા અને નિકાસ કરવામાં મદદ કરે છે. આમાં લાઇવ પ્રીવ્યૂ React Tailwind બિલ્ડર સાથે, તમે બટન, ફોર્મ, ઇનપુટ અને નેવિગેશન કમ્પોનેન્ટ્સને Tailwind's યુટિલિટી-પ્રથમ CSS ફ્રેમવર્ક ઉપયોગ કરીને ડિઝાઇન કરતી વખતે રિયલ-ટાઇમ ફેરફારોને જોઈ શકો છો.
આમાં React Tailwind કમ્પોનેન્ટ બિલ્ડર બટન, ટેક્સ્ટ ઇનપુટ, ટેક્સ્ટેરિયા, સિલેક્ટ ડ્રોપડાઉન અને બ્રેડક્રમ નેવિગેશન સહિતના આવશ્યક UI તત્વો બનાવવાનું સમર્થન કરે છે. દરેક React કમ્પોનેન્ટને રંગો, સ્પેસિંગ, ટાઇપોગ્રાફી, બોર્ડર્સ અને રિસ્પોન્સિવ ડિઝાઇન માટે Tailwind CSS યુટિલિટી વર્ગો નો ઉપયોગ કરીને પૂર્ણપણે કસ્ટમાઇઝ કરી શકાય છે - બધું તરત લાઇવ પ્રીવ્યૂ સાથે જે તમે ગુણધર્મોમાં ફેરફાર કરતી વખતે ડાયનેમિકલી અપડેટ થાય છે. રેપિડ પ્રોટોટાઇપિંગ અને કમ્પોનેન્ટ વિકાસ માટે આ પરફેક્ટ છે.
React Tailwind કમ્પોનેન્ટ બિલ્ડરની મુખ્ય વિશેષતાઓ
- વિવિધ કમ્પોનેન્ટ પ્રકારો: બટન, ટેક્સ્ટ ઇનપુટ, ટેક્સ્ટેરિયા, સિલેક્ટ મેન્યુ અને બ્રેડક્રમ નેવિગેશન બનાવો
- લાઇવ પ્રીવ્યૂ: ગુણધર્મોમાં ફેરફાર કરતી વખતે તમારા કમ્પોનેન્ટ્સ અપડેટ થતા જુઓ
- રિસ્પોન્સિવ ટેસ્ટિંગ: મોબાઇલ, ટેબ્લેટ અને ડેસ્કટોપ દ્રશ્યોમાં તમારા કમ્પોનેન્ટ્સનો પ્રીવ્યૂ જુઓ
- સ્ટેટ વિઝ્યુઅલાઇઝેશન: તમારા કમ્પોનેન્ટ્સ કેવા દેખાય છે તે જુઓ (સામાન્ય, હોવર, ફોકસ, સક્રિય)
- કોડ જનરેશન: Tailwind CSS વર્ગો સાથે સ્વચ્છ, તૈયાર-વાપરવા માટેનો React કોડ મેળવો
- ક્લિપબોર્ડ પર કૉપી કરો: એક ક્લિક સાથે જનરેટ કરેલા કોડને સરળતાથી કૉપી કરો
- કોઈ નિર્ભરતા નહીં: બ્રાઉઝર માં જ કામ કરે છે, કોઈ બાહ્ય API કૉલ્સ અથવા બેકએન્ડ આવશ્યકતાઓ વિના
React Tailwind કમ્પોનેન્ટ બિલ્ડર કેવી રીતે ઉપયોગ કરવો: પગલે પગલે માર્ગદર્શિકા
પગલું 1: તમારા React કમ્પોનેન્ટ પ્રકારની પસંદગી કરો
શરૂઆત કરવા માટે, તમે બનાવવા માંગતા કમ્પોનેન્ટના પ્રકારની પસંદગી કરો:
- બટન: કૉલ-ટુ-એક્શન બટન, સબમિટ બટન અથવા નેવિગેશન બટન બનાવો
- ટેક્સ્ટ ઇનપુટ: ફોર્મ ઇનપુટ ક્ષેત્રો માટે એકલ-લાઇન ટેક્સ્ટ ડિઝાઇન કરો
- ટેક્સ્ટેરિયા: લાંબા કન્ટેન્ટ માટે મલ્ટી-લાઇન ટેક્સ્ટ ઇનપુટ ક્ષેત્રો બનાવો
- સિલેક્ટ: કસ્ટમાઇઝ કરી શકાય તેવા વિકલ્પો સાથે ડ્રોપડાઉન પસંદગી મેન્યુ બનાવો
- બ્રેડક્રમ: પૃષ્ઠ હિરારકી બતાવવા માટે નેવિગેશન બ્રેડક્રમ્બ્સ ડિઝાઇન કરો
દરેક કમ્પોનેન્ટ પ્રકારની પોતાની સેટ કસ્ટમાઇઝેબલ ગુણધર્મો છે જે ગુણધર્મ પેનલમાં દેખાશે.
પગલું 2: Tailwind CSS ગુણધર્મો કસ્ટમાઇઝ કરો
એક કમ્પોનેન્ટ પ્રકારની પસંદગી કર્યા પછી, તમે ગુણધર્મ પેનલનો ઉપયોગ કરીને તેની દેખાવ અને વર્તન કસ્ટમાઇઝ કરી શકો છો. સામાન્ય ગુણધર્મો માં આ શામેલ છે:
- ટેક્સ્ટ કન્ટેન્ટ: બટન પર પ્રદર્શિત ટેક્સ્ટ અથવા ઇનપુટ માટે પ્લેસહોલ્ડર ટેક્સ્ટ સેટ કરો
- રંગો: Tailwind's રંગ પેલેટમાંથી ટેક્સ્ટ અને બૅકગ્રાઉન્ડ રંગો પસંદ કરો
- પૅડિંગ: કમ્પોનેન્ટના આંતરિક સ્પેસિંગને સમાયોજિત કરો
- મારજિન: કમ્પોનેન્ટની બાહ્ય સ્પેસિંગ સેટ કરો
- બોર્ડર: વિવિધ શૈલીઓ, પહોળાઈ અને રંગો સાથે બોર્ડર્સ ઉમેરો
- બોર્ડર રેડિયસ: તમારા કમ્પોનેન્ટના ખૂણાઓને ગોળ બનાવો
- પહોળાઈ: કમ્પોનેન્ટની પહોળાઈ સેટ કરો (ઑટો, પૂર્ણ અથવા ટકાવારી આધારિત)
- ટાઇપોગ્રાફી: ફોન્ટ કદ, વજન અને અન્ય ટેક્સ્ટ ગુણધર્મો સમાયોજિત કરો
વિશિષ્ટ કમ્પોનેન્ટ પ્રકારો માટે, વધારાના ગુણધર્મો ઉપલબ્ધ છે:
- ટેક્સ્ટ ઇનપુટ/ટેક્સ્ટેરિયા: પ્લેસહોલ્ડર ટેક્સ્ટ, આવશ્યક સ્થિતિ અને અક્ષમ સ્થિતિ સેટ કરો
- ટેક્સ્ટેરિયા: પંક્તિઓની સંખ્યા સમાયોજિત કરો
- સિલેક્ટ: વિકલ્પો ઉમેરો, સંપાદિત કરો અથવા દૂર કરો
- બ્રેડક્રમ: નેવિગેશન આઇટમ્સ અને લિંક્સ કોન્ફિગર કરો
પગલું 3: React કમ્પોનેન્ટ્સનો લાઇવ પ્રીવ્યૂ
તમે ગુણધર્મોમાં ફેરફાર કરતી વખતે, લાઇવ પ્રીવ્યૂ રિયલ-ટાઇમમાં અપડેટ થાય છે, જે તમારા કમ્પોનેન્ટ કેવા દેખાશે તે બતાવે છે. તમે આ પણ કરી શકો છો:
- રિસ્પોન્સિવ વર્તન ચકાસો: મોબાઇલ, ટેબ્લેટ અને ડેસ્કટોપ દ્રશ્યો વચ્ચે સ્વિચ કરીને તમારા કમ્પોનેન્ટ બધા સ્ક્રીન માપોમાં સારી રીતે દેખાય છે તે સુનિશ્ચિત કરો
- વિવિધ સ્થિતિઓ ચકાસો: તમારા કમ્પોનેન્ટ સામાન્ય, હોવર, ફોકસ અને સક્રિય સ્થિતિઓમાં કેવા દેખાય છે તે જુઓ
પગલું 4: React Tailwind કોડ નિકાસ કરો
એકવાર તમે તમારા કમ્પોનેન્ટથી સંતુષ્ટ થાઓ, ટૂલ ઑટોમેટિકલી Tailwind CSS વર્ગો સાથે સંબંધિત React JSX કોડ જનરેટ કરે છે. તમે આ કરી શકો છો:
- જનરેટ કરેલા કોડની સમીક્ષા કરો: લાગુ કરેલા બધા Tailwind વર
સંબંધિત સાધનો
તમારા વર્કફ્લો માટે ઉપયોગી થવાના વધુ સાધનો શોધો