Pro

کپی کد کامپوننت

کپی کد کامپوننت هر عنصری را در یک صفحه وب به یک فایل کامپوننت تمیز و آماده تولید برای framework انتخابی شما تبدیل می‌کند. روی یک عنصر کلیک کنید و یک کامپوننت کامل React JSX، Vue SFC یا Svelte دریافت کنید.

افزودن به Chrome افزودن به Edge افزودن به FireFox

شکاف بزرگی بین دیدن یک عنصر UI خوب طراحی‌شده در یک صفحه وب و داشتن آن به عنوان یک کامپوننت قابل استفاده در پروژه وجود دارد. کپی کد کامپوننت همه این کار را در یک کلیک انجام می‌دهد. ساختار DOM و استایل‌های محاسبه‌شده عنصر را می‌خواند، سپس کد کامپوننت idiomatic برای React، Vue یا Svelte تولید می‌کند. خروجی قالب‌بندی‌شده و آماده الصاق است.

پیش‌نمایش زنده

example.com/ui-library

Click any element to generate component code

Jane Cooper

Frontend Developer

Building beautiful interfaces with modern web technologies.

Component Code

React Vue Svelte


                    export default function UserCard() {

                      return (

                        <div className="card">

                          <div className="header">

                            <img className="avatar" />

                            <div>

                              <h3>Jane Cooper</h3>

                              <span>Frontend Dev</span>

                          </div>

                        </div>

                      );

                    }

React JSX Copy Code

ویژگی‌های کلیدی

خروجی Multi-Framework

بین سه فرمت خروجی فوراً جابه‌جا شوید: React (کامپوننت functional با JSX)، Vue (SFC با template، script setup و style blocks) یا Svelte (markup با style block).

کد تمیز و Idiomatic

کد تولیدشده فقط یک dump خام نیست — به‌درستی ساختاریافته با تورفتگی صحیح، نام‌های کامپوننت و کلاس معنادار و الگوهای خاص framework مثل defineProps (Vue).

Scoped Styles موجود است

استایل‌های CSS محاسبه‌شده از عنصر استخراج شده و به عنوان scoped styles در کامپوننت گنجانده می‌شوند. React یک styles object، Vue یک scoped style block و Svelte استایل‌های component-scoped دریافت می‌کند.

فرزندان تودرتو حفظ می‌شوند

صادرات شامل همه عناصر فرزند به‌صورت بازگشتی است. یک کامپوننت کارت با header، تصویر، عنوان، توضیحات و دکمه به عنوان یک کامپوننت کامل صادر می‌شود.

کپی یک‌کلیک

روی دکمه کپی کلیک کنید تا کد کامپوننت کامل در کلیپ‌بورد باشد. مستقیماً در یک فایل جدید در پروژه الصاق کنید.

پیش‌نمایش با Syntax Highlighting

کد تولیدشده با syntax highlighting کامل در پانل پیش‌نمایش نشان داده می‌شود. تگ‌های JSX، props، ویژگی‌های استایل و مقادیر همه رنگ‌بندی شده‌اند.

موارد استفاده رایج

نمونه‌سازی سریع کامپوننت

یک الگوی UI در هر وب‌سایتی می‌بینید که می‌خواهید در پروژه داشته باشید؟ روی آن کلیک کنید، کد کامپوننت را دریافت کنید و از همانجا سفارشی کنید.

کمک به مهاجرت Framework

پروژه را از Vue به React منتقل می‌کنید؟ روی کامپوننت‌های موجود در سایت زنده کلیک کنید و کد در framework هدف تولید کنید.

ساخت کتابخانه‌های کامپوننت

الگوهای طراحی را از یک mockup یا سایت مرجع در یک کتابخانه کامپوننت قابل استفاده مجدد استخراج کنید.

یادگیری الگوهای کامپوننت

مطالعه کنید چگونه وب‌سایت‌های تولید کامپوننت‌های خود را ساختار می‌دهند. یک منوی ناوبری پیچیده، جدول داده یا dialog مودال را کلیک کنید.

تسریع تحویل طراحی

طراحان اغلب پیاده‌سازی‌های مرجع را در HTML استاتیک می‌سازند. روی عناصر آن‌ها کلیک کنید و کامپوننت‌های خاص framework تولید کنید که توسعه‌دهندگان می‌توانند فوراً استفاده کنند.

نحوه استفاده

فعال‌سازی کپی کد کامپوننت

داک شناور DevSuite Pro را باز کنید و روی آیکون کپی کد کامپوننت کلیک کنید. یک پانل با تب‌های React، Vue و Svelte باز می‌شود.

روی عنصری در صفحه کلیک کنید

روی هر عنصر کلیک کنید — یک کارت، گروه دکمه، نوار ناوبری، بخش فرم. عنصر با حاشیه بنفش برجسته می‌شود و پانل کد کامپوننت تولید می‌کند.

Framework خود را انتخاب کنید

روی تب React، Vue یا Svelte کلیک کنید تا عنصر به عنوان کامپوننت در آن framework رندر شود.

کد تولیدشده را بررسی کنید

پیش‌نمایش با syntax highlighting فایل کامپوننت کامل را نشان می‌دهد — imports، تابع/قالب کامپوننت، استایل‌ها و exports.

کپی و الصاق در پروژه

روی «کپی کد» کلیک کنید تا کل کامپوننت را دریافت کنید. در یک فایل جدید .jsx، .vue یا .svelte الصاق کنید.