🛠️

Whiz Tools

ساخت کامپوننت های React Tailwind با پیش نمایش زنده و صدور کد

ساخت کامپوننت های سفارشی React با Tailwind CSS. ایجاد دکمه ها، ورودی ها، textarea ها، انتخاب ها و breadcrumb ها با پیش نمایش آنی و کد تولید شده آماده برای استفاده در پروژه های خود.

ساخت کامپوننت React با Tailwind CSS

ساخت کامپوننت های React با Tailwind 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 یک ویرایشگر بصری قدرتمند است که به شما کمک می‌کند تا کامپوننت‌های React سفارشی با Tailwind CSS را به صورت آنی ایجاد کنید. این ساخت کامپوننت React Tailwind رایگان آنلاین به توسعه‌دهندگان و طراحان امکان می‌دهد تا بدون نوشتن دستی کد CSS، کامپوننت‌های UI آماده برای تولید را بسازند، سفارشی‌سازی کنند و صادر کنند. با ساخت کامپوننت React Tailwind با پیش‌نمایش زنده ما، می‌توانید تغییرات زنده را در حالی که دکمه‌ها، فرم‌ها، ورودی‌ها و کامپوننت‌های ناوبری را با استفاده از چارچوب CSS utility-first Tailwind طراحی می‌کنید، مشاهده کنید.

ساخت کامپوننت React Tailwind ما امکان ایجاد عناصر UI ضروری از جمله دکمه‌ها، ورودی‌های متنی، textarea‌ها، منوهای انتخاب و ناوبری نان‌کرامب را فراهم می‌کند. هر کامپوننت React می‌تواند با استفاده از کلاس‌های utility Tailwind CSS برای رنگ‌ها، فاصله‌ها، تایپوگرافی، حاشیه‌ها و طراحی واکنش‌گرا به طور کامل سفارشی‌سازی شود - همه اینها با پیش‌نمایش زنده آنی که به طور پویا هنگام تغییر خصوصیات به روز می‌شود. برای پروتوتایپ سریع و توسعه کامپوننت کاملاً مناسب است.

ویژگی‌های کلیدی ساخت کامپوننت React Tailwind

  • انواع متعدد کامپوننت: ساخت دکمه‌ها، ورودی‌های متنی، textarea‌ها، منوهای انتخاب و ناوبری نان‌کرامب
  • پیش‌نمایش زنده: مشاهده به‌روزرسانی کامپوننت‌های خود در زمان واقعی هنگام تغییر خصوصیات
  • آزمایش واکنش‌گرا: پیش‌نمایش کامپوننت‌های خود در نمایش‌های موبایل، تبلت و دسکتاپ
  • نمایش وضعیت: آزمایش چگونگی ظاهر شدن کامپوننت‌های شما در وضعیت‌های مختلف (عادی، هاور، فوکوس، فعال)
  • تولید کد: دریافت کد React تمیز و آماده برای استفاده با کلاس‌های Tailwind CSS
  • کپی به کلیپ‌بورد: کپی آسان کد تولید شده با یک کلیک
  • بدون وابستگی: کاملاً در مرورگر کار می‌کند بدون نیاز به تماس‌های API خارجی یا الزامات backend

چگونه از ساخت کامپوننت React Tailwind استفاده کنیم: راهنمای گام به گام

گام 1: انتخاب نوع کامپوننت React

ابتدا نوع کامپوننتی که می‌خواهید بسازید را از گزینه‌های موجود انتخاب کنید:

  • دکمه: ایجاد دکمه‌های فراخوانی به عمل، دکمه‌های ارسال یا دکمه‌های ناوبری
  • ورودی متنی: طراحی فیلدهای ورودی فرم برای جمع‌آوری متن تک‌خطی
  • textarea: ایجاد مناطق ورودی متن چند‌خطی برای محتوای طولانی‌تر
  • انتخاب: ایجاد منوهای انتخاب کشویی با گزینه‌های سفارشی‌سازی‌شده
  • نان‌کرامب: طراحی نان‌کرامب‌های ناوبری برای نشان دادن سلسله‌مراتب صفحه

هر نوع کامپوننت دارای مجموعه‌ای از خصوصیات قابل سفارشی‌سازی است که در پنل خصوصیات ظاهر می‌شود.

گام 2: سفارشی‌سازی خصوصیات Tailwind CSS

پس از انتخاب نوع کامپوننت، می‌توانید ظاهر و رفتار آن را با استفاده از پنل خصوصیات سفارشی‌سازی کنید. خصوصیات رایج شامل موارد زیر است:

  • محتوای متن: تنظیم متن نمایش داده شده روی دکمه‌ها یا متن جایگزین برای ورودی‌ها
  • رنگ‌ها: انتخاب رنگ‌های متن و پس‌زمینه از پالت رنگ Tailwind
  • پرکردن: تنظیم فاصله داخلی کامپوننت
  • حاشیه: تنظیم فاصله خارجی اطراف کامپوننت
  • حاشیه: افزودن حاشیه با سبک‌ها، عرض‌ها و رنگ‌های مختلف
  • شعاع حاشیه: گرد کردن گوشه‌های کامپوننت
  • عرض: تنظیم عرض کامپوننت (خودکار، کامل یا بر اساس درصد)
  • تایپوگرافی: تنظیم اندازه، وزن و سایر خصوصیات متن

