@ionic/core بسته پایه آیونیک (Ionic) و مجموعه ای از کامپوننت های رابط کاربری آماده برای ساخت اپ موبایل و وب اپ هست. دکمه، لیست، مودال، تب و قطعه های دیگه رو به شکل وب کامپوننت برمی داری و بدون وابستگی به Angular یا React یا Vue توی هر صفحه ای استفاده می کنی.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
@ionic/core هسته اصلی Ionic Framework هست؛ همون بسته ای که کامپوننت های رابط کاربری آیونیک توش تعریف شدن. اگه تا حالا اپ موبایل یا وب اپی دیدی که دکمه ها، لیست ها، تب ها و پنجره های بازشوش شبیه اپ های واقعی گوشی بود، احتمالا یه چیزی مثل همین زیرش بوده. مشکلی که حل می کنه ساده ست: نمی خوای برای هر پروژه دکمه، منوی لمسی و انیمیشن جابه جایی صفحه رو از صفر بنویسی.
کامپوننت ها وب کامپوننت هستن و تیم Ionic اون ها رو با Stencil نوشته. برای همین تگ هایی مثل ion-button یا ion-list رو توی HTML ساده هم می تونی به کار ببری و مجبور نیستی Angular یا React یا Vue رو انتخاب کنی. بسته های مخصوص این فریم ورک ها هم روی همین هسته سوار می شن. ظاهر کامپوننت ها با متغیرهای CSS عوض می شه و روی iOS و اندروید هر کدوم می تونن سبک خود همون پلتفرم رو نشون بدن.
کجا به درد می خوره؟ وب اپ های موبایل محور، PWA، پنل مدیریتی که بیشتر با گوشی باز می شه، و اپ هایی که بعدا با Capacitor یا ابزار مشابه به شکل اپ نصبی بسته بندی می شن. اگه برای یه مشتری ایرانی اپ سفارش گیری یا پیگیری سفارش می سازی که باید روی گوشی راحت کار کنه، گزینه معقولیه. ولی برای قالب یا سایت محتوایی وردپرسی، فروشگاه با صفحه های پر از متن و سئو، یا جایی که فقط یه گرید و چند تا دکمه می خوای، انتخاب خوبی نیست. اونجا یه فریم ورک CSS سبک تر کار رو راحت تر راه می اندازه.
موقع انتخاب چند چیز رو حواست باشه. نسخه core و بسته های فریم ورکت (Angular، React یا Vue) باید با هم جور باشن؛ پس اگه پروژه قدیمی داری، سراغ نسخه ای برو که با بقیه اجزا سازگاره. آیکون ها رو هم جدا حساب کن، چون ion-icon از بسته Ionicons میاد. برای سایت فارسی، راست به چپ بودن و فونت فارسی رو روی چند دستگاه واقعی امتحان کن.
یه چیز مخصوص شرایط خودمونم هست: اگه فایل ها رو از CDN خارجی صدا بزنی، وقتی اینترنت بین الملل محدود می شه صفحه ات خراب می شه. بهتره فایل ها روی هاست خودت باشن. نسخه های رسمی و بدون تغییر @ionic/core توی مخزن داخلی ما هم در دسترسه و می تونی از همون برداری.
راهنمای استفاده
برای استفاده توی یه صفحه ساده لازم نیست پروژه بیلد داشته باشی. مراحل کلی اش این طوریه:
نسخه مورد نظرت رو از همین صفحه دانلود کن و فایل ها رو روی هاست خودت، مثلا کنار فایل های استاتیک سایت، بذار. پوشه رو کامل و دست نخورده کپی کن، چون جاوااسکریپت هسته بعضی تکه ها رو موقع نیاز جدا لود می کنه.
کد آماده پایین همین صفحه رو توی بخش head صفحه ات کپی کن. این کد فایل جاوااسکریپت هسته و فایل های CSS لازم رو لود می کنه.
مسیرهای داخل کد رو با مسیر واقعی فایل ها روی هاستت یکی کن.
توی body از تگ های Ionic استفاده کن. مثلا ion-app رو دور محتوا بذار و داخلش از ion-header، ion-content و ion-button کمک بگیر.
رنگ ها و ظاهر کلی رو با متغیرهای CSS تنظیم کن.
اگه با npm و ابزار بیلد کار می کنی، بسته رو با npm به پروژه اضافه کن و کامپوننت ها رو مثل بقیه وابستگی ها import کن. اگه از Angular یا React یا Vue استفاده می کنی، بسته مخصوص همون فریم ورک رو هم لازم داری. بعد از لود شدن صفحه، اول یه کامپوننت ساده مثل دکمه رو امتحان کن تا مطمئن بشی مسیرها درسته. بعدش سراغ بقیه برو.
نشانی مستقیم فایل اصلی 5.9.4https://mirror.wbweb.ir/npm/@ionic/core@5.9.4/dist/index.js
پرسش‌های رایج
@ionic/core هسته ای هست که خود کامپوننت ها توش نوشته شدن. بسته های مخصوص Angular، React و Vue روی همین هسته سوار می شن و کار اتصال به اون فریم ورک ها رو انجام می دن. پس وقتی Ionic Framework رو توی پروژه می ذاری، عملا داری از همین کامپوننت ها استفاده می کنی.
آره. چون کامپوننت ها وب کامپوننت هستن، می تونی فایل جاوااسکریپت و CSS رو توی یه صفحه HTML معمولی لود کنی و مستقیم از تگ هایی مثل ion-button استفاده کنی. برای پروژه های بزرگ تر معمولا بسته مخصوص فریم ورکی که انتخاب کردی راحت تره.
از نظر فنی می شه فایل ها رو توی یه صفحه وردپرسی لود کرد، ولی برای سایت محتوایی یا فروشگاه معمولی پیشنهادش نمی کنم. بیشتر به درد صفحه هایی می خوره که شبیه اپ موبایل رفتار می کنن، مثل یه پنل یا وب اپ جدا که کنار سایت اصلی بالا میاد.
مجوزش MIT هست. یعنی استفاده توی پروژه های شخصی و تجاری، تغییر دادن و توزیع مجازه، به شرط اینکه اطلاعیه مجوز رو نگه داری. لازم نیست کد پروژه خودت رو منتشر کنی و بابت استفاده هم هزینه ای نمی دی. اگه پروژه حساسی داری، متن کامل مجوز رو توی خود بسته بخون.
bootstrap یه کتابخونه متن باز CSS و جاوااسکریپته که باهاش صفحه های واکنش گرا رو سریع می سازی. سیستم گرید، دکمه، فرم، منو، مودال و کلی کامپوننت آماده داره و لازم نیست همه چیز رو از صفر بنویسی. مجوزش MIT هست، پس توی سایت شخصی و تجاری می تونی ازش استفاده کنی.
@shoelace-style/shoelace یه کتابخونه از وب کامپوننت هاست که دکمه، دیالوگ، فرم، تب، منوی کشویی و کلی المان آماده رابط کاربری بهت می ده. چون روی استاندارد خود مرورگر ساخته شده، با وردپرس، ری اکت، ویو یا HTML ساده کار می کنه و به فریم ورک خاصی بند نیست.
@trendyol/baklava یه کتابخانه رابط کاربری متن باز از تیم Trendyol Tech با مجوز MIT است که سیستم طراحی Baklava رو به شکل مجموعه ای از کامپوننت های آماده و بسته npm ارائه می ده. به درد پروژه هایی می خوره که می خوان دکمه، فرم و عناصر رابط یکدست باشن و نمی خوان از صفر بسازن.
@wix/design-system یه کتابخانه React از خود Wix هست که کامپوننت های آماده رابط کاربری مثل دکمه، فرم، جدول، مودال و صفحه داشبورد رو بهت می ده. به درد ساخت پنل ها و اپ هایی می خوره که ظاهرشون باید با محیط Wix هماهنگ باشه. از npm نصب می شه و طبق اطلاعات بسته، مجوزش MIT هست.
@sap-theming/theming-base-content یه بسته npm از SAP SE با مجوز Apache هست که محتوای پایه تم های SAP رو نگه می داره؛ یعنی مقدارهای ظاهری و منابعی که کتابخونه های رابط کاربری SAP برای ظاهر یکدست بهشون تکیه می کنن. بیشتر کنار کامپوننت های SAP و به عنوان وابستگی استفاده می شه، نه به تنهایی.
@pine-ds/core بسته npm و بخش پایه سیستم طراحی Pine هست که تیم Kajabi Design System Services ساخته. اگه می خوای دکمه، فرم و بقیه اجزای رابط کاربری یکدست و آماده داشته باشی و همه رو از صفر طراحی نکنی، این بسته نقطه شروع خوبیه. مجوزش MIT هست.
آخرین نسخه
۴.۷.۲
نسخه‌ها
۱۱۱
به‌روزرسانی
چیزی که لازم دارید اینجا نیست؟
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.
