Panel

Panel metatable helpers for inventory-aware UI behavior, layout, transitions, and drawing.

---

Overview

The panel meta table extends Garry's Mod VGUI panels with convenience helpers for inventory hook forwarding, scaled positioning and sizing, composable paint and hover effects, avatar masking, click behaviors, layout shortcuts, and transition-driven UI animation.

---

liaListenForInventoryChanges(inventory)View Source

Purpose

Starts listening for inventory-related hooks and forwards matching events to this panel.

Realm

Client

Parameters

table inventory The inventory object whose events should be observed.

Example Usage

  panel:liaListenForInventoryChanges(inventory)

---

liaDeleteInventoryHooks(id)View Source

Purpose

Removes inventory hooks that were previously registered for this panel.

Realm

Client

Parameters

number id optional A specific inventory ID to stop listening to, or `nil` to remove all tracked inventory hooks.

Example Usage

  panel:liaDeleteInventoryHooks()
  panel:liaDeleteInventoryHooks(inventory:getID())

---

setScaledPos(x, y)View Source

Purpose

Sets the panel position using screen-scaled X and Y values.

Realm

Client

Parameters

number x The horizontal position before `ScreenScale` is applied.

number y The vertical position before `ScreenScaleH` is applied.

Example Usage

  panel:setScaledPos(32, 24)

---

setScaledSize(w, h)View Source

Purpose

Sets the panel size using screen-scaled width and height values.

Realm

Client

Parameters

number w The width before `ScreenScale` is applied.

number h The height before `ScreenScaleH` is applied.

Example Usage

  panel:setScaledSize(300, 160)

---

On(name, fn)View Source

Purpose

Appends a callback onto an existing panel method instead of replacing the method entirely.

Realm

Client

Parameters

string name The panel method name to wrap.

function fn The callback to run after the original method.

Example Usage

  panel:On("Paint", function(_, w, h)
      surface.DrawOutlinedRect(0, 0, w, h)
  end)

---

SetupTransition(name, speed, fn)View Source

Purpose

Creates a transition value that smoothly lerps between `0` and `1` based on a predicate callback.

Realm

Client

Parameters

string name The field name that stores the transition value.

number speed The interpolation speed multiplier.

function fn A callback that returns whether the transition should move toward `1`.

Example Usage

  panel:SetupTransition("HoverAmount", 8, function(s)
      return s:IsHovered()
  end)

---

FadeHover(col, speed, rad)View Source

Purpose

Paints a fading hover overlay over the panel.

Realm

Client

Parameters

Color col optional The hover overlay color.

number speed optional The hover fade speed.

number rad optional An optional rounded corner radius.

Example Usage

  panel:FadeHover(Color(255, 255, 255, 20), 6, 8)

---

BarHover(col, height, speed)View Source

Purpose

Draws an animated bar along the bottom edge while the panel is hovered.

Realm

Client

Parameters

Color col optional The bar color.

number height optional The bar thickness.

number speed optional The transition speed.

Example Usage

  panel:BarHover(Color(0, 120, 255), 3, 8)

---

FillHover(col, dir, speed, mat)View Source

Purpose

Fills the panel from a chosen direction while it is hovered.

Realm

Client

Parameters

Color col optional The fill color.

number dir optional The fill direction constant such as `LEFT` or `TOP`.

number speed optional The transition speed.

IMaterial mat optional An optional material to draw instead of a solid rectangle.

Example Usage

  panel:FillHover(Color(255, 255, 255, 25), LEFT, 8)

---

Background(col, rad, rtl, rtr, rbl, rbr)View Source

Purpose

Draws a flat or rounded background in the panel paint hook.

Realm

Client

Parameters

Color col The background color.

number rad optional The rounded corner radius.

boolean rtl optional Whether the top-left corner is rounded when using `draw.RoundedBoxEx`.

boolean rtr optional Whether the top-right corner is rounded.

boolean rbl optional Whether the bottom-left corner is rounded.

boolean rbr optional Whether the bottom-right corner is rounded.

Example Usage

  panel:Background(Color(20, 20, 20, 220), 8)

---

Material(mat, col)View Source

Purpose

Paints a material stretched across the panel.

Realm

Client

Parameters

IMaterial mat The material to draw.

Color col optional A tint color applied to the material.

Example Usage

  panel:Material(Material("vgui/white"), Color(255, 255, 255))

---

TiledMaterial(mat, tw, th, col)View Source

Purpose