برای انواع خاص کامپوننت، خصوصیات اضافی در دسترس هستند:

  • ورودی متنی/textarea: تنظیم متن جایگزین، وضعیت اجباری و وضعیت غیرفعال
  • textarea: تنظیم تعداد ردیف‌ها
  • انتخاب: افزودن، ویرایش یا حذف گزینه‌ها
  • نان‌کرامب: پیکربندی موارد و پیوندهای ناوبری

گام 3: پیش‌نمایش زنده کامپوننت‌های React

هنگام تنظیم خصوصیات، پیش‌نمایش زنده به طور آنی به‌روز می‌شود و دقیقاً نشان می‌دهد که کامپوننت شما چگونه به نظر خواهد رسید. همچنین می‌توانید:

  • آزمایش رفتار واکنش‌گرا: در نمایش‌های موبایل، تبلت و دسکتاپ جابجا شوید تا مطمئن شوید کامپوننت شما در همه اندازه‌های صفحه خوب به نظر می‌رسد
  • بررسی وضعیت‌های مختلف: ببینید کامپوننت شما در وضعیت‌های عادی، هاور، فوکوس و فعال چگونه به نظر می‌رسد

گام 4: صادر کردن کد React Tailwind

وقتی از کامپوننت خود راضی شدید، ابزار به طور خودکار کد React مربوطه با کلاس‌های Tailwind CSS را تولید می‌کند. می‌توانید:

  • بررسی کد تولید شده: کد JSX React دقیق با همه کلاس‌های Tailwind اعمال شده را ببینید
  • کپی به کلیپ‌بورد: دکمه "کپی کد" را کلیک کنید تا کد را به کلیپ‌بورد خود کپی کنید
  • استفاده در پروژه خود: کد را مستقیماً در پروژه React خود بچسبانید

انواع کامپوننت React Tailwind: راهنمای کامل

دکمه‌ها

دکمه‌ها عناصر UI ضروری برای تعامل کاربر هستند. با ساخت‌کننده ما می‌توانید انواع مختلف سبک‌های دکمه را ایجاد کنید:

  • دکمه‌های اقدام اصلی
  • دکمه‌های ثانویه یا دارای طرح
  • دکمه‌های آیکون
  • دکمه‌های تمام‌عرض
  • دکمه‌های غیرفعال

گزینه‌های سفارشی‌سازی کلیدی:

  • محتوای متن
  • رنگ‌های پس‌زمینه و متن
  • پرکردن و حاشیه
  • حاشیه و شعاع حاشیه
  • عرض و ارتفاع
  • اندازه و وزن قلم
  • وضعیت‌های هاور، فوکوس و فعال

مثال کد React تولید شده:

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  ارسال
5</button>
6

ورودی‌های متنی

ورودی‌های متنی به کاربران امکان می‌دهند تا متن تک‌خطی را در فرم‌ها وارد کنند. ساخت‌کننده ما به شما کمک می‌کند تا ورودی‌هایی ایجاد کنید که با سیستم طراحی شما هماهنگ باشند:

گزینه‌های سفارشی‌سازی کلیدی:

  • متن جایگزین
  • سبک‌ها و رنگ‌های حاشیه
  • پرکردن و عرض
  • وضعیت‌های اجباری و غیرفعال
  • سبک‌های فوکوس

مثال کد React تولید شده:

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="نام خود را وارد کنید"
5  required
6/>
7

textarea‌ها

textarea‌ها برای ورودی متن چند‌خطی مانند نظرات یا توضیحات استفاده می‌شوند:

گزینه‌های سفارشی‌سازی کلیدی:

  • تعداد ردیف‌ها
  • متن جایگزین
  • رفتار تغییر اندازه
  • حاشیه و پرکردن
  • وضعیت‌های اجباری و غیرفعال

مثال کد React تولید شده:

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="پیام خود را وارد کنید"
4  rows={4}
5></textarea>
6

منوهای انتخاب کشویی

منوهای انتخاب کشویی به کاربران امکان می‌دهند تا از یک لیست گزینه‌ها انتخاب کنند:

گزینه‌های سفارشی‌سازی کلیدی:

  • موارد گزینه (متن و مقدار)
  • حاشیه و پرکردن
  • عرض و ظاهر
  • وضعیت‌های اجباری و غیرفعال

مثال کد React تولید شده:

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</option>
6  <option value="option2">گزینه 2</option>
7  <option value="option3">گزینه 3</option>
8</select>
9

ناوبری نان

🔗

ابزارهای مرتبط

کشف ابزارهای بیشتری که ممکن است برای جریان کاری شما مفید باشند

محاسبه‌گر گام پیچ - تبدیل TPI به گام به‌طور آنی رایگان

امتحان این ابزار