کتابخانه
@popperjs/core یه کتابخانه جاوااسکریپت برای جایگذاری دقیق عنصرهای شناور مثل تولتیپ، پاپ اور و منوی کشویی کنار یه عنصر مرجعه. اگه نمی خوای منو یا راهنما از کادر صفحه بیرون بزنه یا زیر دکمه گم بشه، این کتابخانه جای درست رو برات حساب می کنه. مجوزش هم MIT هست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۴۵۴ کیلوبایت· ۱۳۶ فایل· انتشار
SHA-256: bf30aae6d16362d1ca3c3cae04a5932f5e2c28e9904f0f451de212d36f3acdf3
وقتی یه منوی کشویی یا تولتیپ می سازی، اولش همه چیز ساده به نظر می رسه: یه div با position absolute زیر دکمه. بعدش می بینی دکمه کنار صفحه بوده و منو از کادر بیرون زده. یا توی موبایل پایین صفحه جا نداره. یا والد overflow hidden داره و نصف منو بریده شده. @popperjs/core برای همین دردسرهاست. این کتابخانه مکان عنصر شناور رو نسبت به عنصر مرجع حساب می کنه و اگه جا نباشه، سمتش رو عوض می کنه.
یه نکته مهم: Popper فقط جایگذاری رو انجام می ده. ظاهر تولتیپ، محتواش و اینکه با کلیک یا هاور باز و بسته بشه، همه با خودته. جایگذاری رو با گزینه ها و ماژول ها کنترل می کنی. مثلاً offset برای فاصله، flip برای عوض کردن سمت، preventOverflow برای جلوگیری از بیرون زدن و arrow برای فلش کوچیک کنار پاپ اور. چون به فریم ورک خاصی وابسته نیست، با جاوااسکریپت ساده و کتابخانه های دیگه هم کار می کنه و توی قالب یا افزونه وردپرسی هم می شه ازش استفاده کرد. خیلی از ابزارهای رابط کاربری هم از همین کتابخانه استفاده می کنن. منوهای کشویی، تولتیپ ها و پاپ اورهای Bootstrap مثلاً روی همین پایه کار می کنن.
اگه می خوای کامپوننت شناور خودت رو بسازی، Popper به دردت می خوره: یه منوی کشویی سفارشی، یه پنل کوچیک کنار فیلد فرم، یه راهنما کنار آیکون یا یه لیست پیشنهاد زیر کادر جستجو. اگه توی قالب یا افزونه وردپرسی کار می کنی و می خوای رفتار همه صفحه ها یکسان باشه، باز هم انتخاب خوبیه. ولی اگه فقط یه تولتیپ ثابت با CSS لازم داری که جاش هیچ وقت عوض نمی شه، Popper اضافه است. اگه Bootstrap رو با فایل bundle لود می کنی هم لازم نیست جدا اضافه اش کنی، چون توی اون بسته هست. پروژه ای به اسم Floating UI هم هست که ادامه همین ایده است. برای پروژه تازه می تونی نگاهی بهش بندازی، ولی برای کدهایی که الان با Popper نوشته شدن، همین کتابخانه کافیه.
یه نکته برای سایت های فارسی: صفحه ها راست به چپ هستن، پس بعد از تنظیم placement حتماً توی صفحه RTL خودت تست کن که منو و فلش سمت درست رو نشون می دن. نسخه های رسمی و بدون تغییر این کتابخانه توی مخزن داخلی ما هم هست. وقتی دسترسی به npm یا CDN های خارجی مشکل داره، می تونی از همین جا برداری و روی هاست خودت بذاری.
استفاده از Popper سه تکه داره: یه عنصر مرجع، یه عنصر شناور و یه خط کد که این دو تا رو بهم وصل می کنه.
بعد از اتصال، پنجره مرورگر رو کوچیک و بزرگ کن و یه بار هم توی موبایل ببین. کار Popper دقیقاً همین جا معلوم می شه.
یه تولتیپ آماده هم ظاهر داره، هم متن، هم رفتار نمایش. Popper فقط مکان عنصر شناور رو نسبت به یه عنصر دیگه حساب می کنه و بقیه کار با خودته. ظاهر و منطق نمایش رو خودت می سازی. هر وقت جا کم باشه، Popper سمت رو عوض می کنه.
اگه فایل bundle خود Bootstrap رو لود کنی، Popper توشه و نیازی به اضافه کردن جدا نیست. ولی اگه فایل معمولی Bootstrap رو استفاده می کنی و منوی کشویی، تولتیپ یا پاپ اور می خوای، باید Popper رو جدا و قبل از اسکریپت Bootstrap لود کنی.
نه. Popper فقط جایگذاری رو انجام می ده. اینکه تولتیپ با هاور یا کلیک باز بشه و کی بسته بشه، با کد خودته. اگه نمی خوای همه چیز رو دستی بنویسی، کتابخانه هایی هست که روی Popper ساخته شدن و این بخش ها رو هم دارن.
بله، توی سایت های RTL هم می شه ازش استفاده کرد. فقط چون سمت ها مهمن، بعد از تنظیم placement توی صفحه واقعی خودت تست کن که منو و فلش سمت درست رو نشون می دن. اگه جابه جا بود، همون گزینه رو عوض کن.
مجوز این کتابخانه MIT هست که معمولاً استفاده تجاری و تغییر کد رو اجازه می ده، به شرط اینکه اعلان مجوز رو توی فایل ها نگه داری. یعنی لازم نیست برای سایت فروشگاهی یا کار مشتری هزینه جدا بدی یا کدت رو باز کنی. برای پروژه مهم، متن کامل مجوز رو هم یه بار بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.