ثابت
قم بتثبيت الحاوية بشكل لزج، أو قم بتكوين منطقة معينة لتتبع في هياكل يصعب أن تكون لزجة.
تثبيت الحاوية
مثل الرأس، شريط الأدوات FlexLayoutContainer إذا كان يجب أن تكون ثابتة بنفسها وضع لزجيمكن استخدامه. عند الاستخدام، يتم تطبيق أنماط inline المتعلقة باللزج على الحاوية المعنية ولوحة تغيير الحجم.
الرأس العلوي الحالي لهذا الموقع تم تكوينه بهذه الطريقة. إذا كانت الحاوية نفسها يجب أن تكون لزجة، يرجى تطبيق هذه الطريقة.
الحاوية لزجة بالنسبة للداخل
FlexLayoutStickyBoxليس مكونًا يجعل الحاوية لزجة، بل يطبق على المحتوى الداخلي داخل حدود الوالدين ليبدو لزجًا. تحويللذا، في بعض الحالات، قد تعمل بشكل مختلف عن المتوقع. تحقق مما إذا كانت مناسبة لحالة الاستخدام.
يستخدم الشريط الجانبي الأيسر في هذا الموقع FlexLayoutStickyBox. الشريط الجانبي أقصر من المحتوى، وهو موجود كحاوية شقيقة داخل نفس السياق. FlexLayout في هذه البنية، من الصعب أن يلتصق CSS العادي بالموقع المتوقع.
في هذه الحالة، بدلاً من تغيير الهيكل الكامل لـ HTML لضبط العنصر الثابت، يمكنك فقط تغليف المنطقة التي يجب أن تتبع داخل الشريط الجانبي. FlexLayoutStickyBox.
ما يجب استخدامه
FlexLayoutContainer stickyMode
header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.
FlexLayoutStickyBox
sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.
تحكم في الأنماط مباشرة
إذا كانت الخيارات الثابتة المقدمة غير كافية، يمكنك useDecompositionLayoutإحضار الحاوية وتطبيق الأنماط مباشرة.
ومع ذلك، إذا قمت بتعديل الحاوية فقط، فقد يتعارض ذلك مع لوحة إعادة الحجم وموقعها. إذا كان يجب أن تتحرك لوحة إعادة الحجم بنفس المعايير، يجب ضبط العناصر ذات الصلة أيضًا.
خيارات FlexLayoutStickyBox
edge
auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.
offset
화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.
scrollRoot
관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.
onTranslateChange
translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.