V1.0
This commit is contained in:
LastLife
parent
5c9b717120
commit
4924332d43
64
Example_Button.sb
Normal file
64
Example_Button.sb
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
; MaterialSB Example - Buttons
|
||||||
|
; This example demonstrates the different buttons styles.
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
EnableExplicit
|
||||||
|
|
||||||
|
Procedure Main(Result)
|
||||||
|
UseModule MaterialSB
|
||||||
|
|
||||||
|
SetDarkTheme(#False)
|
||||||
|
|
||||||
|
; Navbar
|
||||||
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
||||||
|
NavbarAddLogo("Buttons")
|
||||||
|
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h3>Button Component</h3>")
|
||||||
|
Append("<p>MaterialSB supports various button styles and sizes:</p>")
|
||||||
|
|
||||||
|
Button("Default", #Null, #Button_Default)
|
||||||
|
Button("Tonal", #Null, #Button_Tonal)
|
||||||
|
Button("Outlined", #Null, #Button_Outlined)
|
||||||
|
Button("Elevated", #Null, #Button_Elevated)
|
||||||
|
Button("Text", #Null, #Button_Text)
|
||||||
|
Button("Floating", #Null, #Button_Floating)
|
||||||
|
Button("Large", #Null,#Button_Large)
|
||||||
|
Button("Small", #Null,#Button_Small)
|
||||||
|
Button("Disabled", #Null, #Button_Disabled)
|
||||||
|
|
||||||
|
Append("<br><br>")
|
||||||
|
Append("<h5>Button Flags</h5>")
|
||||||
|
|
||||||
|
Protected t = Table("Flag", #Table_Striped | #Table_Highlight)
|
||||||
|
TableAddColumn("Description", t)
|
||||||
|
|
||||||
|
TableAddItem("#Button_Default" + Chr(10) + "Standard filled button", t)
|
||||||
|
TableAddItem("#Button_Tonal" + Chr(10) + "Tonal variant with muted color", t)
|
||||||
|
TableAddItem("#Button_Outlined" + Chr(10) + "Outlined variant with border", t)
|
||||||
|
TableAddItem("#Button_Elevated" + Chr(10) + "Elevated variant with shadow", t)
|
||||||
|
TableAddItem("#Button_Text" + Chr(10) + "Text-only variant", t)
|
||||||
|
TableAddItem("#Button_Floating" + Chr(10) + "Floating action button (FAB)", t)
|
||||||
|
TableAddItem("#Button_Large" + Chr(10) + "Large size", t)
|
||||||
|
TableAddItem("#Button_Small" + Chr(10) + "Small size", t)
|
||||||
|
TableAddItem("#Button_Disabled" + Chr(10) + "Disabled state", t)
|
||||||
|
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
AutoInit()
|
||||||
|
|
||||||
|
UnuseModule MaterialSB
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
||||||
|
; CursorPosition = 24
|
||||||
|
; Folding = -
|
||||||
|
; iOSAppOrientation = 0
|
||||||
|
; AndroidAppCode = 0
|
||||||
|
; AndroidAppOrientation = 0
|
||||||
|
; EnableXP
|
||||||
|
; DPIAware
|
||||||
|
; CompileSourceDirectory
|
||||||
121
Example_Card.sb
Normal file
121
Example_Card.sb
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
; MaterialSB Example - Cards
|
||||||
|
; This example demonstrates how to create cards with content.
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
EnableExplicit
|
||||||
|
|
||||||
|
Procedure ReadMore()
|
||||||
|
Debug "User clicked on 'Read More'"
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure Share()
|
||||||
|
Debug "User clicked on 'Share'"
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure Action()
|
||||||
|
Debug "User clicked on 'Action'"
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure Main(Result)
|
||||||
|
UseModule MaterialSB
|
||||||
|
|
||||||
|
SetDarkTheme(#False)
|
||||||
|
|
||||||
|
; Navbar
|
||||||
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
||||||
|
NavbarAddLogo("Cards")
|
||||||
|
|
||||||
|
; Create a container row
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h3>Card Component</h3>")
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
; First column - Simple card
|
||||||
|
Col(12, 6, 4)
|
||||||
|
|
||||||
|
Card()
|
||||||
|
CardImage("https://picsum.photos/400/300")
|
||||||
|
CardContent()
|
||||||
|
CardTitle("Simple Card")
|
||||||
|
Append("<p>This is a simple card with an image, content, and action buttons.</p>")
|
||||||
|
CloseCurrentParent()
|
||||||
|
CardAction()
|
||||||
|
Append(Link("Read More", @ReadMore()))
|
||||||
|
Append(Link("Share", @Share()))
|
||||||
|
CloseCurrentParent(3)
|
||||||
|
|
||||||
|
; Second column - Panel card
|
||||||
|
Col(12, 6, 4)
|
||||||
|
|
||||||
|
; You don't need to use the helpers, all MaterialSB components support HTML.
|
||||||
|
Card("<span class='card-title'>Panel Card</span>", #Card_Panel)
|
||||||
|
AddClass(GetCurrentParent(), #Color_Teal + #Color_Lighten_4)
|
||||||
|
Append("<p>Panel cards are simpler and don't have sections. Great for short messages or alerts.</p>")
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
; Third column - Card with colored content
|
||||||
|
Col(12, 6, 4)
|
||||||
|
|
||||||
|
Card()
|
||||||
|
AddClass(GetCurrentParent(), #Color_Blue + #Color_Darken_1)
|
||||||
|
CardContent()
|
||||||
|
AddClass(GetCurrentParent(), #Color_White + #Color_Text)
|
||||||
|
CardTitle("Colored Card")
|
||||||
|
Append("<p>Cards can be styled with MaterializeCSS color classes for visual emphasis.</p>")
|
||||||
|
CloseCurrentParent()
|
||||||
|
CardAction()
|
||||||
|
AddClass(GetCurrentParent(), #Color_Blue + #Color_Darken_2)
|
||||||
|
Append(Link("Action", @Action(), #Color_White))
|
||||||
|
CloseCurrentParent(3)
|
||||||
|
|
||||||
|
; Flags
|
||||||
|
Col(12)
|
||||||
|
Append("<h5>Card Flags</h5>")
|
||||||
|
|
||||||
|
Protected t = Table("Flag", #Table_Striped | #Table_Highlight)
|
||||||
|
TableAddColumn("Description", t)
|
||||||
|
|
||||||
|
TableAddItem("#Card_Default" + Chr(10) + "Standard card with sections", t)
|
||||||
|
TableAddItem("#Card_Panel" + Chr(10) + "Simple panel without structure", t)
|
||||||
|
TableAddItem("#Card_Small" + Chr(10) + "Fixed small height", t)
|
||||||
|
TableAddItem("#Card_Medium" + Chr(10) + "Fixed medium height", t)
|
||||||
|
TableAddItem("#Card_Large" + Chr(10) + "Fixed large height", t)
|
||||||
|
TableAddItem("#Card_Horizontal" + Chr(10) + "Horizontal layout", t)
|
||||||
|
|
||||||
|
; Tips
|
||||||
|
Col(12)
|
||||||
|
Append("<br>")
|
||||||
|
Card()
|
||||||
|
AddClass(GetCurrentParent(), #Color_DeepPurple + #Color_Lighten_3)
|
||||||
|
CardContent()
|
||||||
|
CardTitle("<h5>Tips</h5>")
|
||||||
|
Append("<ul> " +
|
||||||
|
"<li>Use CardContent() and CardAction() to structure your cards properly</li>" +
|
||||||
|
"<li>Panel cards (#Card_Panel) are great for simple messages without sections</li>" +
|
||||||
|
"<li>Apply color classes with AddClass() to customize card appearance</li>" +
|
||||||
|
"</ul>")
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
Append("<br>")
|
||||||
|
Append("<br>")
|
||||||
|
|
||||||
|
CloseCurrentParent() ; Close the row
|
||||||
|
|
||||||
|
AutoInit()
|
||||||
|
|
||||||
|
UnuseModule MaterialSB
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
||||||
|
; CursorPosition = 86
|
||||||
|
; FirstLine = 30
|
||||||
|
; Folding = -
|
||||||
|
; iOSAppOrientation = 0
|
||||||
|
; AndroidAppCode = 0
|
||||||
|
; AndroidAppOrientation = 0
|
||||||
|
; EnableXP
|
||||||
|
; DPIAware
|
||||||
|
; CompileSourceDirectory
|
||||||
139
Example_Form.sb
Normal file
139
Example_Form.sb
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
; MaterialSB Example - Forms
|
||||||
|
; This example demonstrates all form components available in MaterialSB.
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
EnableExplicit
|
||||||
|
|
||||||
|
Procedure OnSubmit()
|
||||||
|
Debug "Form submitted!"
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure Main(Result)
|
||||||
|
Protected Dropdown, Range
|
||||||
|
UseModule MaterialSB
|
||||||
|
|
||||||
|
SetDarkTheme(#False)
|
||||||
|
|
||||||
|
; Create a navbar
|
||||||
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
||||||
|
NavbarAddLogo("Form Example")
|
||||||
|
|
||||||
|
; Main container
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h3>Form Components</h3>")
|
||||||
|
Append("<p>MaterialSB provides a complete set of form components styled with MaterializeCSS.</p>")
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
; Text Inputs Section
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12, 6)
|
||||||
|
|
||||||
|
Append("<h5>Text Inputs</h5>")
|
||||||
|
TextInput("Username", "Enter your username")
|
||||||
|
TextInput("Email Address", "", #Input_Email)
|
||||||
|
TextInput("Password", "", #Input_Password)
|
||||||
|
TextInput("Phone Number", "", #Input_Tel)
|
||||||
|
TextInput("Disabled Field", "Cannot edit", #Input_Disabled)
|
||||||
|
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
; Textarea
|
||||||
|
Col(12, 6)
|
||||||
|
|
||||||
|
Append("<h5>Textarea</h5>")
|
||||||
|
Textarea("Biography", "Tell us about yourself...")
|
||||||
|
Textarea("Read-only Notes", "", #Textarea_Readonly)
|
||||||
|
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
; Checkboxes and Radios
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12, 6, 4)
|
||||||
|
|
||||||
|
Append("<h5>Checkboxes</h5>")
|
||||||
|
Checkbox("Default checkbox")
|
||||||
|
Checkbox("Filled checkbox", #Checkbox_Filled)
|
||||||
|
Checkbox("Pre-checked", #Checkbox_Checked)
|
||||||
|
Checkbox("Filled & checked", #Checkbox_Filled | #Checkbox_Checked)
|
||||||
|
Checkbox("Disabled", #Checkbox_Disabled)
|
||||||
|
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
Col(12, 6, 4)
|
||||||
|
|
||||||
|
Append("<h5>Radio Buttons</h5>")
|
||||||
|
Radio("group1","Option 1", #Radio_Checked)
|
||||||
|
Radio("group1","Option 2")
|
||||||
|
Radio("group1","Option 3")
|
||||||
|
Append("<br>")
|
||||||
|
Append("<p><strong>With Gap:</strong></p>")
|
||||||
|
Radio("group2", "Choice A", #Radio_WithGap | #Radio_Checked)
|
||||||
|
Radio("group2", "Choice B", #Radio_WithGap)
|
||||||
|
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
Col(12, 6, 4)
|
||||||
|
|
||||||
|
Append("<h5>Switches</h5>")
|
||||||
|
Switch("Off", "On")
|
||||||
|
Append("<br><br>")
|
||||||
|
Switch("Disabled", "Enabled", #Switch_Checked)
|
||||||
|
Append("<br><br>")
|
||||||
|
Switch("No", "Yes", #Switch_Disabled)
|
||||||
|
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
; Select and Range
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12, 6)
|
||||||
|
|
||||||
|
Append("<h5>Select Dropdown</h5>")
|
||||||
|
Dropdown = Dropdown("Choose your country")
|
||||||
|
DropdownAddOption("Choose an option", "", Dropdown, #True)
|
||||||
|
DropdownAddOption("France", "fr", Dropdown)
|
||||||
|
DropdownAddOption("Germany", "de", Dropdown)
|
||||||
|
DropdownAddOption("United Kingdom", "uk", Dropdown)
|
||||||
|
DropdownAddOption("Canada", "ca", Dropdown)
|
||||||
|
DropdownAddOption("Japan", "jp", Dropdown)
|
||||||
|
Init(Dropdown, #Null)
|
||||||
|
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
Col(12, 6)
|
||||||
|
|
||||||
|
Append("<h5>Range Slider</h5>")
|
||||||
|
Append("<p>Volume:</p>")
|
||||||
|
Range = Range(0, 100, 50)
|
||||||
|
|
||||||
|
Append("<p>Brightness (0-255):</p>")
|
||||||
|
Range(0, 255, 128)
|
||||||
|
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
; Submit Button
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<br>")
|
||||||
|
Protected submitBtn = Button("Submit Form", #Button_Large)
|
||||||
|
AddClass(submitBtn, #Color_Green)
|
||||||
|
ButtonSetCallback(submitBtn, @OnSubmit())
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
AutoInit()
|
||||||
|
|
||||||
|
UnuseModule MaterialSB
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
|
|
||||||
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
||||||
|
; CursorPosition = 12
|
||||||
|
; Folding = -
|
||||||
|
; iOSAppOrientation = 0
|
||||||
|
; AndroidAppCode = 0
|
||||||
|
; AndroidAppOrientation = 0
|
||||||
|
; EnableXP
|
||||||
|
; DPIAware
|
||||||
|
; CompileSourceDirectory
|
||||||
142
Example_Grid.sb
Normal file
142
Example_Grid.sb
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
; 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
|
||||||
102
Example_Media.sb
Normal file
102
Example_Media.sb
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
; MaterialSB Example - Media and Tables
|
||||||
|
; This example demonstrates images, videos, and table components.
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
EnableExplicit
|
||||||
|
|
||||||
|
Procedure Main(Result)
|
||||||
|
Protected t, item
|
||||||
|
UseModule MaterialSB
|
||||||
|
|
||||||
|
SetDarkTheme(#False)
|
||||||
|
|
||||||
|
; Navbar
|
||||||
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
||||||
|
NavbarAddLogo("Media")
|
||||||
|
|
||||||
|
; Images Section
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h3>Media Components</h3>")
|
||||||
|
Append("<h5>Images</h5>")
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
Row(#Grid_Container)
|
||||||
|
|
||||||
|
Col(12, 4)
|
||||||
|
Card("", #Card_Panel)
|
||||||
|
CardTitle(Header("Default Image", 5))
|
||||||
|
item = CardContent()
|
||||||
|
AddClass(item, #Class_Centered)
|
||||||
|
Image("https://picsum.photos/300/200", "Sample image")
|
||||||
|
CloseCurrentParent(3)
|
||||||
|
|
||||||
|
Col(12, 4)
|
||||||
|
Card("", #Card_Panel)
|
||||||
|
CardTitle(Header("Responsive Image", 5))
|
||||||
|
item = CardContent()
|
||||||
|
AddClass(item, #Class_Centered)
|
||||||
|
Image("https://picsum.photos/300/200", "Responsive image", #Media_Responsive)
|
||||||
|
Append("<p class='center-align'><small>Scales with container</small></p>")
|
||||||
|
CloseCurrentParent(3)
|
||||||
|
|
||||||
|
Col(12, 4)
|
||||||
|
Card("", #Card_Panel)
|
||||||
|
CardTitle(Header("Circle Image", 5))
|
||||||
|
item = CardContent()
|
||||||
|
AddClass(item, #Class_Centered)
|
||||||
|
Image("https://picsum.photos/200/200", "Circle image", #Media_Circle | #Media_Responsive)
|
||||||
|
Append("<p class='center-align'><small>Great for avatars</small></p>")
|
||||||
|
CloseCurrentParent(3)
|
||||||
|
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
; Video Section
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h5>Videos</h5>")
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
Row(#Grid_Container)
|
||||||
|
|
||||||
|
Col(12)
|
||||||
|
Card("", #Card_Panel)
|
||||||
|
Append("<p><strong>YouTube Video (Responsive)</strong></p>")
|
||||||
|
Append("<p><em>Replace this URL with your own YouTube embed link.</em></p>")
|
||||||
|
YoutubeVideo("https://www.youtube.com/embed/jNQXAC9IVRw", #Media_Responsive)
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
Col(12)
|
||||||
|
Append("<h5>Media Flags</h5>")
|
||||||
|
t = Table("Flag", #Table_Striped | #Table_Centered)
|
||||||
|
TableAddColumn("Effect", t)
|
||||||
|
|
||||||
|
TableAddItem("#Media_Default" + Chr(10) + "Default media with no styling", t)
|
||||||
|
TableAddItem("#Media_Responsive" + Chr(10) + "Scales with container", t)
|
||||||
|
TableAddItem("#Media_Circle" + Chr(10) + "Rounded", t)
|
||||||
|
TableAddItem("#Media_Controls" + Chr(10) + "For video", t)
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
Append("<br>")
|
||||||
|
Append("<br>")
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
AutoInit()
|
||||||
|
|
||||||
|
UnuseModule MaterialSB
|
||||||
|
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
|
|
||||||
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
||||||
|
; CursorPosition = 70
|
||||||
|
; FirstLine = 12
|
||||||
|
; Folding = -
|
||||||
|
; iOSAppOrientation = 0
|
||||||
|
; AndroidAppCode = 0
|
||||||
|
; AndroidAppOrientation = 0
|
||||||
|
; EnableXP
|
||||||
|
; DPIAware
|
||||||
|
; CompileSourceDirectory
|
||||||
179
Example_Modal.sb
Normal file
179
Example_Modal.sb
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
; MaterialSB Example - Modals
|
||||||
|
; This example demonstrates different modal types and usage patterns.
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
EnableExplicit
|
||||||
|
Global Modal1, Modal2, Modal3, Modal4
|
||||||
|
|
||||||
|
|
||||||
|
Procedure OnConfirm()
|
||||||
|
Debug "User confirmed the action!"
|
||||||
|
MaterialSB::ModalClose(Modal4)
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure OnCancel()
|
||||||
|
Debug "User cancelled."
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure ButtonShowModal1()
|
||||||
|
MaterialSB::ModalOpen(Modal1)
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure ButtonShowModal2()
|
||||||
|
MaterialSB::ModalOpen(Modal2)
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure ButtonShowModal3()
|
||||||
|
MaterialSB::ModalOpen(Modal3)
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure ButtonShowModal4()
|
||||||
|
MaterialSB::ModalOpen(Modal4)
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure Main(Result)
|
||||||
|
Protected Button
|
||||||
|
|
||||||
|
UseModule MaterialSB
|
||||||
|
|
||||||
|
SetDarkTheme(#False)
|
||||||
|
|
||||||
|
; Navbar
|
||||||
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
||||||
|
NavbarAddLogo("Modals")
|
||||||
|
|
||||||
|
; =========================================
|
||||||
|
; Modal Definitions (must be outside main content flow)
|
||||||
|
; =========================================
|
||||||
|
|
||||||
|
; Modal 1 - Basic Modal
|
||||||
|
Modal1 = Modal()
|
||||||
|
ModalHeader("<h4>Welcome!</h4>")
|
||||||
|
ModalContent()
|
||||||
|
Append("<p>This is a basic modal dialog. You can put any content here including text, images, forms, and more.</p>")
|
||||||
|
Append("<p>Click the button below or outside the modal to close it.</p>")
|
||||||
|
CloseCurrentParent()
|
||||||
|
ModalFooter()
|
||||||
|
Button("Close", #Null, #Button_Text)
|
||||||
|
Button("Agree", #Null)
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
; Modal 2 - Fixed Footer Modal
|
||||||
|
Modal2 = Modal(#Modal_FixedFooter)
|
||||||
|
ModalHeader("<h4>Terms of Service</h4>")
|
||||||
|
ModalContent()
|
||||||
|
Append("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>")
|
||||||
|
Append("<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>")
|
||||||
|
Append("<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>")
|
||||||
|
Append("<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>")
|
||||||
|
Append("<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>")
|
||||||
|
Append("<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>")
|
||||||
|
Append("<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>")
|
||||||
|
Append("<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>")
|
||||||
|
Append("<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>")
|
||||||
|
Append("<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>")
|
||||||
|
Append("<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>")
|
||||||
|
Append("<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>")
|
||||||
|
Append("<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>")
|
||||||
|
CloseCurrentParent()
|
||||||
|
ModalFooter()
|
||||||
|
Button("Decline", #Null, #Button_Text)
|
||||||
|
Button("Accept", #Null)
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
; Modal 3 - Bottom Sheet Modal
|
||||||
|
Modal3 = Modal(#Modal_BottomSheet)
|
||||||
|
ModalHeader("<h4>Share this page</h4>")
|
||||||
|
ModalContent()
|
||||||
|
Append("<p>Choose how you want to share:</p>")
|
||||||
|
Append("<div style='display: flex; gap: 20px; justify-content: center; padding: 20px 0;'>")
|
||||||
|
Append("<a href='#' style='text-align: center;'><i class='material-icons'>email</i><br>Email</a>")
|
||||||
|
Append("<a href='#' style='text-align: center;'><i class='material-icons'>content_copy</i><br>Copy Link</a>")
|
||||||
|
Append("<a href='#' style='text-align: center;'><i class='material-icons'>message</i><br>Message</a>")
|
||||||
|
Append("<a href='#' style='text-align: center;'><i class='material-icons'>more_horiz</i><br>More</a>")
|
||||||
|
Append("</div>")
|
||||||
|
CloseCurrentParent()
|
||||||
|
ModalFooter()
|
||||||
|
Button("Cancel", @OnCancel())
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
; Modal 4 - Confirmation Dialog
|
||||||
|
Modal4 = Modal()
|
||||||
|
ModalHeader("<h4><i class='material-icons red-text'>warning</i> Delete Account?</h4>")
|
||||||
|
ModalContent()
|
||||||
|
Append("<p>This action cannot be undone. All your data will be permanently deleted.</p>")
|
||||||
|
Append("<p><strong>Are you sure you want to continue?</strong></p>")
|
||||||
|
CloseCurrentParent()
|
||||||
|
ModalFooter()
|
||||||
|
Button("Cancel", @OnCancel())
|
||||||
|
AddClass(Button("Confirm", @OnConfirm()), #Color_Red)
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
|
||||||
|
; =========================================
|
||||||
|
; Main content
|
||||||
|
; =========================================
|
||||||
|
|
||||||
|
; Header
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h3>Modal Dialogs</h3>")
|
||||||
|
Append("<p>Modals are used for dialog boxes, confirmation messages, or displaying important content.</p>")
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
; Modal Triggers
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12, 4)
|
||||||
|
|
||||||
|
Card("<h5>Basic Modal</h5>", #Card_Panel)
|
||||||
|
Append("<p>A simple modal with content and footer.</p>")
|
||||||
|
Button("Open Modal", @ButtonShowModal1())
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
Col(12, 4)
|
||||||
|
Card("<h5>Fixed Footer</h5>", #Card_Panel)
|
||||||
|
Append("<p>Modal with footer always visible.</p>")
|
||||||
|
Button("Open Modal", @ButtonShowModal2(), #Button_Tonal)
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
Col(12, 4)
|
||||||
|
Card("<h5>Bottom Sheet</h5>", #Card_Panel)
|
||||||
|
Append("<p>Modal slides up from the bottom.</p>")
|
||||||
|
Button("Open Modal", @ButtonShowModal3(), #Button_Outlined)
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
CloseCurrentParent() ; Close row
|
||||||
|
|
||||||
|
; Confirmation Dialog Example
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
|
||||||
|
Card("<h5>Confirmation Dialog</h5>", #Card_Panel)
|
||||||
|
AddClass(GetCurrentParent(), #Color_Red + #Color_Lighten_4)
|
||||||
|
Append("<p>Use modals for important user decisions.</p>")
|
||||||
|
|
||||||
|
Button = Button("Open Modal", @ButtonShowModal4())
|
||||||
|
AddClass(Button, #Color_Red)
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
CloseCurrentParent() ; Close row
|
||||||
|
|
||||||
|
|
||||||
|
AutoInit()
|
||||||
|
|
||||||
|
UnuseModule MaterialSB
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
|
|
||||||
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
||||||
|
; CursorPosition = 53
|
||||||
|
; FirstLine = 33
|
||||||
|
; Folding = D-
|
||||||
|
; iOSAppOrientation = 0
|
||||||
|
; AndroidAppCode = 0
|
||||||
|
; AndroidAppOrientation = 0
|
||||||
|
; EnableXP
|
||||||
|
; DPIAware
|
||||||
|
; CompileSourceDirectory
|
||||||
94
Example_Navbar.sb
Normal file
94
Example_Navbar.sb
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
; 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
|
||||||
64
Example_Sidenav.sb
Normal file
64
Example_Sidenav.sb
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
; MaterialSB Example - Sidenav
|
||||||
|
; This example demonstrates the sidenav component.
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
EnableExplicit
|
||||||
|
|
||||||
|
Procedure Main(Result)
|
||||||
|
Protected t, sidenav
|
||||||
|
UseModule MaterialSB
|
||||||
|
|
||||||
|
SetDarkTheme(#False)
|
||||||
|
|
||||||
|
; Create navbar with sidenav trigger
|
||||||
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
||||||
|
NavbarAddSidenavTrigger("main-sidenav")
|
||||||
|
NavbarAddLogo("Sidenav")
|
||||||
|
|
||||||
|
; Create sidenav (must be outside navbar per Materialize rules)
|
||||||
|
sidenav = Sidenav()
|
||||||
|
SetAttribute(sidenav, "id", "main-sidenav")
|
||||||
|
SidenavAddUserView("John Doe", "john@example.com", "", "")
|
||||||
|
SidenavAddLink("Home", "#", "home")
|
||||||
|
SidenavAddLink("Settings", "#settings", "settings")
|
||||||
|
SidenavAddDivider()
|
||||||
|
SidenavAddSubheader("Categories")
|
||||||
|
SidenavAddLink("Music", "#music", "music_note")
|
||||||
|
SidenavAddLink("Photos", "#photos", "photo")
|
||||||
|
Init(sidenav, #Null)
|
||||||
|
|
||||||
|
; Content
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h3>Sidenav Component</h3>")
|
||||||
|
Append("<p>The sidenav provides a slide-out navigation panel. On mobile devices, click the hamburger menu icon to open it.</p>")
|
||||||
|
|
||||||
|
Append("<h5>Sidenav Flags</h5>")
|
||||||
|
|
||||||
|
t = Table("Flag", #Table_Striped | #Table_Highlight)
|
||||||
|
TableAddColumn("Description", t)
|
||||||
|
|
||||||
|
TableAddItem("#Sidenav_Default" + Chr(10) + "Standard sidenav", t)
|
||||||
|
TableAddItem("#Sidenav_Fixed" + Chr(10) + "Always visible on large screens", t)
|
||||||
|
TableAddItem("#Sidenav_Right" + Chr(10) + "Opens from the right side", t)
|
||||||
|
TableAddItem("#Sidenav_CloseOnClick" + Chr(10) + "Closes when a link is clicked", t)
|
||||||
|
|
||||||
|
Append("<br>")
|
||||||
|
|
||||||
|
Append("<h5>Available Functions</h5>")
|
||||||
|
Append("<ul>")
|
||||||
|
Append("<li><code>Sidenav(Flags)</code> - Create the sidenav container</li>")
|
||||||
|
Append("<li><code>SidenavAddLink(Text, Link, Icon)</code> - Add a navigation link with optional Material Icon</li>")
|
||||||
|
Append("<li><code>SidenavAddDivider()</code> - Add a horizontal divider</li>")
|
||||||
|
Append("<li><code>SidenavAddSubheader(Text)</code> - Add a section subheader</li>")
|
||||||
|
Append("<li><code>SidenavAddUserView(Name, Email, AvatarPath, BackgroundPath)</code> - Add a user profile section</li>")
|
||||||
|
Append("</ul>")
|
||||||
|
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
AutoInit()
|
||||||
|
UnuseModule MaterialSB
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
87
Example_Table.sb
Normal file
87
Example_Table.sb
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
; MaterialSB Example - Tables
|
||||||
|
; This example demonstrates the table component.
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
EnableExplicit
|
||||||
|
|
||||||
|
Procedure Main(Result)
|
||||||
|
Protected t, item
|
||||||
|
UseModule MaterialSB
|
||||||
|
|
||||||
|
SetDarkTheme(#False)
|
||||||
|
|
||||||
|
; Navbar
|
||||||
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
||||||
|
NavbarAddLogo("Tables")
|
||||||
|
|
||||||
|
; Tables Section
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h3>Table Component</h3>")
|
||||||
|
Append("<p>Tables help organize data. MaterialSB supports striped, highlighted, centered, and responsive tables.</p>")
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
; Basic Table
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12, 6)
|
||||||
|
Append("<h5>Basic Table</h5>")
|
||||||
|
|
||||||
|
t = Table("Name", #Table_Default)
|
||||||
|
TableAddColumn("Age", t)
|
||||||
|
TableAddColumn("Country", t)
|
||||||
|
|
||||||
|
TableAddItem("Alice" + Chr(10) + "28" + Chr(10) + "France", t)
|
||||||
|
TableAddItem("Bob" + Chr(10) + "34" + Chr(10) + "Germany", t)
|
||||||
|
TableAddItem("Charlie" + Chr(10) + "22" + Chr(10) + "UK", t)
|
||||||
|
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
; Striped and Highlighted Table
|
||||||
|
Col(12, 6)
|
||||||
|
Append("<h5>Striped & Highlighted</h5>")
|
||||||
|
|
||||||
|
t = Table("Product", #Table_Striped | #Table_Highlight)
|
||||||
|
TableAddColumn("Price", t)
|
||||||
|
TableAddColumn("Stock", t)
|
||||||
|
|
||||||
|
TableAddItem("Widget A" + Chr(10) + "$19.99" + Chr(10) + "150", t)
|
||||||
|
TableAddItem("Widget B" + Chr(10) + "$29.99" + Chr(10) + "75", t)
|
||||||
|
TableAddItem("Widget C" + Chr(10) + "$9.99" + Chr(10) + "300", t)
|
||||||
|
TableAddItem("Widget D" + Chr(10) + "$49.99" + Chr(10) + "25", t)
|
||||||
|
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
; Table flags reference
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h5>Table Flags</h5>")
|
||||||
|
|
||||||
|
t = Table("Flag", #Table_Striped | #Table_Centered)
|
||||||
|
TableAddColumn("Effect", t)
|
||||||
|
|
||||||
|
TableAddItem("#Table_Default" + Chr(10) + "Plain table with no styling", t)
|
||||||
|
TableAddItem("#Table_Striped" + Chr(10) + "Alternating row colors", t)
|
||||||
|
TableAddItem("#Table_Highlight" + Chr(10) + "Highlight row on hover", t)
|
||||||
|
TableAddItem("#Table_Centered" + Chr(10) + "Center-align all content", t)
|
||||||
|
TableAddItem("#Table_Responsive" + Chr(10) + "Horizontal scroll on small screens", t)
|
||||||
|
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
AutoInit()
|
||||||
|
|
||||||
|
UnuseModule MaterialSB
|
||||||
|
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
|
|
||||||
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
||||||
|
; CursorPosition = 1
|
||||||
|
; Folding = -
|
||||||
|
; iOSAppOrientation = 0
|
||||||
|
; AndroidAppCode = 0
|
||||||
|
; AndroidAppOrientation = 0
|
||||||
|
; EnableXP
|
||||||
|
; DPIAware
|
||||||
|
; CompileSourceDirectory
|
||||||
83
Example_Toast.sb
Normal file
83
Example_Toast.sb
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
; MaterialSB Example - Toast
|
||||||
|
; This example demonstrates the toast notification system
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
EnableExplicit
|
||||||
|
|
||||||
|
Procedure ShowBasicToast()
|
||||||
|
MaterialSB::Toast("Hello! This is a simple toast.")
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure ShowRoundedToast()
|
||||||
|
MaterialSB::Toast("This toast has rounded corners.", 4000, MaterialSB::#Toast_Rounded)
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure ShowColoredToast()
|
||||||
|
MaterialSB::Toast("Success! Operation completed.", 4000, MaterialSB::#Toast_Default, MaterialSB::#Color_Green)
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure ShowLongToast()
|
||||||
|
MaterialSB::Toast("This toast will stay visible for 8 seconds.", 8000)
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure DismissAll()
|
||||||
|
MaterialSB::ToastDismissAll()
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
Procedure Main(Result)
|
||||||
|
Protected t
|
||||||
|
UseModule MaterialSB
|
||||||
|
|
||||||
|
SetDarkTheme(#False)
|
||||||
|
|
||||||
|
; Navbar
|
||||||
|
Navbar(#Navbar_Shadow1 | #Navbar_Container)
|
||||||
|
NavbarAddLogo("Toasts")
|
||||||
|
|
||||||
|
Row(#Grid_Container)
|
||||||
|
Col(12)
|
||||||
|
Append("<h3>Toast Component</h3>")
|
||||||
|
Append("<p>Toasts provide brief messages about app processes at the bottom of the screen.</p>")
|
||||||
|
|
||||||
|
Append("<h5>Toast Examples</h5>")
|
||||||
|
|
||||||
|
Button("Basic Toast", @ShowBasicToast())
|
||||||
|
Button("Rounded Toast", @ShowRoundedToast(), #Button_Tonal)
|
||||||
|
Button("Colored Toast", @ShowColoredToast(), #Button_Outlined)
|
||||||
|
Button("Long Duration (8s)", @ShowLongToast(), #Button_Text)
|
||||||
|
AddClass(Button("Dismiss All", @DismissAll()), #Color_Red)
|
||||||
|
CloseCurrentParent()
|
||||||
|
|
||||||
|
Col(12)
|
||||||
|
Append("<br><br>")
|
||||||
|
Append("<h5>Toast Flags</h5>")
|
||||||
|
|
||||||
|
t = Table("Flag", #Table_Striped | #Table_Highlight)
|
||||||
|
TableAddColumn("Description", t)
|
||||||
|
|
||||||
|
TableAddItem("#Toast_Default" + Chr(10) + "Standard toast notification", t)
|
||||||
|
TableAddItem("#Toast_Rounded" + Chr(10) + "Toast with rounded corners", t)
|
||||||
|
|
||||||
|
Append("<br>")
|
||||||
|
Append("<h5>Usage</h5>")
|
||||||
|
Append(~"<pre>Toast(Text.s, Duration = 4000, Flags = #Toast_Default, Color.s = \"\")</pre>")
|
||||||
|
Append("<p>The Duration parameter specifies how long the toast is displayed in milliseconds.</p>")
|
||||||
|
|
||||||
|
CloseCurrentParent(2)
|
||||||
|
|
||||||
|
AutoInit()
|
||||||
|
|
||||||
|
UnuseModule MaterialSB
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
||||||
|
; CursorPosition = 7
|
||||||
|
; Folding = --
|
||||||
|
; iOSAppOrientation = 0
|
||||||
|
; AndroidAppCode = 0
|
||||||
|
; AndroidAppOrientation = 0
|
||||||
|
; EnableXP
|
||||||
|
; DPIAware
|
||||||
|
; CompileSourceDirectory
|
||||||
35
LocalFiles/CSS/material-icons.css
Normal file
35
LocalFiles/CSS/material-icons.css
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: local('Material Icons'),
|
||||||
|
local('MaterialIcons-Regular'),
|
||||||
|
url(LocalFiles/Font/MaterialIcons-Regular.woff2) format('woff2'),
|
||||||
|
url(LocalFiles/Font/MaterialIcons-Regular.woff) format('woff'),
|
||||||
|
url(LocalFiles/Font/MaterialIcons-Regular.ttf) format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 24px; /* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: ltr;
|
||||||
|
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
/* Support for IE. */
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
}
|
||||||
6
LocalFiles/CSS/materialize.min.css
vendored
Normal file
6
LocalFiles/CSS/materialize.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
LocalFiles/Font/MaterialIcons-Regular.ttf
Normal file
BIN
LocalFiles/Font/MaterialIcons-Regular.ttf
Normal file
Binary file not shown.
BIN
LocalFiles/Font/MaterialIcons-Regular.woff
Normal file
BIN
LocalFiles/Font/MaterialIcons-Regular.woff
Normal file
Binary file not shown.
BIN
LocalFiles/Font/MaterialIcons-Regular.woff2
Normal file
BIN
LocalFiles/Font/MaterialIcons-Regular.woff2
Normal file
Binary file not shown.
6
LocalFiles/JS/materialize.min.js
vendored
Normal file
6
LocalFiles/JS/materialize.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1678
MaterialSB.sbi
Normal file
1678
MaterialSB.sbi
Normal file
File diff suppressed because it is too large
Load Diff
142
MaterialSB.sbp
Normal file
142
MaterialSB.sbp
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
|
||||||
|
<project xmlns="http://www.purebasic.com/namespace" version="1.0" creator="SpiderBasic 3.10 (Windows - x86)">
|
||||||
|
<section name="config">
|
||||||
|
<options closefiles="1" openmode="0" name="MaterialSB"/>
|
||||||
|
<comment>Implement Materialize as SB gadgets</comment>
|
||||||
|
</section>
|
||||||
|
<section name="data">
|
||||||
|
<explorer view="C:\ProgramData\SpiderBasic\Examples\" pattern="0"/>
|
||||||
|
<log show="1"/>
|
||||||
|
<lastopen date="2026-01-24 20:32" user="lastlife" host="MONSTRO"/>
|
||||||
|
</section>
|
||||||
|
<section name="files">
|
||||||
|
<file name="MaterialSB.sbi">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="1" panelstate="+"/>
|
||||||
|
<fingerprint md5="826a345111b16f58bbb4b152a822a450"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Navbar.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="2" panelstate="+"/>
|
||||||
|
<fingerprint md5="e46e4910a3f3e5aa3ff8d687c63679e6"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Table.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="3" panelstate="+"/>
|
||||||
|
<fingerprint md5="a0329da78299b567b7f17f1c0a8db01b"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Media.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="4" panelstate="+"/>
|
||||||
|
<fingerprint md5="e42dafa6dba54f05462acbe67141b24b"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Form.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="5" panelstate="+"/>
|
||||||
|
<fingerprint md5="d5405769d63d76a4128428843e7df79c"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Sidenav.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="6" panelstate="+"/>
|
||||||
|
<fingerprint md5="12b7dc8af744e2ea1ceefdeeb2136069"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Toast.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="7" panelstate="+"/>
|
||||||
|
<fingerprint md5="4982a41e1a603bc1f251afe1898aa8b7"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Button.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="8" panelstate="+"/>
|
||||||
|
<fingerprint md5="3d66229ccfb0c6e9668208bcdcaf5e1a"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Card.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="0" sortindex="999" panelstate="+"/>
|
||||||
|
<fingerprint md5="3c0f19783c897cd6fbfab9fde6aa9bd7"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Modal.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="0" sortindex="999" panelstate="+"/>
|
||||||
|
<fingerprint md5="3a28ac1e6720868d43f6a350dfbf67f5"/>
|
||||||
|
</file>
|
||||||
|
<file name="Playground.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="1" sortindex="9" panelstate="+"/>
|
||||||
|
<fingerprint md5="45bf5d8bb7f48c18e0b1945ef3e2effb"/>
|
||||||
|
</file>
|
||||||
|
<file name="Example_Grid.sb">
|
||||||
|
<config load="0" scan="1" panel="1" warn="1" lastopen="0" sortindex="999" panelstate="+"/>
|
||||||
|
<fingerprint md5="c60ef09357e54d69387f375097e834e9"/>
|
||||||
|
</file>
|
||||||
|
</section>
|
||||||
|
<section name="targets">
|
||||||
|
<target name="Playground" enabled="1" default="1">
|
||||||
|
<inputfile value="Playground.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="0" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Cards" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Card.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="0" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Navbar" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Navbar.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="0" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Table" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Table.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="0" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Media" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Media.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="0" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Grid" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Grid.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="0" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Forms" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Form.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="1" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Sidenav" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Sidenav.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="1" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Modal" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Modal.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="1" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Buttons" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Button.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="1" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
<target name="Example: Toast" enabled="1" default="0">
|
||||||
|
<inputfile value="Example_Toast.sb"/>
|
||||||
|
<outputfile value=""/>
|
||||||
|
<options xpskin="1" dpiaware="1" debug="1" optimizer="0" webserveraddress="" windowtheme="" gadgettheme=""/>
|
||||||
|
<export webappname="" webappicon="" htmlfilename="" javascriptfilename="" javascriptpath="" copyjavascriptlibrary="0" exportcommandline="" exportarguments="" enableresourcedirectory="0" resourcedirectory="" webappenabledebugger="0" iosappname="" iosappicon="" iosappversion="" iosapppackageid="" iosappstartupimage="" iosapporientation="0" iosappfullscreen="0" iosappoutput="" iosappautoupload="0" iosappenableresourcedirectory="0" iosappresourcedirectory="" iosappenabledebugger="0" iosappkeepappdirectory="0" androidappname="" androidappicon="" androidappversion="" androidappcode="1" androidapppackageid="" androidappiapkey="" androidappstartupimage="" androidappstartupcolor="" androidapporientation="0" androidappfullscreen="0" androidappoutput="" androidappautoupload="0" androidappenableresourcedirectory="0" androidappresourcedirectory="" androidappenabledebugger="0" androidappkeepappdirectory="0" androidappinsecurefilemode="0"/>
|
||||||
|
<temporaryexe value="source"/>
|
||||||
|
</target>
|
||||||
|
</section>
|
||||||
|
</project>
|
||||||
40
Playground.sb
Normal file
40
Playground.sb
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
; /!\ this is where I test the feature as I implement them /!\
|
||||||
|
|
||||||
|
; https://picsum.photos/300/200 Quick image!
|
||||||
|
|
||||||
|
IncludeFile "MaterialSB.sbi"
|
||||||
|
|
||||||
|
Procedure Main(Success)
|
||||||
|
If Success
|
||||||
|
; Create and initialize a carousel
|
||||||
|
carousel = MaterialSB::Carousel()
|
||||||
|
MaterialSB::CarouselAddItem(carousel, "https://picsum.photos/300/200", "#")
|
||||||
|
MaterialSB::CarouselAddItem(carousel, "https://picsum.photos/300/200", "#")
|
||||||
|
MaterialSB::CarouselAddItem(carousel, "https://picsum.photos/300/200", "#")
|
||||||
|
MaterialSB::Init(carousel, #Null)
|
||||||
|
|
||||||
|
; Create and initialize a dropdown
|
||||||
|
dropdown = MaterialSB::Dropdown("Select an option")
|
||||||
|
MaterialSB::DropdownAddOption("Option 1", "1", dropdown)
|
||||||
|
MaterialSB::DropdownAddOption("Option 2", "2", dropdown)
|
||||||
|
MaterialSB::DropdownAddOption("Option 3", "3", dropdown, #True) ; Selected
|
||||||
|
MaterialSB::Init(dropdown, #Null)
|
||||||
|
|
||||||
|
; Create and initialize a sidenav
|
||||||
|
sidenav = MaterialSB::Sidenav()
|
||||||
|
MaterialSB::SidenavAddLink("Home", "/", "home")
|
||||||
|
MaterialSB::SidenavAddLink("About", "/about", "info")
|
||||||
|
MaterialSB::Init(sidenav, #Null)
|
||||||
|
EndIf
|
||||||
|
EndProcedure
|
||||||
|
|
||||||
|
MaterialSB::Download(@Main())
|
||||||
|
; IDE Options = SpiderBasic 3.10 (Windows - x86)
|
||||||
|
; CursorPosition = 3
|
||||||
|
; Folding = -
|
||||||
|
; iOSAppOrientation = 0
|
||||||
|
; AndroidAppCode = 0
|
||||||
|
; AndroidAppOrientation = 0
|
||||||
|
; EnableXP
|
||||||
|
; DPIAware
|
||||||
|
; CompileSourceDirectory
|
||||||
Loading…
Reference in New Issue
Block a user