Skip to content

Panel

Panel management system for the Lilia framework.


Overview

The panel meta table provides comprehensive functionality for managing VGUI panels, UI interactions, and panel operations in the Lilia framework. It handles panel event listening, inventory synchronization, UI updates, and panel-specific operations. The meta table operates primarily on the client side, with the server providing data that panels can listen to and display. It includes integration with the inventory system for inventory change notifications, character system for character data display, network system for data synchronization, and UI system for panel management. The meta table ensures proper panel event handling, inventory synchronization, UI updates, and comprehensive panel lifecycle management from creation to destruction.

liaListenForInventoryChanges(inventory)

Purpose

Registers the panel to mirror inventory events to its methods.

When Called

Use when a panel needs to react to changes in a specific inventory.

Parameters

Inventory inventory Inventory instance whose events should be listened to.

Example Usage

  panel:liaListenForInventoryChanges(inv)

liaDeleteInventoryHooks(id)

Purpose

Removes inventory event hooks previously registered on the panel.

When Called

Call when tearing down a panel or when an inventory is no longer tracked.

Parameters

number id optional Optional inventory ID to target; nil clears all known hooks.

Example Usage

  panel:liaDeleteInventoryHooks(invID)

setScaledPos(x, y)

Purpose

Sets the panel position using screen-scaled coordinates.

When Called

Use when positioning should respect different resolutions.

Parameters

number x Horizontal position before scaling.

number y Vertical position before scaling.

Example Usage

  panel:setScaledPos(32, 48)

setScaledSize(w, h)

Purpose

Sets the panel size using screen-scaled dimensions.

When Called

Use when sizing should scale with screen resolution.

Parameters

number w Width before scaling.

number h Height before scaling.

Example Usage

  panel:setScaledSize(120, 36)

On(name, fn)

Purpose

Appends an additional handler to a panel function without removing the existing one.

When Called

Use to extend an existing panel callback (e.g., Paint, Think) while preserving prior logic.

Parameters

string name Panel function name to wrap.

function fn Function to run after the original callback.

Example Usage

  panel:On("Paint", function(s, w, h) draw.RoundedBox(0, 0, 0, w, h, col) end)

SetupTransition(name, speed, fn)

Purpose

Creates a smoothly lerped state property driven by a predicate function.

When Called

Use when a panel needs an animated transition flag (e.g., hover fades).

Parameters

string name Property name to animate on the panel.

number speed Lerp speed multiplier.

function fn Predicate returning true when the property should approach 1.

Example Usage

  panel:SetupTransition("HoverAlpha", 6, function(s) return s:IsHovered() end)

FadeHover(col, speed, rad)

Purpose

Draws a faded overlay that brightens when the panel is hovered.

When Called

Apply to panels that need a simple hover highlight.

Parameters

Color col Overlay color and base alpha.

number speed Transition speed toward hover state.

number rad optional Optional corner radius for rounded boxes.

Example Usage

  panel:FadeHover(Color(255,255,255,40), 8, 4)

BarHover(col, height, speed)

Purpose

Animates a horizontal bar under the panel while hovered.

When Called

Use for button underlines or similar hover indicators.

Parameters

Color col Bar color.

number height Bar thickness in pixels.

number speed Transition speed toward hover state.

Example Usage

  panel:BarHover(Color(0,150,255), 2, 10)

FillHover(col, dir, speed, mat)

Purpose

Fills the panel from one side while hovered, optionally using a material.

When Called

Use when a directional hover fill effect is desired.

Parameters

Color col Fill color.

number dir Direction constant (LEFT, RIGHT, TOP, BOTTOM).

number speed Transition speed toward hover state.

IMaterial mat optional Optional material to draw instead of a solid color.

Example Usage

  panel:FillHover(Color(255,255,255,20), LEFT, 6)

Background(col, rad)

Purpose

Paints a solid background for the panel with optional rounded corners.

When Called

Use when a panel needs a consistent background fill.

Parameters

Color col Fill color.

number rad optional Corner radius; nil or 0 draws a square rect.

Example Usage

  panel:Background(Color(20,20,20,230), 6)

Material(mat, col)

Purpose

Draws a textured material across the panel.

When Called

Use when a static material should cover the panel area.

Parameters

IMaterial mat Material to render.

Color col Color tint applied to the material.

Example Usage

  panel:Material(Material("vgui/gradient-l"), Color(255,255,255))

TiledMaterial(mat, tw, th, col)

Purpose

Tiles a material over the panel at a fixed texture size.

When Called

Use when repeating patterns should fill the panel.

Parameters

IMaterial mat Material to tile.

number tw Tile width in texture units.

number th Tile height in texture units.

Color col Color tint for the material.

Example Usage

  panel:TiledMaterial(myMat, 64, 64, Color(255,255,255))

Outline(col, width)

Purpose

Draws an outlined rectangle around the panel.

When Called

Use to give a panel a simple border.

Parameters

Color col Outline color.

number width Border thickness in pixels.

Example Usage

  panel:Outline(Color(255,255,255), 2)

LinedCorners(col, cornerLen)

Purpose

Draws minimal corner lines on opposite corners of the panel.

When Called

Use for a lightweight corner accent instead of a full border.

Parameters

Color col Corner line color.

number cornerLen Length of each corner arm in pixels.

Example Usage

  panel:LinedCorners(Color(255,255,255), 12)

SideBlock(col, size, side)

Purpose

Adds a solid strip to one side of the panel.

When Called

Use for side indicators or separators on panels.

Parameters

Color col Strip color.

number size Strip thickness in pixels.

number side Side constant (LEFT, RIGHT, TOP, BOTTOM).

Example Usage

  panel:SideBlock(Color(0,140,255), 4, LEFT)

Text(text, font, col, alignment, paint)

Purpose

Renders a single line of text within the panel or sets label properties directly.

When Called

Use to quickly add centered or aligned text to a panel.

Parameters

string text Text to display.

string font Font name to use.

Color col Text color.

number alignment TEXT_ALIGN_* constant controlling horizontal alignment.

boolean paint Force paint-based rendering even if label setters exist.

Example Usage

  panel:Text("Hello", "Trebuchet24", color_white, TEXT_ALIGN_CENTER)

DualText(alignment, centerSpacing)

Purpose

Draws two stacked text lines with independent styling.

When Called

Use when a panel needs a title and subtitle aligned together.

Parameters

number alignment TEXT_ALIGN_* horizontal alignment.

number centerSpacing Offset to spread the two lines from the center point.

Example Usage

  panel:DualText("Title", "Trebuchet24", lia.colors.primary, "Detail", "Trebuchet18", color_white)

Blur(amount)

Purpose

Draws a post-process blur behind the panel bounds.

When Called

Use to blur the world/UI behind a panel while it is painted.

Parameters

number amount Blur intensity multiplier.

Example Usage

  panel:Blur(8)

CircleClick(col, speed, trad)

Purpose

Creates a ripple effect centered on the click position.

When Called

Use for buttons that need animated click feedback.

Parameters

Color col Ripple color and opacity.

number speed Lerp speed for expansion and fade.

number trad optional Target radius override; defaults to panel width.

Example Usage

  panel:CircleClick(Color(255,255,255,40), 5)

CircleHover(col, speed, trad)

Purpose

Draws a circular highlight that follows the cursor while hovering.

When Called

Use for hover feedback centered on the cursor position.

Parameters

Color col Highlight color and base opacity.

number speed Transition speed for appearing/disappearing.

number trad optional Target radius; defaults to panel width.

Example Usage

  panel:CircleHover(Color(255,255,255,30), 6)

SquareCheckbox(inner, outer, speed)

Purpose

Renders an animated square checkbox fill tied to the panel's checked state.

When Called

Use on checkbox panels to visualize toggled state.

Parameters

Color inner Color of the filled square.

Color outer Color of the outline/background.

number speed Transition speed for filling.

Example Usage

  checkbox:SquareCheckbox()

CircleCheckbox(inner, outer, speed)

Purpose

Renders an animated circular checkbox tied to the panel's checked state.

When Called

Use on checkbox panels that should appear circular.

Parameters

Color inner Color of the inner filled circle.

Color outer Outline color.

number speed Transition speed for filling.

Example Usage

  checkbox:CircleCheckbox()

AvatarMask(mask)

Purpose

Applies a stencil mask to an AvatarImage child using a custom shape.

When Called

Use when an avatar needs to be clipped to a non-rectangular mask.

Parameters

function mask Draw callback that defines the stencil shape.

Example Usage

  panel:AvatarMask(function(_, w, h) drawCircle(w/2, h/2, w/2) end)

CircleAvatar()

Purpose

Masks the panel's avatar as a circle.

When Called

Use when a circular avatar presentation is desired.

Example Usage

  panel:CircleAvatar()

Circle(col)

Purpose

Paints a filled circle that fits the panel bounds.

When Called

Use for circular panels or backgrounds.

Parameters

Color col Circle color.

Example Usage

  panel:Circle(Color(255,255,255))

CircleFadeHover(col, speed)

Purpose

Shows a fading circular overlay at the center while hovered.

When Called

Use for subtle hover feedback on circular elements.

Parameters

Color col Overlay color and base alpha.

number speed Transition speed toward hover state.

Example Usage

  panel:CircleFadeHover(Color(255,255,255,30), 6)

CircleExpandHover(col, speed)

Purpose

Draws an expanding circle from the panel center while hovered.

