94 lines
2.9 KiB
Plaintext
94 lines
2.9 KiB
Plaintext
; MaterialSB Example - Navbar
|
|
; This example demonstrates different navbar configurations.
|
|
|
|
IncludeFile "MaterialSB.sbi"
|
|
|
|
EnableExplicit
|
|
|
|
Procedure Main(Result)
|
|
UseModule MaterialSB
|
|
|
|
SetDarkTheme(#False)
|
|
|
|
; Main navbar with logo on left, links on right
|
|
Navbar(#Navbar_Shadow2 | #Navbar_Container)
|
|
NavbarAddLogo("MaterialSB", "", "https://lastlife.net/")
|
|
NavbarAddLink("Home", "#")
|
|
NavbarAddLink("Features", "#features")
|
|
NavbarAddLink("Examples", "#examples")
|
|
|
|
; Content
|
|
Row(#Grid_Container)
|
|
Col(12)
|
|
|
|
Append("<h3>Navbar Component</h3>")
|
|
Append("<p>The navbar automatically creates a responsive menu. On smaller screens, links collapse into a dropdown menu.</p>")
|
|
|
|
Append("<h5>Navbar Flags</h5>")
|
|
|
|
Protected t = Table("Flag", #Table_Striped | #Table_Highlight)
|
|
TableAddColumn("Description", t)
|
|
|
|
TableAddItem("#Navbar_Default" + Chr(10) + "Standard navbar with no special styling", t)
|
|
TableAddItem("#Navbar_Align_Right" + Chr(10) + "Aligns the logo to the right", t)
|
|
TableAddItem("#Navbar_Align_Center" + Chr(10) + "Centers the logo", t)
|
|
TableAddItem("#Navbar_Bottom" + Chr(10) + "Positions navbar at the bottom of the viewport", t)
|
|
TableAddItem("#Navbar_Shadow1" + Chr(10) + "Light shadow (z-depth-1)", t)
|
|
TableAddItem("#Navbar_Shadow2" + Chr(10) + "Medium shadow (z-depth-2)", t)
|
|
TableAddItem("#Navbar_Shadow3" + Chr(10) + "Heavy shadow (z-depth-5)", t)
|
|
TableAddItem("#Navbar_Container" + Chr(10) + "Centers content in a container", t)
|
|
|
|
CloseCurrentParent()
|
|
|
|
; Logo alignment examples
|
|
Col(12)
|
|
Append("<h5>Logo Alignment</h5>")
|
|
Append("<p>The logo can be positioned left (default), center, or right using flags in NavbarAddLogo():</p>")
|
|
|
|
Append("; Logo on the left (default)" + "<br>")
|
|
Append(~"NavbarAddLogo(\"Left Logo\")" + "<br>")
|
|
Append("<br>")
|
|
Append("; Logo in the center" + "<br>")
|
|
Append(~"NavbarAddLogo(\"Centered\", \"\", \"\", #Navbar_Align_Center)" + "<br>")
|
|
Append("<br>")
|
|
Append("; Logo on the right" + "<br>")
|
|
Append(~"NavbarAddLogo(\"Right Logo\", \"\", \"\", #Navbar_Align_Right)")
|
|
|
|
CloseCurrentParent()
|
|
Append("<br>")
|
|
|
|
; Tips
|
|
Col(12)
|
|
Card()
|
|
AddClass(GetCurrentParent(), #Color_DeepPurple + #Color_Lighten_3)
|
|
CardContent()
|
|
CardTitle("<h5>Tips</h5>")
|
|
Append("<ul> " +
|
|
"<li>Links are automatically added to both the desktop menu and the mobile dropdown</li>" +
|
|
"<li>When the logo is right-aligned, links appear on the left</li>"+
|
|
"<li>The navbar is automatically prepended to the document body</li>"+
|
|
"<li>You can style the navbar with color classes using AddClass()</li>"+
|
|
"</ul>")
|
|
CloseCurrentParent(2)
|
|
|
|
Append("<br>")
|
|
Append("<br>")
|
|
|
|
CloseCurrentParent()
|
|
|
|
AutoInit()
|
|
|
|
UnuseModule MaterialSB
|
|
EndProcedure
|
|
|
|
MaterialSB::Download(@Main())
|
|
|
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
|
; CursorPosition = 76
|
|
; Folding = -
|
|
; iOSAppOrientation = 0
|
|
; AndroidAppCode = 0
|
|
; AndroidAppOrientation = 0
|
|
; EnableXP
|
|
; DPIAware
|
|
; CompileSourceDirectory |