<cat>Dev.Ref</cat> This is a list of all the [VGUI](vgui) elements that are shipped with Garry's Mod and its default gamemodes. If you're new to working with panels, you can find some information <page text="on this tutorial page">Derma_Basic_Guide</page>. You can type `derma_controls` in console to get a visual example of `some` of these elements. # Base Panels | Preview | Name | Description | | -------------------------------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | <image src="vgui.list.DPanel.png" alt="center"/> | <page>DPanel</page> | A <page>Panel</page> that has increased functionality provided through lua. Most (but not all) Derma panels derive from this. | | <image src="vgui.list.DFrame.png" alt="center"/> | <page>DFrame</page> | An <page>EditablePanel</page> framing window that can be drag n dropped around on screen, minimized, maximized, and closed. Most often used as the root panel when making ingame menus. | | <image src="vgui.list.DLabel.png" alt="center"/> | <page>DLabel</page> | A robust version of a <page>Label</page> with easier functions for clicking and customizing. | | <image src="vgui.list.DLabelEditable.png" alt="center"/> | <page>DLabelEditable</page> | A derivative of the <page>DLabel</page> that allows editing when double-clicked. | | <image src="vgui.list.DLabelURL.png" alt="center"/> | <page>DLabelURL</page> | A <page>URLLabel</page> that when clicked uses <page>gui.OpenURL</page> to open the provided URL | | <image src="vgui.list.DTextEntry.png" alt="center"/> | <page>DTextEntry</page> | A <page>TextEntry</page> with extended lua functionality. <note>One of this elements parents must be a <page>EditablePanel</page></note> | | <image src="vgui.list.DButton.png" alt="center"/> | <page>DButton</page> | A <page>DLabel</page> with additional click behaviors built into it | | <image src="vgui.list.DExpandButton.png" alt="center"/> | <page>DExpandButton</page> | A small <page>DButton</page> Mainly used by <page>DProperties</page> and <page>DTree_Node</page> to toggle folder expansions | | <image src="vgui.list.DBinder.png" alt="center"/> | <page>DBinder</page> | A <page>DButton</page> That captures the next pressed key after being pressed. | | <image src="vgui.list.DCheckBox.png" alt="center"/> | <page>DCheckBox</page> | A <page>DButton</page> that returns a true/false boolean with `:GetChecked()` | | <image src="vgui.list.DCheckBoxLabel.png" alt="center"/> | <page>DCheckBoxLabel</page> | A <page>DPanel</page> that includes a <page>DCheckBox</page> with an accompanying <page>DLabel</page> | | | <page>ImageCheckBox</page> | A <page>Button</page> that functions similar to <page>DCheckBox</page> except uses the <page>Material</page> panel to indicate state and cannot have a label | | <image src="vgui.list.DComboBox.png" alt="center"/> | <page>DComboBox</page> | A field with multiple selectable values | | | <page>DImage</page> | A <page>DPanel</page> that makes working with the <page>Material</page> panel easier. | | | <page>DImageButton</page> | A <page>DButton</page> that uses a <page>DImage</page> for the button instead of the normal look. | | <image src="dmodelpanel_color.jpg" alt="center" /> | <page>DModelPanel</page> | A derivative of <page>DButton</page> that projects the provded 3D model on the 2D plane of the VGUI element. By default this model will slowly rotate but this can be disable see example on wiki page. | | | <page>DAdjustableModelPanel</page> | A derivative of <page>DModelPanel</page> That allows you to adjust the model using your mouse and keyboard | | | <page>DBubbleContainer</page> | A speech bubble panel made up of a rounded box and point coming from the bottom. | | <image src="vgui.list.DCategoryList.png" alt="center"/> | <page>DCategoryList</page> | A parent element which should contain a child <page>DCollapsibleCategory</page>. | | <image src="vgui.list.DCollapsibleCategory.png" alt="center"/> | <page>DCollapsibleCategory</page> | A Specialized <page>Panel</page> that has drop-down functionality to display/hide child elements | | | <page>DForm</page> | A convenience version of <page>DCollapsibleCategory</page> that has easy functions for adding other input focused panels. | | | <page>DSlider</page> | A multidirectional slider than has the ability to be locked to X or y axis. | | <image src="vgui.list.DNumSlider.png" alt="center"/> | <page>DNumSlider</page> | A <page>Panel</page> that allows the user to click, hold, and drag to select a value between the provided numerical range | | <image src="vgui.list.DNumberScratch.png" alt="center"/> | <page>DNumberScratch</page> | A <page>DImageButton</page> that acts similarly to the <page>DNumSlider</page> but with the additional ability to zoom in for extra precision. | | <image src="vgui.list.DNumberWang.png" alt="center"/> | <page>DNumberWang</page> | A <page>DTextEntry</page> that only accepts numbers and has additional buttons to increment/decrement the value. | | <image src="vgui.list.DPropertySheet.png" alt="center"/> | <page>DPropertySheet</page> | a specialized <page>Panel</page> that allows tab oriented control toggling which child elements are visible based on selected tab. | | | <page>DTab</page> | A tab for internal use on the <page>DPropertySheet</page>. Derived from the <page>DButton</page> | | <image src="vgui.list.DColumnSheet.png" alt="center"/> | <page>DColumnSheet</page> | Similar to a <page>DPropertySheet</page> except its tabs are on the left | | <image src="vgui.list.DScrollPanel.png" alt="center"/> | <page>DScrollPanel</page> | A <page>DPanel</page> that functionality based around scrolling vertically through child elements. | | | <page>DVScrollBar</page> | A Generic <page>Panel</page> that functions as the vertical scrollbar for <page>DScrollPanel</page> | | | <page>DScrollBarGrip</page> | An Internal component of <page>DVScrollBar</page> that acts as the "grip" allowing for quick scrolling. | | <image src="vgui.list.DIconBrowser.png" alt="center"/> | <page>DIconBrowser</page> | A <page>DScrollPanel</page> that displays all the <page>Silkicons</page> that come with the game. | | <image src="vgui.list.DMenu.png" alt="center"/> | <page>DMenu</page> | A <page>DScrollPanel</page> that has submenu, icon, and <page>cvars</page> support. This is commonly (but not restricted to being) a child element of the <page>DMenuBar</page> | | | <page>DMenuBar</page> | A <page>DPanel</page> that stretches across the top of the parent panel. Also has additional functions for handling <page>DMenu</page>s | | | <page>DMenuOption</page> | An Internal <page>DButton</page> that represents an option added to a <page>DMenu</page> | | | <page>DMenuOptionCVar</page> | An Internal derivative of <page>DMenuOption</page> that has support for <page>cvars</page> | | | <page>MatSelect</page> | A Derivative of <page>ContextBase</page> used by the Material and Lamp tools. | | <image src="vgui.list.SpawnIcon.png" alt="center"/> | <page>SpawnIcon</page> | A <page>DButton</page> that displays a image for the given model path. Internally Uses <page>ModelImage</page>. | | <image src="vgui.list.DProgress.png" alt="center"/> | <page>DProgress</page> | A <page>Panel</page> that displays a visual representation of a fraction between 0 - 1 using its `:SetFraction()` method. | | <image src="vgui.list.DFileBrowser.png" alt="center"/> | <page>DFileBrowser</page> | A specialized <page>DPanel</page> that acts as an in-game file browser | | <image src="vgui.list.DKillIcon.png" alt="center"/> | <page>DKillIcon</page> | A <page>Panel</page> that uses the <page>killicon</page> library to persistently draw kill icons | | | <page>DHTML</page> | A super specialized <page>Awesomium</page> panel. For more info check the dedicated wiki page. | | <image src="vgui.list.DHTMLControls.png" alt="center"/> | <page>DHTMLControls</page> | A <page>Panel</page> containing useful buttons for easier navigation around a <page>DHTML</page> panel | ## Color Panels | Image | Name | Description | | --- | --- | --- | | <image src="vgui.list.DColorButton.png" alt="center"/> | <page>DColorButton</page> | A <page>DLabel</page> that allows easy setting/getting of its color | | <image src="vgui.list.DColorPalette.png" alt="center"/> | <page>DColorPalette</page> | A <page>DIconLayout</page> that presents multiple <page>DColorButton</page>s | | <image src="vgui.list.DColorCombo.png" alt="center"/> | <page>DColorCombo</page> | A Combination of panels involved with selecting a color value (Does **not** include an alpha selector) | | <image src="vgui.list.DColorCube.png" alt="center"/> | <page>DColorCube</page> | A Specialized <page>DSlider</page> that allows a gradient selection of a given color | | <image src="vgui.list.DColorMixer.png" alt="center"/> | <page>DColorMixer</page> | Similar to <page>DColorCombo</page> but includes additional (but not limited to) panels like a <page>DAlphaBar</page> and <page>DColorPalette</page> | | <image src="vgui.list.DRGBPicker.png" alt="center"/> | <page>DRGBPicker</page> | A specialized <page>DPanel</page> that creates a vertical rainbow bar allowing the user to select a color. | | <image src="vgui.list.DAlphaBar.png" alt="center"/> | <page>DAlphaBar</page> | A Specialized <page>DPanel</page> that allows easy picking of the alpha level of the specified color | ## Utility Panels | Image | Name | Description | | --- | --- | --- | | | <page>DPanelOverlay</page> | A utility <page>DPanel</page> that adds curved corners | | | <page>DDragBase</page> | A utility <page>DPanel</page> that enables drag and drop functions for derived elements like <page>DIconLayout</page>, <page>DListLayout</page>, and <page>DTileLayout</page> | | | <page>DSizeToContents</page> | A utility <page>Panel</page> that uses <page>PANEL:SizeToChildren</page> in its <page>PANEL:PerformLayout</page> hook. | | | <page>DShape</page> | A <page>DPanel</page> that is drawn like the provided shape. This is currently only setup to draw rectangles, bug? | | | <page>Material</page> | A <page>Button</page> that renders a **VMT** material. | | | <page>DSprite</page> | A <page>DPanel</page> that draws a sprite using the provide <page>IMaterial</page> and <page>Color</page> This panel can also do rotations! | | | <page>DTileLayout</page> | Nearly identical to <page>DIconLayout</page> with the biggest difference being panels provided to this element do **NOT** need to be the same height like they do in <page>DIconLayout</page> | | | <page>DNotify</page> | A simply utility panel that is used to fade child panels in and out once like a notification. | | | <page>DIconLayout</page> | A utility panel that creates a list of panels laid out in a grid, Replaces <page>DPanelList</page>. | | | <page>DListLayout</page> | A vertical list of panels that can allow child panels to be rearranged with drag in drop | | | <page>DGrid</page> | A simple utility <page>Panel</page> that automatically applies grid spacing to all its children elements | | <image src="vgui.list.DHorizontalDivider.png" alt="center"/> | <page>DHorizontalDivider</page> | Creates an invisible horizontal divider that can be dragged between objects. | | <image src="vgui.list.DVerticalDivider.png" alt="center"/> | <page>DVerticalDivider</page> | A <page>DPanel</page> that functions similarly to the <page>DHorizontalDivider</page> except vertically | | <image src="vgui.list.DHorizontalScroller.png" alt="center"/> | <page>DHorizontalScroller</page> | A utility <page>Panel</page> that enables easy horizontal scrolling of its children panels using the left and right buttons. | | <image src="vgui.list.DTooltip.png" alt="center"/> | <page>DTooltip</page> | An Internal <page>DLabel</page> that is used to create the tooltip when hovering over another panel. You should use <page>Panel:SetTooltip</page> instead | | <image src="vgui.list.DDrawer.png" alt="center"/> | <page>DDrawer</page> | A <page>Panel</page> that can be moved in and out like a drawer, See wiki page for example | ⤶ ⤶ ## DProperties | | <page>ContextBase</page> | A Derived <page>Panel</page> used as a parent for all context based menu panels |⤶ ⤶ ## DProperties | Image | Name | Description | | --- | --- | --- | | <image src="vgui.list.DProperties.png" alt="center"/> | <page>DProperties</page> | a specialized <page>Panel</page> that creates a interactive grid allowing the user to customize the provided properties. | | | <page>DEntityProperties</page> | An internal <page>DProperties</page> Panel used by the <page>Editable Entities</page> system | | | <page>DProperty_Generic</page> | A Derivative of <page>Panel</page> that provides a base for the other <page>DProperties</page> panels | | | <page>DProperty_Boolean</page> | An Internal Derivative of <page>DProperty_Generic</page> that only accepts <page>boolean</page>s | | | <page>DProperty_Float</page> | An Internal Derivative of <page>DProperty_Generic</page> that only accepts float types | | | <page>DProperty_Int</page> | An Internal Derivative of <page>DProperty_Float</page> that only accepts integer values | | | <page>DProperty_Combo</page> | An Internal Derivative of <page>DProperty_Generic</page> that only accepts a <page>DComboBox</page> | | | <page>DProperty_VectorColor</page> | An Internal Derivative of <page>DProperty_Generic</page> that opens a <page>DColorCombo</page> panel when clicked | ## DTree | Image | Name | Description | | --- | --- | --- | | <image src="vgui.list.DTree.png" alt="center"/> | <page>DTree</page> | A <page>DScrollPanel</page> that has been extended to function as a tree view using <page>DTree_Node</page>s | | | <page>DTree_Node</page> | An Internal Component of <page>DTree</page> that signifies every item on the tree. | | | <page>DTree_Node_Button</page> | An Internal Component of <page>DTree_Node</page> used to toggle drop down functionality of sub-trees. | ## DListView | Image | Name | Description | | --- | --- | --- | | <image src="vgui.list.DListView.png" alt="center"/> | <page>DListView</page> | A <page>DPanel</page> that can display multiple rows and columns of information. Also has click functionality. | | | <page>DListView_Column</page> | Internal element used to create the headers for <page>DListView</page> | | | <page>DListView_ColumnPlain</page> | Derivative of <page>DListView_Column</page> but with less features. | | | <page>DListView_DraggerBar</page> | An Internal <page>DButton</page> used in <page>DListView</page> | | | <page>DListViewHeaderLabel</page> | An Internal <page>DLabel</page> used in <page>DListView</page> | | | <page>DListViewLabel</page> | An Internal <page>DLabel</page> used in <page>DListView</page> | | | <page>DListViewLine</page> | An Internal <page>Panel</page> used in <page>DListView</page> | # Engine-based panels Name | Description | -----|-------------| | <page>AchievementIcon</page> | Shows achievement icon. | | <page>Awesomium</page> | Awesomium! Parent of <page>HTML</page> and <page>DHTML</page> | | <page>AvatarImage</page> | A panel used to view a players avatar | | <page>CheckButton</page> | An engine checkbox | | <page>EditablePanel</page> | Base panel used by DFrame, this panel is needed so that elements such as the TextEntry can obtain focus | | <page>Frame</page> | A window that in which you can place just about every other component and even another frame | | <page>HTML</page> | The basic HTML view, can be used instead of <page>DHTML</page> for operations that do not require user input or complex interaction, such as retrieving image data | | <page>Label</page> | Basic text label | | <page>ModelImage</page> | Panel used to display models, used by <page>SpawnIcon</page> | | <page>Panel</page> | Base Panel for everything | | <page>RadioButton</page> | Currently broken | | <page>RichText</page> | Highly functional rich text element which is used in the default chatbox and console | | <page>TextEntry</page> | Basic text entry field that has not as much added functionality as DTextEntry | | <page>TGAImage</page> | Panel capable of showing a TGA image | # Sandbox-based panels Name | Description | -----|-------------| | <page>ContentIcon</page> | The spawn icon used for <page text="SWEPs">Structures/SWEP</page> and other <page text="SENTs">Scripted_Entities</page>. | | <page>ControlPresets</page> | The preset controller used in tool menus. | | <page>CtrlListBox</page> | A simple drop-down list for use mainly in tool menus. | | <page>PropSelect</page> | `PropSelect` | | <page>fingerposer</page> | The fingerposer (internal) | | <page>FingerVar</page> | `Part of fingerposer` (internal) | | <page>ContextBase</page> | `ContextBase` |⤶ ⤶ # Deprecated panels ⤶ ⤶ # Deprecated panels Name | Description | -----|-------------| | <page>Button</page> | Basic button, now replaced by <page>DButton</page> | | <page>Slider</page> | A simple, straight-forward and easy-to-use slider | | <page>SlideBar</page> | A slidebar | | <page>PanelList</page> | `PanelList` | | <page>DPanelSelect</page> | A list of panels, of which only one can be selected | | <page>DPanelList</page> | `Deprecated in GM13 in favour of DIconLayout and DLineLayout.` | | <page>DNumPad</page> | `DNumPad, not used anymore in GMod 13` | | <page>DModelSelectMulti</page> | `DModelSelectMulti` | | <page>DModelSelect</page> | A panel of selectable SpawnIcons. | | <page>DListBox</page> | `DListBox` | | <page>DListBoxItem</page> | `DListBoxItem` |