LayoutMenu

Video tutorial

1. Demo AstrolLayoutMenu

Note
AstrolLayoutMenu is a Blazor component designed to completely replace the content of MainLayout.

@using Astrol.Component.Basic.Layout

@using Astrol.Entities.Basic.UI

<AstrolLayoutMenu Style="AstrolTheme.Yellow" Outline="true">

 <Top>

 <b>Options</b>

 </Top>

 <Menu>

 <b>Menu</b>

 </Menu>

 <Body>

 <div style="padding:20px;">

 @Body

 </div>

 </Body>

</AstrolLayoutMenu>

Class (string): Custom CSS style class (optional).
MinWidth (int): Minimum page width in pixels (default is 768).
WidthMenu (int): Menu width in pixels (default is 280).
HeightTop (int): Height of the top bar in pixels (default is 50).
Top (RenderFragment): Content to be displayed in the top bar.
Menu (RenderFragment): Content to be displayed in the menu.
Body (RenderFragment): Content to be displayed in the page body.
Outline (bool): Defines whether the theme is light or dark (default is true).
- true (light theme)
- false (dark theme)
Style (AstrolTheme): Defines the theme color (default is AstrolStyle.Yellow).
- Yellow (enum)
- Orange (enum)
- Green (enum)
- Blue (enum)
- Red (enum)
- Purple (enum)
ShowSetMode (bool): Show option to change mode: light, dark (default is false).
OnChangeMode (EventCallback<bool>): Event triggered when the user changes the mode: light, dark (you are responsible for storing the new mode if you want the value to persist when reloading the page).