Paints a tiled material across the panel using UV scaling.

Realm

Client

Parameters

IMaterial mat The material to tile.

number tw The horizontal tile size.

number th The vertical tile size.

Color col optional A tint color applied to the tiled material.

Example Usage

  panel:TiledMaterial(Material("vgui/white"), 32, 32)

---

Outline(col, width)View Source

Purpose

Draws an outline around the panel with configurable thickness.

Realm

Client

Parameters

Color col optional The outline color.

number width optional The outline thickness in pixels.

Example Usage

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

---

LinedCorners(col, cornerLen)View Source

Purpose

Draws simple line corners around the panel frame.

Realm

Client

Parameters

Color col optional The corner line color.

number cornerLen optional The length of each corner segment.

Example Usage

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

---

SideBlock(col, size, side)View Source

Purpose

Draws a solid accent block on one side of the panel.

Realm

Client

Parameters

Color col optional The block color.

number size optional The thickness of the block.

number side optional The side constant such as `LEFT` or `BOTTOM`.

Example Usage

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

---

Text(text, font, col, alignment, ox, oy, paint)View Source

Purpose

Sets built-in control text or paints centered text manually.

Realm

Client

Parameters

string text The text to display.

string font optional The font name to use.

Color col optional The text color.

number alignment optional The horizontal text alignment constant.

number ox optional Horizontal paint offset.

number oy optional Vertical paint offset.

boolean paint optional Whether to force manual painting even when native text setters exist.

Example Usage

  panel:Text("Confirm", "Trebuchet24", color_white)

---

DualText(toptext, topfont, topcol, bottomtext, bottomfont, bottomcol, alignment, centerSpacing)View Source

Purpose

Paints two stacked text lines with independent fonts and colors.

Realm

Client

Parameters

string toptext The upper text line.

string topfont optional The upper line font.

Color topcol optional The upper line color.

string bottomtext The lower text line.

string bottomfont optional The lower line font.

Color bottomcol optional The lower line color.

number alignment optional The horizontal text alignment.

number centerSpacing optional Extra spacing adjustment around the center.

Example Usage

  panel:DualText("Lilia", "Trebuchet24", color_white, "Inventory", "Trebuchet18", Color(180, 180, 180))

---

Blur(amount)View Source

Purpose

Draws a blurred fullscreen backdrop behind the panel bounds.

Realm

Client

Parameters

number amount optional The maximum blur strength.

Example Usage

  panel:Blur(8)

---

CircleClick(col, speed, trad)View Source

Purpose

Plays an expanding circular ripple from the click position.

Realm

Client

Parameters

Color col optional The ripple color.

number speed optional The expansion and fade speed.

number trad optional The target radius for the ripple.

Example Usage

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

---

CircleHover(col, speed, trad)View Source

Purpose

Draws a circular hover effect that follows the cursor.

Realm

Client

Parameters

Color col optional The hover effect color.

number speed optional The transition speed.

number trad optional The target hover radius.

Example Usage

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

---

SquareCheckbox(inner, outer, speed)View Source

Purpose

Paints an animated square checkbox fill based on checked state.

Realm

Client

Parameters

Color inner optional The fill color used when checked.

Color outer optional The outer frame color.

number speed optional The transition speed.

Example Usage

  checkbox:SquareCheckbox(Color(0, 200, 0), color_white, 14)

---

CircleCheckbox(inner, outer, speed)View Source

Purpose

Paints an animated circular checkbox fill based on checked state.

Realm

Client

Parameters

Color inner optional The fill color used when checked.

Color outer optional The outer frame color.

number speed optional The transition speed.

Example Usage

  checkbox:CircleCheckbox(Color(0, 200, 0), color_white, 14)

---

AvatarMask(mask)View Source

Purpose

Masks an embedded `AvatarImage` using a custom stencil shape callback.

Realm

Client

Parameters

function mask A drawing callback that defines the stencil mask shape.

Example Usage

  panel:AvatarMask(function(_, w, h)
      draw.RoundedBox(8, 0, 0, w, h, color_white)
  end)

---

CircleAvatar()View Source

Purpose

Applies a circular stencil mask to the panel avatar.

Realm

Client

Example Usage

  avatarPanel:CircleAvatar()

---

Circle(col)View Source

Purpose

Draws a filled circle that fits inside the panel.

Realm

Client

Parameters

Color col optional The circle color.

Example Usage

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

---

CircleFadeHover(col, speed)View Source

