11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 2 دقیقه
دسته بندی ها : جاوا اسکریپت

در اینجا، ۱۱ کتابخانه کامپوننت Vue.js را خواهید یافت، که می‌توانید برای رابط کاربری برنامه Vue.js خود به چالش بکشید.

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

محبوبیت Vue.js با بیش از 80 هزار ستاره، و تحت استفاده بودن توسط Adobe، Gitlab و شرکت‌های دیگر، از انتظارات همه فراتر رفته است. یک بخش مهم از موفقیت Vue، در کامپوننت‌های آن است. کار کردن با کامپوننت‌ها یعنی این که می‌توانید به هر قطعه رابط کاربری به صورت جداگانه فکر کنید، خوانایی کد را ارتقا دهید و رابط کاربری خود را استوار نگه دارید.

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

نکته: می‌توانید از Bit برای به اشتراک گذاری کامپوننت‌‌ها میان پروژه‌ها و برنامه‌ها استفاده کنید، آن‌ها را برای گروه خود سازمان‌دهی کنید و تمام پروژه‌های خود را در هنگام توسعه آن‌ها همگام‌سازی کنید.

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

1. Vuetify

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

Vuetify.js با بیش از 7 هزار ستاره، یک طرح رابط کاربری بر پایه مشخصات طراحی متریال را فراهم می‌کند. نسخه 1.0 انتشار Alpha، بیش از 80 کامپوننت با طراحی معنایی ساده را به همراه دارد.

2. Vue Material

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

یک کتابخانه کامپوننت Vue که طراحی متریال گوگل را پیاده‌سازی می‌کند. این کتابخانه با داشتن 5 هزار ستاره، کامپوننت‌هایی فراهم کرده است که با تم‌های دینامیک داخلی و هدف واضح خود، یعنی ساده‌ کردن API خود در حد ممکن، با همه مرورگر‌های مدرن تطابق دارد.

3. Keen UI

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

با این که  Keen UIاز مشخصات رابط کاربری متریال الهام گرفته شده است، اما یک کتاباخانه رابط کاربری متریال نیست. این کتابخانه با داشتن بیش از 3 هزار ستاره، یک فریم‌وورک CSS نیست و هیچ سیستم توری یا استایل تایپوگرافی را شامل نمی‌شود؛ بلکه فقط کامپوننت‌هایی که نیازمند JavaScript هستند را در خود دارد.

4. Element

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

این جعبه‌ابزار وب Vue 2.0 که شدیدا محبوب است، با داشتن 21 هزار ستاره گزینه‌های زیادی از کامپوننت‌های با قابلیت سفارشی‌سازی را فراهم کرده است. گرچه اسناد آن که در زبان انگلیسی نیستند، شاید برای افراد چینی زبان ساده‌تر باشند، این کتابخانه یک اکوسیستم زنده دارد و برای کتابخانه رابط کاربری Vue بعدی شما، یک انتخاب احتمالی است.

5. Buefy

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

Buefy کامپوننت‌هایی ساخته شده با Vue.js و Bulma را فراهم می‌کند. این کتابخانه با داشتن تقریبا ۲ هزار ستاره، کامپوننت‌های ساده و پاسخگویی را به همراه دارد. گرچه گزینه‌های کامپوننت‌ها به گونه‌ای محدود است، اما ارزش امتحان کردن را دارد.

6. Bootstrap-Vue

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

Bootstrap-Vue با داشتن ۳ هزار ستاره، شما را قادر می‌سازد تا برنامه‌های موبایل و رابط‌های کاربری پاسخگو را با استفاده از Vue.js و Bootstrap 4 بسازید. این کتابخانه برای Vue.js 2.4 و بالاتر در دسترس است.

7. AT-UI

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

AT-UI که به خصوص برای دسکتاپ ساخته شده است، یک npm + webpack + جریان کاری توسعه frontend را فراهم می‌کند. این مورد نیز ممکن است برای افرادی که نه به چینی، بلکه به انگلیسی مسلط هستند، کمی سخت باشد، اما گزینه‌های خوبی از کامپوننت‌های رابط کاربری مرتب را فراهم کرده است.

8. Fish-UI

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

Fish-UI یک جعبه‌ابزار برای وب است که با Webpack و ES2015 کار می‌کند. این کتابخانه کاربر را با گزینه‌هایی شامل بیش از 35 کامپوننت، با ساختاری خوب برای رابط مرتب و پایه شگفت‌زده می‌کند.

9. Quasar

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

این فریم‌وورک با بیش از 4 هزار ستاره، شامل ده‌ها کامپوننت Vue.js ساخته شده با استفاده از Vue، و مجموعه خوبی از عملکردها برای وب‌اپلیکیشن‌های پاسخگو را دارد. کامپوننت‌های موجود به عنوان کامپوننت‌های وب نوشته شده‌اند، پس این کامپوننت‌ها کدهای HTML،‌ CSS و JavaScript را فراهم می‌کنند که می‌توانید به سادگی و با استفاده از یک تگ include در صفحه خود، وارد کنید.

10. Muse UI

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

Muse UI با داشتن 5 هزار ستاره، یک کتابخانه رابط کاربری طراحی متریال برای Vue.js 2.0 است. گرچه در اینجا نیز شاید با راهنمای چینی زبان آن به مشکل بر بخورید.

11. Vux

11 کامپوننت کتابخانه رابط کاربری Vue.js که باید بشناسید

Vux با داشتن 10 هزار ستاره، یک کتابخانه کامپوننت محبوب برای برنامه‌های موبایل است، که از رابط کاربری weUI در برنامه WeChat الهام گرفته شده است. اسناد این کتابخانه در زبان انگلیسی نیز موجود می‌باشند. هر کامپوننت‌ می‌تواند از طریق اسناد، به صورت تعاملی نمایش داده شود.

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید