«FrameUI کتابخانهٔ مؤلفه‌های Angular با سبک پیش‌فرض فنی ساخت»

اصل ماجرا

FrameUI نسخهٔ بتای یک کتابخانهٔ کامپوننت Angular را ارائه کرد. پس از بازخوردها، سبک پیش‌فرض به طرح فنی‌تر، لبه‌های تیز و رنگ‌های محدود تغییر یافت. توکن‌های CSS امکان سفارشی‌سازی ظاهر بدون تغییر منطق کامپوننت را می‌دهند.

متن کامل ترجمه‌شده

من به تازگی یک نسخه بتا از FrameUI، یک کتابخانه اجزای زاویه منتشر کردم. هدف ساده بود: با یک سیستم طراحی موضوعی، API های روشن و دستاوردی که استفاده واقعی را نشان می دهد، ابزارهای متفاوتی از UI زاویه را بسازید. پس از به اشتراک گذاشتن نسخه اول به طور عمومی، من بازخورد مفید دریافت کردم. برخی افراد از پروژه را دوست داشتند، اما یک نقطه صالحی هم وجود داشت: به نظر می رسید یک کتابخانه دیگر UI تحت تأثیر Shadcn. و صادقانه، این واقعیت بود. مشکل Shadcn Shadcn نبود که بسیاری از کار UI در فضای Frontend را تحت تأثیر قرار داد. رویکرد عملی است، اجزای پاک هستند، و بسیاری از توسعه دهندگان دوست دارند کد را مالک و تنظیم کنند. اما از آنجا که سبک آن به طور واضح شناخته شده استپس از بازخورد، من موضوع استاندارد را تغییر دادم. FrameUI در حال حاضر از یک سبک تکنولوژیکی تر، مانند blueprint استفاده می کند: - ضخامت های شفاف تر - سایه های کمتر - مرزهای روشن - تأکیدات قرمز محدود - ساختار قابل مشاهده - جزئیات زاویه کوچک در سطوح شفاف هدف این است که یک سبک استاندارد را ارائه دهد که برای UI های برنامه ای مناسب تر است: dashboards، ابزار داخلی، editors، صفحه نمایش admin و محصولات با توجه به توسعه دهندگان. مدل قطعه FrameUI به دو بسته تقسیم شده است: - @frame-ui-ng/foundation - شامل سبک های مشترک، تیکن ها و ارائه دهندگان. - @frame-ui-ng/components - شامل اولویت های UI. قطعات از انتخاب های زاویه استفاده می کنند. برخی از آنها بر اساس عناصر هستندبه عنوان مثال در این مقاله می توان گفت که در این مقاله می توان گفت که به عنوان مثال در این مقاله می توان گفت که به عنوان مثال در این مقاله می توان گفت که به عنوان مثال در این مطلب می توان گفت که به عنوان مثال در این مطلب می توان گفت که به عنوان مثال در این مطلب می توان گفت که به عنوان مثال در این مطلب می توان گفت که به عنوان مثال در این مطلب می توان گفت که به عنوان مثال در این مطلب می توان به عنوان مثال در این مطلب اشاره کرد که به عنوان مثال در این مطلب می توان به عنوان مثال در این مطلب اشاره کرد که به عنوان مثال در این مطلب می توان به عنوان مثال در این مطلب اشاره کرد که به عنوان مثال در این مطلب می توان به عنوان مثال در این مطلب اشاره کرد که به عنوان مثال در این مطلب می توان به عنوان مثال در این مطلب اشاره کرد که به عنوان مثال در این مطلب می توان به عنوان مثال در این مطلب اشاره کرد.همان طور که در مورد جزئیات قطعه مانند ارتفاع قطعه دستورالعمل، فاصله دکمه، مرزهای واردات یا سطوح فراوانی است. آنچه بعد از بازخوردها تغییر کرده است، بازخوردها به روشن کردن آنچه FrameUI نباید باشد کمک می کند. آن را نباید سعی کنید به یک نسخه دیگر زاویه ای از یک سبک بصری موجود باشد. آن را باید یک کتابخانه قطعه زاویه ای با هدایت استاندارد خود باشد. وضعیت فعلی FrameUI هنوز در بتا است. قطعه هایی وجود دارد که نیاز به پوشاک بیشتری دارند. برخی APIs ممکن است هنوز تغییر کند. دسترسی نیاز به تست مداوم است. نمونه های واقعی بیشتری مورد نیاز است. تمرکز فعلی این است: - بهبود پوشش قطعه - بهبود رفتار دسترسی - حفظ سیستم تیکن مطابقت - بهبود آزمون Doks - قطعه ها در طرح های کاربرد واقعی - جمع آوری بازخورد ازcom/gamekohl/frame-ui npm install @frame-ui-ng/foundation @frame-ui-ng/components اگر آن را امتحان کنید، من علاقه مند به بازخورد عملی هستم: - آیا API در زاویه طبیعی است؟ - آیا ابتدایی ها به اندازه کافی انعطاف پذیر هستند؟ - آیا سبک استاندارد مفید است یا بیش از حد مشخص است؟ - چه اجزای در دسترس هستند؟ - چه چیزی شما را از استفاده از آن در یک برنامه واقعی جلوگیری می کند؟ این نوع بازخورد در این مرحله بسیار مفید است.

چرا مهمه؟

بازخوردها باعث شد سبک پیش‌فرض کتابخانه از شبیه‌سازی دیگر کتابخانه‌ها فاصله بگیرد و به شکل فنی‌تر و مناسب برای داشبوردها و ابزارهای داخلی درآید. توسعه‌دهندگان Angular که به دنبال کتابخانه‌ای با API بومی و قابلیت تغییر تم با متغیرهای CSS هستند، تحت تأثیر این تغییر قرار می‌گیرند. خواننده باید این خبر را جدی بگیرد چون انتخاب کتابخانهٔ مناسب می‌تواند زمان توسعه را کاهش داده و تجربهٔ کاربری داخلی را بهبود بخشد.

به درد کی می‌خوره؟

• توسعه‌دهندگان Angular • تیم‌های UI/UX داخلی • مهندسان Front‑end که به توکن‌های CSS علاقه‌مندند • مدیران فنی که ابزارهای داخلی را ارزیابی می‌کنند

تو عمل چی کار کنیم؟

با مطالعهٔ این خبر می‌توانید بسته‌های @frame-ui-ng/foundation و @frame-ui-ng/components را نصب کنید، توکن‌های CSS را برای تطبیق رنگ یا شعاع گوشه‌ها تنظیم کنید و در پروژهٔ خود از کامپوننت‌های آماده استفاده کنید. این کار باعث می‌شود رابط کاربری داخلی سریع‌تر شکل بگیرد و نیاز به نوشتن استایل‌های سفارشی کاهش یابد.

نظر Blue IT News

اگر به دنبال کتابخانه‌ای با سبک پیش‌فرض متفاوت و قابلیت تنظیم دقیق ظاهر هستید، FrameUI گزینهٔ جذابی است؛ ولی پیش از استفاده در پروژهٔ بزرگ، مستندات را به‌دقت بررسی کنید.