ABMaterial 3.02 Maintenance Release will have a new feature, especially useful for 'one page' apps/websites to navigate. It intruduces 'sections' within a page. A section is a logical grouping of rows, which can have its own background and a new extra navigation method/menu.
Sections must be declared at the BuildPage() stage, and are typically created right after the page.BuildGrid() method.
First, let me show you how it works and then I'll explain how this is archieved with just 12 lines of code!
Video:
Code (creating the Theme):
Code (Adding the sections & the navigation)
In this example each section has only a height of 1 row (hence the from row 1 to row 1, from row 2 to row 2,...)
But, this can be any size, e.g. from row 5 to row 25. Something like:
NOTE: Sections cannot be nested or overlapping!
The tricky part are the minHeight and scrollTop params. In the above examples, I'll set the minHeight to the browsers height, minus the height of the TopBar: "calc(100vh - 56px)".
For scrollTop, I've set it the the height of the TopBar so the top of the section is right under the navigation bar: 56
ABMaterial 3.02 Maintenance Release will go out in a couple of days to the donators with 25 bug fixes and implemented wishes.
Alain
Sections must be declared at the BuildPage() stage, and are typically created right after the page.BuildGrid() method.
First, let me show you how it works and then I'll explain how this is archieved with just 12 lines of code!
Video:
Code (creating the Theme):
B4X:
theme.Page.AddSection("section1", ABM.COLOR_BLACK, "", ABM.COLOR_WHITE, "")
theme.Page.AddSection("section2", ABM.COLOR_BLACK, "", ABM.COLOR_BROWN, ABM.INTENSITY_LIGHTEN4)
theme.Page.AddSection("section3", ABM.COLOR_WHITE, "", ABM.COLOR_BLUE, ABM.INTENSITY_LIGHTEN3)
theme.Page.AddSection("section4", ABM.COLOR_WHITE, "", ABM.COLOR_GREY, ABM.INTENSITY_DARKEN3)Code (Adding the sections & the navigation)
B4X:
page.CreateSection("section1", 1,1,ABM.COLOR_WHITE, "", "", "", "","calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL,"Section1")
page.SetSectionNavigation("section1", "section2", "Go to Section 2", ABM.SECTION_BUTTONTYPE_DOWN, "section1", "Section 1" )
page.CreateSection("section2", 2,2,ABM.COLOR_GREEN, "", "../images/bg-1.jpg", ABM.CONTAINERIMAGE_REPEAT_NOREPEAT, ABM.CONTAINERIMAGE_POSITION_COVER, "calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL, "Section2")
page.SetSectionNavigation("section2", "section3", "Go to Section 3", ABM.SECTION_BUTTONTYPE_DOWN, "section2", "Section 2")
page.CreateSection("section3", 3,3,ABM.COLOR_BLUE, "", "", "", "", "calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL,"Section3")
page.SetSectionNavigation("section3", "section4", "Go to Section 4", ABM.SECTION_BUTTONTYPE_DOWN, "section3", "Section 3")
page.CreateSection("section4", 4,4,ABM.COLOR_BLACK, "", "", "", "", "calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL, "Section4")
page.SetSectionNavigation("section4", "section1", "Back to Section 1", ABM.SECTION_BUTTONTYPE_UP, "section4", "Section 4")In this example each section has only a height of 1 row (hence the from row 1 to row 1, from row 2 to row 2,...)
But, this can be any size, e.g. from row 5 to row 25. Something like:
B4X:
page.CreateSection("section5", 5,25,ABM.COLOR_BLACK, "", "", "", "", "calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL, "Section4")NOTE: Sections cannot be nested or overlapping!
The tricky part are the minHeight and scrollTop params. In the above examples, I'll set the minHeight to the browsers height, minus the height of the TopBar: "calc(100vh - 56px)".
For scrollTop, I've set it the the height of the TopBar so the top of the section is right under the navigation bar: 56
ABMaterial 3.02 Maintenance Release will go out in a couple of days to the donators with 25 bug fixes and implemented wishes.
Alain
Last edited: