142 lines
3.8 KiB
Plaintext
142 lines
3.8 KiB
Plaintext
; MaterialSB Example - Grid System
|
|
; This example demonstrates the responsive grid system.
|
|
|
|
IncludeFile "MaterialSB.sbi"
|
|
|
|
EnableExplicit
|
|
|
|
Procedure Main(Result)
|
|
UseModule MaterialSB
|
|
|
|
SetDarkTheme(#False)
|
|
|
|
; Create a navbar
|
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
|
NavbarAddLogo("Grid Example")
|
|
|
|
; Header section
|
|
Row(#Grid_Container)
|
|
Col(12)
|
|
Append("<h3>Responsive Grid System</h3>")
|
|
Append("<p>MaterialSB uses a 12-column responsive grid. Resize your browser to see how columns adapt.</p>")
|
|
CloseCurrentParent(2)
|
|
|
|
; Basic grid demonstration
|
|
Row(#Grid_Container)
|
|
Col(12)
|
|
Append("<h5>Basic Columns</h5>")
|
|
CloseCurrentParent(2)
|
|
|
|
Row(#Grid_Container)
|
|
|
|
Col(12, 6, 4)
|
|
Card("", #Card_Panel)
|
|
AddClass(GetCurrentParent(), #Color_Red + #Color_Lighten_3)
|
|
Append("<p class='center-align'><strong>s12 m6 l4</strong></p>")
|
|
Append("<p class='center-align'>Full on small, half on medium, third on large</p>")
|
|
CloseCurrentParent(2)
|
|
|
|
Col(12, 6, 4)
|
|
Card("", #Card_Panel)
|
|
AddClass(GetCurrentParent(), #Color_Blue + #Color_Lighten_3)
|
|
Append("<p class='center-align'><strong>s12 m6 l4</strong></p>")
|
|
Append("<p class='center-align'>Full on small, half on medium, third on large</p>")
|
|
CloseCurrentParent(2)
|
|
|
|
Col(12, 6, 4)
|
|
Card("", #Card_Panel)
|
|
AddClass(GetCurrentParent(), #Color_Green + #Color_Lighten_3)
|
|
Append("<p class='center-align'><strong>s12 m6 l4</strong></p>")
|
|
Append("<p class='center-align'>Full on small, half on medium, third on large</p>")
|
|
CloseCurrentParent(2)
|
|
|
|
CloseCurrentParent() ; Close row
|
|
|
|
; Two column layout
|
|
Row(#Grid_Container)
|
|
Col(12)
|
|
Append("<h5>Two Column Layout</h5>")
|
|
CloseCurrentParent(2)
|
|
|
|
Row(#Grid_Container)
|
|
|
|
Col(12, 8)
|
|
Card("", #Card_Panel)
|
|
AddClass(GetCurrentParent(), #Color_Teal + #Color_Lighten_4)
|
|
Append("<h5>Main Content (s12 m8)</h5>")
|
|
Append("<p>This column takes 8 out of 12 columns on medium and larger screens. On small screens, it takes the full width.</p>")
|
|
Append("<p>This is ideal for main content areas with a sidebar.</p>")
|
|
CloseCurrentParent(2)
|
|
|
|
Col(12, 4)
|
|
Card("", #Card_Panel)
|
|
AddClass(GetCurrentParent(), #Color_Orange + #Color_Lighten_4)
|
|
Append("<h5>Sidebar (s12 m4)</h5>")
|
|
Append("<p>This sidebar takes 4 columns on medium+, full width on small.</p>")
|
|
CloseCurrentParent(2)
|
|
|
|
CloseCurrentParent() ; Close row
|
|
|
|
; Nested grid
|
|
Row(#Grid_Container)
|
|
Col(12)
|
|
Append("<h5>Nested Grid</h5>")
|
|
CloseCurrentParent(2)
|
|
|
|
Row(#Grid_Container)
|
|
Col(12)
|
|
|
|
Card("", #Card_Panel)
|
|
AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_4)
|
|
Append("<p><strong>Outer Container</strong></p>")
|
|
|
|
; Nested row inside the card
|
|
Row()
|
|
|
|
Col(6)
|
|
Card("", #Card_Panel)
|
|
AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_2)
|
|
Append("<p class='center-align'>Nested s6</p>")
|
|
CloseCurrentParent(2)
|
|
|
|
Col(6)
|
|
Card("", #Card_Panel)
|
|
AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_2)
|
|
Append("<p class='center-align'>Nested s6</p>")
|
|
CloseCurrentParent(2)
|
|
|
|
CloseCurrentParent() ; Close nested row
|
|
CloseCurrentParent() ; Close outer card
|
|
CloseCurrentParent(2) ; Close column and row
|
|
|
|
; Breakpoint reference
|
|
Row(#Grid_Container)
|
|
Col(12)
|
|
Append("<h5>Breakpoint Reference</h5>")
|
|
|
|
Protected t = Table("Prefix", #Table_Striped | #Table_Highlight)
|
|
TableAddColumn("Screen Size", t)
|
|
TableAddColumn("Width", t)
|
|
|
|
Protected item = TableAddItem("s" + Chr(10) + "Small" + Chr(10) + "< 600px", t)
|
|
item = TableAddItem("m" + Chr(10) + "Medium" + Chr(10) + ">= 600px", t)
|
|
item = TableAddItem("l" + Chr(10) + "Large" + Chr(10) + ">= 992px", t)
|
|
item = TableAddItem("xl" + Chr(10) + "Extra Large" + Chr(10) + ">= 1200px", t)
|
|
|
|
CloseCurrentParent(2)
|
|
|
|
AutoInit()
|
|
|
|
UnuseModule MaterialSB
|
|
EndProcedure
|
|
|
|
MaterialSB::Download(@Main())
|
|
|
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
|
; Folding = -
|
|
; iOSAppOrientation = 0
|
|
; AndroidAppCode = 0
|
|
; AndroidAppOrientation = 0
|
|
; EnableXP
|
|
; DPIAware
|
|
; CompileSourceDirectory |