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