Introduction
ABMNavigationBar is not a real stand-alone component, but a property of an ABMPage. This is why it is placed under Helpers.
How does it work
Building a Naviagion Bar with an optional Side Bar is really easy in ABMaterial. It is important to know that for every page that uses the Navigation Bar, you must create the complete bar, just changing the active items. The sidebar can have only one sublevel in the tree.
Let's start with checking out the code we used for this WebApp and I'll explain afterwards.
Sub BuildNavigationBar(page As ABMPage, Title As String, logo As String, ActiveTopReturnName As String, ActiveSideReturnName As String, ActiveSideSubReturnName As String) page.NavigationBar.Initialize(page, "nav1", Title, ABM.TEXTALIGN_LEFT, False, True, False,True, 300, 48, logo, ABM.COLLAPSE_ACCORDION, "nav1theme") page.NavigationBar.ActiveTopReturnName = ActiveTopReturnName page.NavigationBar.ActiveSideReturnName = ActiveSideReturnName page.NavigationBar.ActiveSideSubReturnName = ActiveSideSubReturnName // this is a special one: a full screen toggle icon. Will be handled automatically // this is experimental, as it has side effects e.g. when you navigate to another page, it is switched of again // nb.AddTopFullScreenIcon page.NavigationBar.AddTopItem("Contact", "", "mdi-action-account-circle", "") page.NavigationBar.AddSideBarItem("About", "About", "mdi-action-dashboard", "../AboutPage") page.NavigationBar.AddSideBarItem("GettingStarted", "Getting started", "mdi-editor-insert-comment", "../GettingStartedPage") page.NavigationBar.AddSideBarItem("Themes", "Themes", "mdi-action-invert-colors", "../ThemesPage") page.NavigationBar.AddSideBarItem("Layouts", "Grids", "mdi-editor-border-all", "../GridsPage") page.NavigationBar.AddSideBarDivider("") page.NavigationBar.AddSideBarItem("Controls", "Controls", "mdi-image-palette", "") page.NavigationBar.AddSideBarSubItem("Controls", "ABMActionButton", "ABMActionButton", "", "../CompActionButtonPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMBadge", "ABMBadge", "", "../CompBadgePage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMButton", "ABMButton", "", "../CompButtonPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMCanvas", "ABMCanvas", "", "../CompCanvasPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMCard", "ABMCard", "", "../CompCardPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMCheckbox", "ABMCheckbox", "", "../CompCheckboxPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMCombo", "ABMCombo", "", "../CompComboPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMChip", "ABMChip", "", "../CompChipPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMCodeLabel", "ABMCodeLabel", "", "../CompCodeLabelPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMDivider", "ABMDivider", "", "../CompDividerPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMGoogleMap", "ABMGoogleMap", "", "../CompGoogleMapPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMLabel", "ABMLabel", "", "../CompLabelPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMList", "ABMList", "", "../CompListPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMImage", "ABMImage", "", "../CompImagePage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMInputfield", "ABMInputfield", "", "../CompInputPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMRadioGroup", "ABMRadioGroup", "", "../CompRadioGroupPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMSignaturePad", "ABMSignaturePad", "", "../CompSignaturePage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMImageSlider", "ABMImageSlider", "", "../CompSliderPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMSwitch", "ABMSwitch", "", "../CompSwitchPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMTabs", "ABMTabs", "", "../CompTabsPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMUpload", "ABMUpload", "", "../CompUploadPage") page.NavigationBar.AddSideBarSubItem("Controls", "ABMVideo", "ABMVideo", "", "../CompVideoPage") page.NavigationBar.AddSideBarDivider("") page.NavigationBar.AddSideBarItem("Helpers", "Helpers", "mdi-device-now-widgets", "") page.NavigationBar.AddSideBarSubItem("Helpers", "ABMContainer", "ABMContainer", "", "../HelperContainerPage") page.NavigationBar.AddSideBarSubItem("Helpers", "ABMModalSheet", "ABMModalSheet", "", "../HelperModalSheetPage") page.NavigationBar.AddSideBarSubItem("Helpers", "ABMNavigationBar", "ABMNavigationBar", "", "../HelperNavigationBarPage") page.NavigationBar.AddSideBarSubItem("Helpers", "ABMPage", "ABMPage", "", "../HelperPagePage") page.NavigationBar.AddSideBarSubItem("Helpers", "ABMParallax", "ABMParallax", "", "../HelperParallaxPage") page.NavigationBar.AddSideBarSubItem("Helpers", "ABMTable", "ABMTable", "", "../HelperTablePage") page.NavigationBar.AddSideBarDivider("") page.NavigationBar.AddSideBarItem("Icons", "Icons", "mdi-action-account-circle", "../IconsPage") End Sub
We also take the code from the BuildPage() method of this page 'HelperNaviagationBarPage' with us.
ABMShared.BuildNavigationBar(page, "ABMNavigationBar", "../images/logo.png", "", "Helpers", "ABMNavigationBar")
If we go over the parameters we filled in in the BuildNavigationBar() method, we'll notice we gave it a Title (the text on top), a logo (the picture on the top of the Side Bar saying ABMaterial) and three extra parameters:
Param | Description |
---|---|
ActiveTopReturnName | If you have multiple TopItems, you set this parameter to be the active one. In this demo, we have only one item, so we can leave it empty. |
ActiveSideReturnName | This sets the active item from the side bar. In our example it is 'Helpers'. |
ActiveSideSubReturnName | This sets the active sub item from the side bar. In our example it is 'ABMNavigationBar'. |
We can find those values back in the BuildNavigationBar() method, being params (1) and (2). Param (3) is here the same, but this is the title of the item. Param(4) is an optional icon name and param(5) is de page we want to jump to when the user clicks on the item. Note the '../' before as we have to respect the folder tree. (it is one folder down, then the page name in this case. Check the folder structure in Explorer if you are in doubt.
page.NavigationBar.AddSideBarSubItem("Helpers", "ABMNavigationBar", "ABMNavigationBar", "", "../HelperNavigationBarPage")
Initialization
There are some options you can set to the Naviagation Bar during Initialization:
Param | Description |
---|---|
page | The page object in you class. Is only to be conform with all other controls and may be usefull in the future. |
id | The ID of the control. |
title | The title on the top bar. |
alignTitle | Alignment of the title text. Can be one of the constants ABM.TEXTALIGN_LEFT, ABM.TEXTALIGN_CENTER or ABM.TEXTALIGN_RIGHT. |
alignTopItemsLeftIfTitleCentered | If the Title is centered, do you want the items to be on the left of it. On the right by default. |
topBarDropDownBelow | If the topbar has sub items, does the dropdown list be under the bar, or over it. |
hideTopBarItemsOnSmallAndMedium | Hide all the topbar items if on a small screen. |
topBarFixed | If fixed, the top bar stays on top of the window when scrolling the body. If false, then the top bar will float with the scrolling. In this Web App, all top bars are fixed. |
sideBarWidthPx | Width of the side bar. |
sideBarItemHeightPx | Height of a sidebar item. |
sideBarLogo | Logo on the top left of the side bar. |
sideBarCollapseType | Can be either the constant ABM.COLLAPSE_ACCORDION or ABM.COLLAPSE_EXPANDABLE. |
themeName | The name of the theme you want to use. |
The Navigation bar has one event NavigationbarClicked(), raised on the page object. Use this event to load another page for example.
Sub Page_NavigationbarClicked(Action As String, Value As String) page.SaveNavigationBarPosition If Action = "ABMNavigationBar" Then Return If Action = "Contact" Then myToastId = myToastId + 1 page.ShowToast("toast" & myToastId, "toastred", "Hello to you too!", 5000) Return End If ABMShared.NavigateToPage(ws, Value) End Sub