م
مجید دیزاین سیستم
چیدمان‌های صفحه

همه‌ی حالت‌هایی که شبکه‌ی چیدمان Flux پشتیبانی می‌کند، راست‌چین و با ناوبری فارسی. عنصری که مستقیماً flux:main را در بر می‌گیرد به یک شبکه‌ی ۳×۳ با نواحی header / sidebar / main / aside / footer تبدیل می‌شود؛ ترتیب فرزندان است که چیدمان را تعیین می‌کند.

هدر
محتوا
فوتر
هدر افقی

ناوبری در بالای صفحه و بدون سایدبار؛ مناسب صفحه‌های عمومی فروشگاه.

/layouts/header
سایدبار
هدر
محتوا
فوتر
سایدبار تمام‌قد

سایدبار پیش از هدر می‌آید، پس تمام ارتفاع صفحه را می‌گیرد و هدر کنارش می‌نشیند.

/layouts/sidebar
هدر
سایدبار
محتوا
فوتر
هدر سراسری + سایدبار

همان اجزا با ترتیب برعکس: هدر اول می‌آید و کل عرض صفحه را می‌گیرد.

/layouts/sidebar-header
سایدبار
هدر
محتوا
فوتر
سایدبار جمع‌شو

سایدبار روی دسکتاپ تا عرض یک ریل آیکونی جمع می‌شود و با هاور باز می‌ماند.

/layouts/collapsible
سایدبار
هدر
محتوا
فوتر
سایدبار موبایلی

روی دسکتاپ ثابت، روی موبایل کشویی با پس‌زمینه تار — چیدمان استاندارد پنل کاربری.

/layouts/mobile
سایدبار
هدر
محتوا
کنار
فوتر
ستون کناری (aside)

سه ستون: سایدبار ناوبری، محتوای اصلی و یک ستون کناری چسبان برای خلاصه سفارش.

/layouts/aside
سایدبار
هدر
محتوا
کنار
فوتر
چسبان و اسکرول

هدر، سایدبار و ستون کناری همه چسبانند و فقط محتوای اصلی اسکرول می‌شود.

/layouts/sticky
هدر
محتوا
فوتر
عرض محدود

بخش‌های تمام‌عرض با <flux:container> و prop «container» کنار هم مقایسه می‌شوند.

/layouts/container
قاعده‌ی کار

نواحی شبکه از خود flux.css می‌آیند و با ترتیب عناصر عوض می‌شوند: اگر flux:sidebar پیش از flux:header بیاید، سایدبار تمام ارتفاع را می‌گیرد؛ اگر هدر اول بیاید، تمام عرض را می‌گیرد. در حالت راست‌چین هم سایدبار به‌طور خودکار سمت راست می‌نشیند، چون Flux از ویژگی‌های منطقی (start / end) استفاده می‌کند.

grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "sidebar footer  aside";

/* sidebar before header: */
    "sidebar header  header"
    "sidebar main    aside"
    "sidebar footer  aside";