cLib.DCard

Material Design cards with image, title, subtitle, and content.

Basic Usage

local card = vgui.Create("cLib.DCard", parent)
card:SetSize(cLib.Scale(300), cLib.Scale(200))
card:SetTitle("Card Title")
card:SetSubtitle("Subtitle text")

Methods

Method	Description
`SetTitle(string)`	Card title
`SetSubtitle(string)`	Subtitle/description
`SetImage(path)`	Header image
`SetImageHeight(number)`	Image height
`GetContent()`	Get content panel
`SetClickable(bool)`	Enable click
`SetElevation(number)`	Shadow depth
`SetHoverElevation(number)`	Shadow on hover

With Image

local card = vgui.Create("cLib.DCard", parent)
card:SetSize(cLib.Scale(280), cLib.Scale(320))
card:SetImage("materials/myaddon/card_header.png")
card:SetImageHeight(cLib.Scale(140))
card:SetTitle("Item Name")
card:SetSubtitle("$500")
card:SetClickable(true)

card.DoClick = function()
    OpenItemDetails()
end

Card with Content

local card = vgui.Create("cLib.DCard", parent)
card:SetSize(cLib.Scale(300), cLib.Scale(250))
card:SetTitle("Statistics")
card:SetSubtitle("Last 7 days")

local content = card:GetContent()

local stat1 = vgui.Create("DLabel", content)
stat1:SetText("Players: 150")
stat1:Dock(TOP)

local stat2 = vgui.Create("DLabel", content)
stat2:SetText("Revenue: $5,000")
stat2:Dock(TOP)

cLib.DCardGrid

Grid layout for cards.

local grid = vgui.Create("cLib.DCardGrid", parent)
grid:Dock(FILL)
grid:SetCardWidth(cLib.Scale(250))
grid:SetCardHeight(cLib.Scale(200))
grid:SetSpacing(cLib.Scale(15))

-- Add cards
for i = 1, 6 do
    grid:AddCard("Card " .. i, "Description " .. i, "materials/card" .. i .. ".png")
end

Methods (CardGrid)

Method	Description
`AddCard(title, subtitle, image)`	Add card
`AddCustomCard(panel)`	Add custom panel
`SetCardWidth(number)`	Card width
`SetCardHeight(number)`	Card height
`SetSpacing(number)`	Space between cards
`Clear()`	Remove all cards

Shop Items Grid

function CreateShopGrid(parent, items)
    local scroll = vgui.Create("cLib.DScrollPanel", parent)
    scroll:Dock(FILL)
    
    local grid = vgui.Create("cLib.DCardGrid", scroll)
    grid:Dock(TOP)
    grid:SetCardWidth(cLib.Scale(200))
    grid:SetCardHeight(cLib.Scale(250))
    grid:SetSpacing(cLib.Scale(10))
    
    for _, item in ipairs(items) do
        local card = vgui.Create("cLib.DCard")
        card:SetSize(cLib.Scale(200), cLib.Scale(250))
        card:SetImage(item.image)
        card:SetImageHeight(cLib.Scale(120))
        card:SetTitle(item.name)
        card:SetSubtitle("$" .. item.price)
        card:SetClickable(true)
        
        card.DoClick = function()
            OpenItemPurchase(item)
        end
        
        -- Add buy button to content
        local content = card:GetContent()
        local buyBtn = vgui.Create("cLib.DButton", content)
        buyBtn:SetText("Buy")
        buyBtn:Dock(BOTTOM)
        buyBtn:SetBackgroundColor(cLib.GetColor("cLib.accent"))
        buyBtn.DoClick = function()
            PurchaseItem(item)
        end
        
        grid:AddCustomCard(card)
    end
    
    return scroll
end