پرش به محتویات

Offcanvas

المان Offcanvas یک پنل nestable است که از لبه انتخابی viewport می‌لغزد (یا offset می‌شود). کاربرد معمول: ناوبری موبایل. Bricks پیشنهاد می‌دهد یک Toggle در جای دیگری از صفحه اضافه کنید که این Offcanvas را هدف قرار دهد (لینک اطلاعات داخل المان را برای مقاله سازنده منو ببینید).

ساختار پیش‌فرض شامل یک Block داخلی (.brx-offcanvas-inner) برای محتوای شما است—اغلب با Text شروع‌کننده و یک Toggle برای بستن—و یک Block دوم که به‌عنوان Backdrop (.brx-offcanvas-backdrop) عمل می‌کند، که اگر backdrop نمی‌خواهید می‌توانید آن را حذف کنید.

تنظیمات

  • Direction (select) — جهت: top، right، bottom یا left. پیش‌فرض: left.

  • Effect (select) — افکت: slide یا offset.

  • Close on (select) — بستن با: backdrop (کلیک)، esc، none، یا پیش‌فرض: backdrop و ESC.

  • Width، Height (number with units) — اندازه پنل داخلی (.brx-offcanvas-inner).

  • Transition: Duration (number with units) — انیمیشن باز/بسته شدن؛ برای غیرفعال کردن روی 0s تنظیم کنید.

  • Transition: Timing function (text) — Easing، مثلاً cubic-bezier(0.25, 0, 0.25, 1).

  • aria-label (text) — برچسب dialog root؛ پیش‌فرض «Offcanvas».

  • Keep open while styling (checkbox) — کلاس کمکی سازنده brx-open برای باز نگه داشتن پنل هنگام طراحی.

  • No scroll (body) (checkbox) — هنگام باز بودن از اسکرول body جلوگیری می‌کند.

  • Scroll to top (checkbox) — هنگام باز شدن Offcanvas به بالا اسکرول می‌کند.

  • Disable auto focus (checkbox) — focus خودکار روی اولین المان focusable هنگام باز شدن را رد می‌کند.

  • Open on page load (checkbox) — در front end هنگام بارگذاری صفحه باز می‌شود (در سازنده اعمال نمی‌شود).

!!! tip “مرجع توسعه‌دهنده” JSON schema کامل: offcanvas Schema