مفاهیم اولیه
المنت پاپر عناصر مرجع و متحرک شما رو در چندین کانتینر قرار میده که برای طراحی بهتر layout هاتون باید از چیدمان اون کانتینر ها اطلاع داشته باشید.
- کانتینر اول با مقدار display برابر با inline-block هست که تمام عناصر مرجع ، متحرک و فلش (در صورت فعال بودن) را در بر میگیره و برای بدست آوردن مقدار سمت چپ و بالای عنصر مرجع کاربرد داره.
- کانتینر دوم دارای پوزیشن absolute و مقدار بالا و چپ برابر با صفر هست ، که برای موقعیت دهی عنصر متحرک در صفحه با تنظیم مقدار transform آن استفاده می شود.
- در آخر ، کانتینر با موقعیت static که در بر گیرنده عنصر متحرک هست و برای بدست آوردن مقدار دقیق عرض و ارتفاع عنصر متحرک استفاده میشه.
کانتینر با مقدار display برابر با inline-block
عنصر مرجع
فلش (اختیاری)
کانتینر با پوزیشن absolute
کانتینر با پوزیشن static
عنصر متحرک
top-start
top-end
top-center
left-start
left-center
left-end
right-start
right-center
right-end
bottom-center
bottom-end
bottom-start
عنصر های مرجع و متحرک با اندازه بزرگ تر از المنت والد
مرکز
-
عنصر مرجع
در صورتی که طول یا ارتفاع عنصر های مرجع و متحرک بزرگ تر از المنت والد باشن ، در صورتی موقعیت اصلی عنصر متحرک جابجا میشه که عنصر مرجع از وسط المنت والد عبور کرده باشه .
این شرط برای این قرار داده شده که عنصر متحرک، همیشه در قسمتی از المنت والد قرار بگیره که فضای بیشتری داشته باشه و فقط زمانی در نظر گرفته میشه که لبه عنصر متحرک به لبه قسمت قابل مشاهده شدن document برخورد نکرده باشه .
نکته های مهم
- مهم ترین نکته اینه که این کامپوننت فقط سعی میکنه عنصر متحرک رو در موقعیتی که براش مشخص کردید قرار بده ! چون ممکنه چینش المنت های در بر گیرنده المنت والد جوری باشه که popper در اون موقعیت جا نشه، یا کاربر شروع به اسکرول کردن یا ریسایز کردن صفحه کنه که در اون صورت هم باز موقعیت المنت متحرک عوض میشه. البته شما میتونید این کامپوننت رو مجبور کنید تا موقعیت پاپر رو دقیقا همونجا که شما میخواید نشون بده، که در این صورت باید از پراپرتی های fixMainPosition و fixRelativePosition استفاده کنید.
- برای ایجاد فاصله بین المنت مرجع و متحرک از مارجین و پدینگ استفاده نکنید و به جاش از پراپرتی های offsetY و offsetX که در کامپوننت قرار داده شده استفاده کنید.
- سعی نکنید پوزیشن کانتینر رو با سی اس اس یا استایل به relative تغییر بدید چون باعث اخلال تو محاسبات موقعیت میشه.
- برای فیکس کردن موقعیت اصلی مقدار fixMainPosition رو برابر true و برای فیکس کردن موقعیت نسبی مقدار fixRelativePosition رو برابر true قرار بدید.
- اگر میخواید اندازه المنت مرجع رو تغییر بدید مقدار box-sizing اش رو border-box بزارید.
- اگر کامپوننت داخل کانتینر با پوزیشن فلکس و فلکس داریکشن column باشه، بهتره برای کانتینر المنت پاپر طول تعریف کنید.