144 lines
3.3 KiB
Lua
144 lines
3.3 KiB
Lua
-- Example: Theming and Custom Components
|
|
-- This demonstrates how to use themes and create custom components
|
|
|
|
local FlexLove = require("libs.FlexLove")
|
|
|
|
local ThemeExample = {}
|
|
|
|
function ThemeExample:new()
|
|
local obj = {
|
|
themeIndex = 1,
|
|
themes = { "space", "metal" },
|
|
}
|
|
setmetatable(obj, { __index = self })
|
|
return obj
|
|
end
|
|
|
|
function ThemeExample:render()
|
|
local flex = FlexLove.new({
|
|
x = "10%",
|
|
y = "10%",
|
|
width = "80%",
|
|
height = "80%",
|
|
positioning = "flex",
|
|
flexDirection = "vertical",
|
|
gap = 10,
|
|
padding = { horizontal = 10, vertical = 10 },
|
|
})
|
|
|
|
-- Title
|
|
FlexLove.new({
|
|
parent = flex,
|
|
text = "Theming and Custom Components Example",
|
|
textAlign = "center",
|
|
textSize = "2xl",
|
|
width = "100%",
|
|
height = "10%",
|
|
})
|
|
|
|
-- Theme selector
|
|
local themeSelector = FlexLove.new({
|
|
parent = flex,
|
|
positioning = "flex",
|
|
flexDirection = "horizontal",
|
|
justifyContent = "space-between",
|
|
alignItems = "center",
|
|
width = "100%",
|
|
height = "10%",
|
|
backgroundColor = "#2d3748",
|
|
borderRadius = 8,
|
|
padding = { horizontal = 10 },
|
|
})
|
|
|
|
FlexLove.new({
|
|
parent = themeSelector,
|
|
text = "Current Theme: " .. self.themes[self.themeIndex],
|
|
textAlign = "left",
|
|
textSize = "md",
|
|
width = "50%",
|
|
})
|
|
|
|
FlexLove.new({
|
|
parent = themeSelector,
|
|
themeComponent = "buttonv2",
|
|
text = "Switch Theme",
|
|
textAlign = "center",
|
|
width = "30%",
|
|
onEvent = function(_, event)
|
|
if event.type == "release" then
|
|
self.themeIndex = (self.themeIndex % #self.themes) + 1
|
|
-- In a real app, you'd update the theme here
|
|
print("Theme switched to: " .. self.themes[self.themeIndex])
|
|
end
|
|
end,
|
|
})
|
|
|
|
-- Custom component example - A styled card
|
|
local customCard = FlexLove.new({
|
|
parent = flex,
|
|
positioning = "flex",
|
|
flexDirection = "vertical",
|
|
justifyContent = "center",
|
|
alignItems = "center",
|
|
width = "100%",
|
|
height = "40%",
|
|
themeComponent = "cardv2", -- Uses theme styling
|
|
padding = { horizontal = 20, vertical = 20 },
|
|
margin = { top = 10 },
|
|
})
|
|
|
|
FlexLove.new({
|
|
parent = customCard,
|
|
text = "Custom Card Component",
|
|
textAlign = "center",
|
|
textSize = "lg",
|
|
width = "100%",
|
|
height = "30%",
|
|
})
|
|
|
|
FlexLove.new({
|
|
parent = customCard,
|
|
text = "This demonstrates how to create reusable components with theme support",
|
|
textAlign = "center",
|
|
textSize = "sm",
|
|
width = "100%",
|
|
height = "50%",
|
|
color = "#a0aec0", -- Light gray text
|
|
})
|
|
|
|
-- Another custom component - Status indicator
|
|
local statusIndicator = FlexLove.new({
|
|
parent = flex,
|
|
positioning = "flex",
|
|
flexDirection = "horizontal",
|
|
justifyContent = "space-between",
|
|
alignItems = "center",
|
|
width = "100%",
|
|
height = "20%",
|
|
backgroundColor = "#4a5568",
|
|
borderRadius = 8,
|
|
padding = { horizontal = 15 },
|
|
})
|
|
|
|
FlexLove.new({
|
|
parent = statusIndicator,
|
|
text = "Status: Active",
|
|
textAlign = "left",
|
|
textSize = "md",
|
|
width = "50%",
|
|
})
|
|
|
|
local statusDot = FlexLove.new({
|
|
parent = statusIndicator,
|
|
positioning = "flex",
|
|
width = 20,
|
|
height = 20,
|
|
backgroundColor = "#48bb78", -- Green dot
|
|
borderRadius = 10, -- Circle
|
|
})
|
|
|
|
return flex
|
|
end
|
|
|
|
return ThemeExample
|