PIXEL UI
Elements

Elements

PIXEL UI ships with the following VGUI panels:

PanelBase panelDescriptionSource
PIXEL.ValidatedTextEntryPanelPIXEL text entry with validation message.cl_validated_text_entry.lua (opens in a new tab)
PIXEL.TextEntryPanelPIXEL styled text entry container with integrated label.cl_text_entry.lua (opens in a new tab)
PIXEL.TextButtonPIXEL.ButtonPIXEL button with styled text label.cl_text_button.lua (opens in a new tab)
PIXEL.SliderPIXEL.ButtonPIXEL horizontal slider control.cl_slider.lua (opens in a new tab)
PIXEL.SidebarPanelPIXEL sidebar container panel.cl_sidebar.lua (opens in a new tab)
PIXEL.ScrollPanelDPanelPIXEL scroll panel with custom scrollbar.cl_scrollpanel.lua (opens in a new tab)
PIXEL.PropertySheetPanelPIXEL property sheet panel with tab strip.cl_property_sheet.lua (opens in a new tab)
PIXEL.NavbarPanelPIXEL navbar container panel.cl_navbar.lua (opens in a new tab)
PIXEL.MenuOptionCVarPIXEL.MenuOptionPIXEL menu option bound to a console variable.cl_menu_option.lua (opens in a new tab)
PIXEL.MenuPIXEL.ScrollPanelPIXEL context menu panel.cl_menu.lua (opens in a new tab)
PIXEL.LabelledCheckboxPanelPIXEL checkbox with attached label.cl_labelled_checkbox.lua (opens in a new tab)
PIXEL.LabelPanelPIXEL text label panel.cl_label.lua (opens in a new tab)
PIXEL.ImgurButtonPIXEL.ImageButtonPIXEL image button that loads Imgur assets.cl_imgur_button.lua (opens in a new tab)
PIXEL.FrameEditablePanelPIXEL window frame panel.cl_frame.lua (opens in a new tab)
PIXEL.ComboBoxPIXEL.TextButtonPIXEL combo box (dropdown) control.cl_combo_box.lua (opens in a new tab)
PIXEL.ColorPickerPanelPIXEL color picker panel with hue/value controls.cl_color_picker.lua (opens in a new tab)
PIXEL.CheckboxPIXEL.ImageButtonPIXEL styled checkbox built on ImageButton.cl_check_box.lua (opens in a new tab)
PIXEL.CategoryPanelPIXEL collapsible category container panel.cl_category.lua (opens in a new tab)
PIXEL.ButtonPanelBasic PIXEL button panel with hover/click styling.cl_button.lua (opens in a new tab)
PIXEL.AvatarPanelPIXEL circular avatar panel.cl_avatar.lua (opens in a new tab)

Example

local frame = vgui.Create("PIXEL.Frame")
frame:SetSize(PIXEL.Scale(900), PIXEL.Scale(600))
frame:Center()
frame:MakePopup()
 
local sidebar = vgui.Create("PIXEL.Sidebar", frame)
sidebar:Dock(LEFT)
sidebar:SetWide(PIXEL.Scale(220))
 
local sheet = vgui.Create("PIXEL.PropertySheet", frame)
sheet:Dock(FILL)

Some element files also register helper companion panels (for example PIXEL.SidebarItem, PIXEL.NavbarItem, PIXEL.Tab, and PIXEL.MenuOption) that are used internally by the container elements above.

ConfigurationValidatedTextEntry