121 lines
3.2 KiB
Plaintext
121 lines
3.2 KiB
Plaintext
; 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 |