When Called

Use when a growing highlight is needed on hover.

Parameters

Color col Circle color and alpha.

number speed Transition speed toward hover state.

Example Usage

  panel:CircleExpandHover(Color(255,255,255,30), 6)

Gradient(col, dir, frac, op)

Purpose

Draws a directional gradient over the panel.

When Called

Use to overlay a gradient tint from a chosen side.

Parameters

Color col Gradient color.

number dir Direction constant (LEFT, RIGHT, TOP, BOTTOM).

number frac Fraction of the panel to cover with the gradient.

boolean op When true, flips the gradient material for the given direction.

Example Usage

  panel:Gradient(Color(0,0,0,180), BOTTOM, 0.4)

SetOpenURL(url)

Purpose

Opens a URL when the panel is clicked.

When Called

Attach to clickable panels that should launch an external link.

Parameters

string url URL to open.

Example Usage

  panel:SetOpenURL("https://example.com")

NetMessage(name, data)

Purpose

Sends a network message when the panel is clicked.

When Called

Use for UI buttons that trigger server-side actions.

Parameters

string name Net message name.

function data Optional writer that populates the net message payload.

Example Usage

  panel:NetMessage("liaAction", function(p) net.WriteEntity(p.Entity) end)

Stick(dock, margin, dontInvalidate)

Purpose

Docks the panel with optional margin and parent invalidation.

When Called

Use to pin a panel to a dock position with minimal boilerplate.

Parameters

number dock DOCK constant to apply; defaults to FILL.

number margin Optional uniform margin after docking.

boolean dontInvalidate Skip invalidating the parent when true.

Example Usage

  panel:Stick(LEFT, 8)

DivTall(frac, target)

Purpose

Sets the panel height to a fraction of another panel's height.

When Called

Use for proportional layout against a parent or target panel.

Parameters

number frac Divisor applied to the target height.

Panel target Panel to reference; defaults to the parent.

Example Usage

  panel:DivTall(3, parentPanel)

DivWide(frac, target)

Purpose

Sets the panel width to a fraction of another panel's width.

When Called

Use for proportional layout against a parent or target panel.

Parameters

number frac Divisor applied to the target width.

Panel target Panel to reference; defaults to the parent.

Example Usage

  panel:DivWide(2, parentPanel)

SquareFromHeight()

Purpose

Makes the panel width equal its current height.

When Called

Use when the panel should become a square based on height.

Example Usage

  panel:SquareFromHeight()

SquareFromWidth()

Purpose

Makes the panel height equal its current width.

When Called

Use when the panel should become a square based on width.

Example Usage

  panel:SquareFromWidth()

SetRemove(target)

Purpose

Removes a target panel when this panel is clicked.

When Called

Use for close buttons or dismiss actions.

Parameters

Panel target optional Panel to remove; defaults to the panel itself.

Example Usage

  closeButton:SetRemove(parentPanel)

FadeIn(time, alpha)

Purpose

Fades the panel in from transparent to a target alpha.

When Called

Use when showing a panel with a quick fade animation.

Parameters

number time Duration of the fade in seconds.

number alpha Target opacity after fading.

Example Usage

  panel:FadeIn(0.2, 255)

HideVBar()

Purpose

Hides and collapses the vertical scrollbar of a DScrollPanel.

When Called

Use when the scrollbar should be invisible but scrolling remains enabled.

Example Usage

  scrollPanel:HideVBar()

SetTransitionFunc(fn)

Purpose

Sets a shared predicate used by transition helpers to determine state.

When Called

Use before invoking helpers like SetupTransition to change their condition.

Parameters

function fn Predicate returning true when the transition should be active.

Example Usage

  panel:SetTransitionFunc(function(s) return s:IsVisible() end)

ClearTransitionFunc()

Purpose

Clears any predicate set for transition helpers.

When Called

Use to revert transition helpers back to their default behavior.

Example Usage

  panel:ClearTransitionFunc()

SetAppendOverwrite(fn)

Purpose

Overrides the target function name used by the On helper.

When Called

Use when On should wrap a different function name than the provided one.

Parameters

string fn Function name to force On to wrap.

Example Usage

  panel:SetAppendOverwrite("PaintOver")

ClearAppendOverwrite()

Purpose

Removes any function name override set for the On helper.

When Called

Use to return On to its default behavior.

Example Usage

  panel:ClearAppendOverwrite()

ClearPaint()

Purpose

Removes any custom Paint function on the panel.

When Called

Use to revert a panel to its default painting behavior.

Example Usage

  panel:ClearPaint()

ReadyTextbox()

Purpose

Prepares a text entry for Lilia styling by hiding its background and adding focus feedback.

When Called

Use after creating a TextEntry to match framework visuals.

Example Usage

  textEntry:ReadyTextbox()