Menu System

Namespace

using Blazor_Foundation_6.Components.Containers;
using Newtonsoft.Json.Linq;

Attributes

MenuSystemWrapper (Required)

NameDescription
IdRequired or system will throw error. Id of the system (used to identify the system when calling functions)
AppIdRequired or system will throw error. It is the id of the wrapper of the whole app. Generally <div id=”main”>
ClassExtra/Custom Classes appended to the default class.
Styleuse JObject to add css style options. See How to Use Style Attribute
DataOptionsJObject of the data option see below DataOptions possibilities.
AutoManagedif true, Blazor will call the Register function automatically otherwise, you should create or call js function yourself.

MenuSystemTop (Optional)

If not present, top bar will be generated unless explicitly passed “hasTop:false” see below example and data options.

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
Styleuse JObject to add css style options. See How to Use Style Attribute
WrapperLink the Parent (Wrapper) as you do in blazor.

MenuSystemLeft (Optional)

If left menu is needed then this object should be defined.

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
Styleuse JObject to add css style options. See How to Use Style Attribute
WrapperLink the Parent (Wrapper) as you do in blazor.
Open()Call to Open Menu
Close()Call to Close Menu

MenuSystemRight (Optional)

If right menu is needed then this object should be defined.

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
Styleuse JObject to add css style options. See How to Use Style Attribute
WrapperLink the Parent (Wrapper) as you do in blazor.
Open()Call to Open Menu
Close()Call to Close Menu

MenuSystemOverlay (Optional)

Can be either customize and declared, ignored and it will be created by the system or you can completely disabled using options above.

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
Styleuse JObject to add css style options. See How to Use Style Attribute

DataOptions

NameDescription
idDefault html id=”” attribute.
appIdExtra/Custom Classes appended to the default class.
hasTopDefault: true, set false if you don’t plan to have top bar for the system.
Note: if true and no MenuSystemTop is defined then the MenuSystem will generate an empty one.
transitionTypeDefault: PushBoxed.
Push: will push App to make space for the menu but not the top.
PushBoxed: will push app on top and side.
Over: will not push app but the menu will be over.
hasOverlayDefault: true, if false no overlay will be generated nor opened.
overlayBlurDefault: true, if false the content of app wont be blurred.
Note: the blur is not applied to the overlay but rather to the app div itself.
Note 2: if hasOverlay = false, then this option is ignored and false.
overlayAutoCloseDefault: true. if false, the menu will not close when user click on the overlay itself.
overlayColorDefault ‘none’, define a background color for the overlay. (CSS)
topHeightDefault: ‘4m’. Define the height of the top bar. (CSS)
topBGColorDefault: ‘black’. Define the background color of the top bar. (CSS)
leftWidthDefault: 15em. Define the width of the side bar. (CSS)
leftBGColorDefault: ‘black’. Define the background color of the left bar. (CSS)
leftCloseButtonDefault: true. if false, the system will not generate header with close button inside the menu panel.
rightWidthDefault: 15em. Define the width of the side bar. (CSS)
rightBGColorDefault: ‘black’. Define the background color of the right bar. (CSS)
rightCloseButtonDefault: true. if false, the system will not generate header with close button inside the menu panel.

Load Scripts

To make the Menu System work, you must add scripts to the head or footer. Do not duplicate, see get started.

<head>
  	<link href="/_content/fl.blazor.foundation/css/blazor.foundation.css" rel="stylesheet" />
    <link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet" />
</head>

<body>
  ...   
   CONTENT
  ...
   END
  ...
  AFTER 'foundation.js'
  ...
    <script src="/_content/fl.blazor.foundation/js/bf-menu-system.js"></script>
  ...
</body>

Examples

To see visual example, visit Download and Run Blazor_Foundation_Test in Visual Studio, You’ll see plenty of examples.

Minimal Menu System

<MenuSystemWrapper @ref="MenuSystemWrapper" Id="MenuSystem" AppId="MyApp">
    <MenuSystemTop Wrapper="@MenuSystemWrapper">

    </MenuSystemTop>

    <MenuSystemLeft @ref="MenuLeft" Wrapper="@MenuSystemWrapper">

    </MenuSystemLeft>

    <MenuSystemRight @ref="MenuRight" Wrapper="@MenuSystemWrapper">

    </MenuSystemRight>
</MenuSystemWrapper>
<div id="MyApp">

<Button OnClick="@MenuLeft.Open">Open Left</Button>
</div>
@code {
    private MenuSystemLeft MenuLeft;
    private MenuSystemRight MenuRight;
    private MenuSystemWrapper MenuSystemWrapper;

}

Minimal Menu System No Top

<MenuSystemWrapper @ref="MenuSystemWrapperNoTop" Id="MenuSystemNoTop" AppId="MyApp"
                   DataOptions="@(new JObject() { {"hasTop",false }, { "transitionType", "over"} })">
    <MenuSystemLeft @ref="MenuLeftNoTop" Wrapper="@MenuSystemWrapperNoTop">

    </MenuSystemLeft>

    <MenuSystemRight @ref="MenuRightNoTop" Wrapper="@MenuSystemWrapperNoTop">

    </MenuSystemRight>
</MenuSystemWrapper>
<div id="MyApp">

<Button OnClick="@MenuLeft.Open">Open Left</Button>
</div>
@code {
    private MenuSystemLeft MenuLeftNoTop;
    private MenuSystemRight MenuRightNoTop;
    private MenuSystemWrapper MenuSystemWrapperNoTop;

}