طرحبندی پایه
سامانه جامع عملیاتی خدمات شهری شامل بسیاری از کامپوننتها با عملکردها و رفتارهای متفاوت است. برخی برای کنترل طرحبندی برنامه شما ساخته شدهاند و برخی دیگر ممکن است برای ارائه عملکردها، رفتارها و عملیات کلیدی برای این کامپوننتها استفاده شوند.
بهطور خاص، چهار ارائهدهنده مهم عبارتند از MudThemeProvider، MudPopoverProvider، MudDialogProvider و MudSnackbarProvider. اگر راهنمای نصب را دنبال کرده باشید، اینها از قبل در صفحه MainLayout شما قرار دارند.
MudThemeProvider کامپوننتی است که تنظیمات تم مانند رنگها، فونتها، سایهها و دیگر ویژگیهای طرحبندی را برای برنامه شما فراهم میکند. این کامپوننت بهصورت پیشفرض تم سامانه جامع عملیاتی خدمات شهری را ارائه میدهد. تنها یک نمونه از MudThemeProvider باید در پروژه شما وجود داشته باشد.
دو کامپوننت مهم دیگر در طرحبندی عبارتند از MudLayout و MudMainContent. MudLayout باید در ریشه برنامهتان و داخل صفحه MainLayout قرار گیرد. مستقیماً داخل MudLayout میتوانید MudMainContent را قرار دهید – اینجا جایی است که محتوای صفحه شما نمایش داده میشود.
برای درک بهتر این موضوع، بیایید صفحه MainLayout.razor را باز کنیم و یک طرحبندی پایه سامانه جامع عملیاتی خدمات شهری ایجاد کنیم.
نوار بالا (Appbar) و کشو (Drawer)
قبل از MudMainContent میتوانیم کامپوننتهای MudAppBar و MudDrawer را اضافه کنیم تا در تمام صفحاتی که از این طرحبندی استفاده میکنند، حضور داشته باشند.
عملکرد
به دلیل اینکه کامپوننتها را مستقیماً داخل MudLayout اضافه کردهایم، MudMainContent ارتفاع MudAppBar را تشخیص داده و از آن بهعنوان پدینگ بالایی استفاده میکند. اگر MudDrawer باز باشد، محتوای اصلی بهطور صحیح حاشیه چپ یا راست را دریافت میکند.
اکنون برای افزودن عملکرد پایه: اضافه کردن یک MudIconButton باعث باز و بسته شدن کشو میشود، و افزودن یک NavMenu امکان ناوبری پایه را فراهم میکند.