Purpose

Draws a circular hover overlay that fades in and out.

Realm

Client

Parameters

Color col optional The overlay color.

number speed optional The transition speed.

Example Usage

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

---

CircleExpandHover(col, speed)View Source

Purpose

Draws a circular hover overlay that expands with hover progress.

Realm

Client

Parameters

Color col optional The overlay color.

number speed optional The transition speed.

Example Usage

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

---

Gradient(col, dir, frac, op)View Source

Purpose

Draws a directional gradient overlay with optional inversion.

Realm

Client

Parameters

Color col The gradient tint color.

number dir optional The gradient direction constant.

number frac optional The fraction of the panel covered by the gradient.

boolean op optional Whether to invert the gradient material direction.

Example Usage

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

---

SetOpenURL(url)View Source

Purpose

Opens the provided URL when the panel is clicked.

Realm

Client

Parameters

string url The URL to open in the user's browser.

Example Usage

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

---

NetMessage(name, data)View Source

Purpose

Sends a client-to-server net message when the panel is clicked.

Realm

Client

Parameters

string name The net message name.

function data optional A callback that writes additional payload data into the net message.

Example Usage

  button:NetMessage("liaRequestAction", function()
      net.WriteUInt(1, 8)
  end)

---

Stick(dock, margin, dontInvalidate)View Source

Purpose

Docks the panel with optional uniform margin and parent invalidation.

Realm

Client

Parameters

number dock optional The docking mode such as `FILL` or `TOP`.

number margin optional A uniform dock margin.

boolean dontInvalidate optional Whether to skip invalidating the parent layout.

Example Usage

  panel:Stick(TOP, 4)

---

DivTall(frac, target)View Source

Purpose

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

Realm

Client

Parameters

number frac optional The divisor used for the target height.

Panel target optional The panel whose height is used as the source measurement.

Example Usage

  panel:DivTall(3, parent)

---

DivWide(frac, target)View Source

Purpose

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

Realm

Client

Parameters

number frac optional The divisor used for the target width.

Panel target optional The panel whose width is used as the source measurement.

Example Usage

  panel:DivWide(2, parent)

---

SquareFromHeight()View Source

Purpose

Makes the panel square by matching its width to its current height.

Realm

Client

Example Usage

  panel:SquareFromHeight()

---

SquareFromWidth()View Source

Purpose

Makes the panel square by matching its height to its current width.

Realm

Client

Example Usage

  panel:SquareFromWidth()

---

SetRemove(target)View Source

Purpose

Removes a target panel when this panel is clicked.

Realm

Client

Parameters

Panel target optional The panel to remove, or this panel when omitted.

Example Usage

  closeButton:SetRemove(frame)

---

FadeIn(time, alpha)View Source

Purpose

Fades the panel in from alpha `0` to a target opacity.

Realm

Client

Parameters

number time optional The fade duration in seconds.

number alpha optional The target alpha value.

Example Usage

  panel:FadeIn(0.25, 255)

---

HideVBar()View Source

Purpose

Hides and collapses a scroll panel's vertical scrollbar.

Realm

Client

Example Usage

  scrollPanel:HideVBar()

---

SetTransitionFunc(fn)View Source

Purpose

Sets the default predicate used by transition helpers.

Realm

Client

Parameters

function fn The predicate callback used by `SetupTransition`.

Returns

Panel The current panel for chaining.

Example Usage

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

---

ClearTransitionFunc()View Source

Purpose

Clears the default predicate override used by transition helpers.

Realm

Client

Returns

Panel The current panel for chaining.

Example Usage

  panel:ClearTransitionFunc()

---

SetAppendOverwrite(fn)View Source

Purpose

Overrides which panel method `On` appends to.

Realm

Client

Parameters

string fn The method name that `On` should use until cleared.

Returns

Panel The current panel for chaining.

Example Usage

  panel:SetAppendOverwrite("PaintOver")

---

ClearAppendOverwrite()View Source

Purpose

Clears the temporary method override used by `On`.

Realm

Client

Returns

Panel The current panel for chaining.

Example Usage

  panel:ClearAppendOverwrite()

---

ClearPaint()View Source

Purpose

Removes the panel `Paint` function.

Realm

Client

Example Usage

  panel:ClearPaint()

---

ReadyTextbox()View Source

Purpose

Prepares a textbox for paint-over transitions while editing.

Realm

Client

Example Usage

  textEntry:ReadyTextbox()

---