چطور با استفاده از Flexbox در فریمورک Material UI رسپانسیو کنیم؟

خب دوستان!

چند وقتی هست که پروژه‌ی «کارساز» را در شرکت شروع کرده ایم و ترجیح داده شده که از این فریمورک استفاده کنیم.
برای رسپانسیو کردن UI با استفاده از این فریمورک در ابتدا کمی گیج شدم چون ذهنم درگیر Tailwind CSS بود تا اینکه متوجه شدم Material UI هم خیلی ساده هست.

در عکس پایین می بینید که از کامپوننتی به نام Box برای ساختاربندی استفاده کردم. اگر چک کنید متوجه می شوید که به طور Default این کامپوننت همان تگ Div هست، اگرچه که می توانید با استفاده از پراپی به نام Component تگ مد نظر خود را قرار دهید مثل P، Span و...

حالا از پراپی به نام SX استفاده می کنیم که در واقع همان اتریبیوت Style هست که یک آبجکتی از پراپرتی های CSS را می گیرد.
اگر به عکس بالا دقت کنید فرقی با پراپرتی های CSS در اتریبیوت Style ندارد به غیر از قسمت آخر!
شما زمانی که قصد دارید از Breakpoint های Material UI برای رسپانسیو کردن استفاده کنید باید به شکل زیر اقدام کنید:

cssPropertyName: { breakpointName: cssPropertyValue }

خب همان‌طور که در تصویر بالا می بینید من مقدار flexDirection را از همان اول برابر column قرار داده ام که تعیین کرده ام هر زمانی که به سایز md رسید برابر row باشد که این Breakpoint برابر است با 900px!

به جای breakpointName می توانید از لیست Breakpoint ها در پایین که مربوط به Default خود Material UI هست استفاده کنید که البته قابلیت Customize شدن از طریق تعریف Theme جدید وجود دارد:

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

مفهوم Mobile First به چه معناست؟

خیلی دقت کنید که سیستم های رسپانسیو چه در Tailwind CSS و چه Material UI و باقی فریمورک ها که در حال حاضر اطلاع چندانی ندارم به صورت Mobile First هستند. یعنی شما ابتدا باید برای سایز های کوچک موبایل، UI را رسپانسیو کنید و بعد سایز صفحه که بزرگتر شد آن را با طرح رسپانسیو خود تطبیق دهید. به این مفهوم، Mobile First می گویند. در تصویر بالا، پس XS یعنی 0px که تا MD که برابر است با 900px به صورت Column و بعد از آن به صورت Row خواهد بود.

موفق باشید!