Revision Difference
VGUI_Element_List#561087
<cat>Dev.UI</cat>⤶
<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.
Preview | Name | Description |
--------|-------|-------------|
| | <page>DAdjustableModelPanel</page> | A panel containing a model which angles are modifiable by using the keyboard and mouse |
| <image src="vgui.list.DAlphaBar.png" alt="center"/> | <page>DAlphaBar</page> | Alpha picker (opaque - translucent) |
| <image src="vgui.list.DBinder.png" alt="center"/> | <page>DBinder</page> | Input which can bind a command to a key. Used for binding in and outputs of STOOLs |
| | <page>DBubbleContainer</page> | A speech bubble panel made up of a rounded box and point coming from the bottom. |
| <image src="vgui.list.DButton.png" alt="center"/> | <page>DButton</page> | A button |
| <image src="vgui.list.DCategoryList.png" alt="center"/> | <page>DCategoryList</page> | A categorylist is an element which should contain a child panel. The player can press the blue bar on the categorylist for the childpanel to get hidden. |
| <image src="vgui.list.DCheckBox.png" alt="center"/> | <page>DCheckBox</page> | A checkbox |
| <image src="vgui.list.DCheckBoxLabel.png" alt="center"/> | <page>DCheckBoxLabel</page> | A checkbox with an accompanying label. |
| <image src="vgui.list.DCollapsibleCategory.png" alt="center"/> | <page>DCollapsibleCategory</page> | Collapsible Category Panel |
| <image src="vgui.list.DColorButton.png" alt="center"/> | <page>DColorButton</page> | Colorful buttons. |
| <image src="vgui.list.DColorCombo.png" alt="center"/> | <page>DColorCombo</page> | `DColorCombo` |
| <image src="vgui.list.DColorCube.png" alt="center"/> | <page>DColorCube</page> | A cube containing gradients which a player can pick a color from |
| <image src="vgui.list.DColorMixer.png" alt="center"/> | <page>DColorMixer</page> | A RGBA color mixer |
| <image src="vgui.list.DColorPalette.png" alt="center"/> | <page>DColorPalette</page> | Color picker |
| <image src="vgui.list.DColumnSheet.png" alt="center"/> | <page>DColumnSheet</page> | Similar to the DPropertySheet but vertical. |
| <image src="vgui.list.DComboBox.png" alt="center"/> | <page>DComboBox</page> | A field with multiple selectable values |
| | <page>DDragBase</page> | `DDragBase` |
| <image src="vgui.list.DDrawer.png" alt="center"/> | <page>DDrawer</page> | `DDrawer` |
| | <page>DEntityProperties</page> | `DEntityProperties` |
| <image src="vgui.list.DExpandButton.png" alt="center"/> | <page>DExpandButton</page> | `DExpandButton` |
| <image src="vgui.list.DFileBrowser.png" alt="center"/> | <page>DFileBrowser</page> | A file browser |
| | <page>DForm</page> | An easy form with functions to quickly add form elements |
| <image src="vgui.list.DFrame.png" alt="center"/> | <page>DFrame</page> | A simple window |
| | <page>DGrid</page> | A really simple grid layout panel |
| <image src="vgui.list.DHorizontalDivider.png" alt="center"/> | <page>DHorizontalDivider</page> | Creates a horizontal divider that can be dragged between objects. |
| <image src="vgui.list.DHorizontalScroller.png" alt="center"/> | <page>DHorizontalScroller</page> | Creates a horizontal scrolling list of panels. |
| | <page>DHTML</page> | VGUI HTML Panel using Awesomium. Capable of running Lua input from the webpage |
| <image src="vgui.list.DHTMLControls.png" alt="center"/> | <page>DHTMLControls</page> | Controls for <page>DHTML</page> |
| <image src="vgui.list.DIconBrowser.png" alt="center"/> | <page>DIconBrowser</page> | `DIconBrowser` |
| | <page>DIconLayout</page> | Used to make a list of panels. Replaces <page>DPanelList</page>. |
| | <page>DImage</page> | A simple image |
| | <page>DImageButton</page> | A button which uses an image instead of text |
| <image src="vgui.list.DKillIcon.png" alt="center"/> | <page>DKillIcon</page> | A kill icon |
| <image src="vgui.list.DLabel.png" alt="center"/> | <page>DLabel</page> | A standard Derma text label |
| <image src="vgui.list.DLabelEditable.png" alt="center"/> | <page>DLabelEditable</page> | `DLabelEditable` |
| <image src="vgui.list.DLabelURL.png" alt="center"/> | <page>DLabelURL</page> | A DLabel which is underlined. (Note: does not have a DoClick function) |
| | <page>DListLayout</page> | `DListLayout` |
| <image src="vgui.list.DListView.png" alt="center"/> | <page>DListView</page> | Columned list view |
| | <page>DListView_Column</page> | `DListView_Column` |
| | <page>DListView_ColumnPlain</page> | `DListView_ColumnPlain` |
| | <page>DListView_DraggerBar</page> | `DListView_DraggerBar` |
| | <page>DListViewHeaderLabel</page> | `DListViewHeaderLabel` |
| | <page>DListViewLabel</page> | `DListViewLabel` |
| | <page>DListViewLine</page> | `DListViewLine (alias: DListView_Line)` |
| <image src="vgui.list.DMenu.png" alt="center"/> | <page>DMenu</page> | A menu |
| | <page>DMenuBar</page> | `DMenuBar` |
| | <page>DMenuOption</page> | DMenu option line |
| | <page>DMenuOptionCVar</page> | `DMenuOptionCVar` |
| <image src="dmodelpanel_color.jpg" alt="center" /> | <page>DModelPanel</page> | A panel containing a model (or ragdoll) which rotates around. |
| | <page>DNotify</page> | Text that pulses. |
| <image src="vgui.list.DNumberScratch.png" alt="center"/> | <page>DNumberScratch</page> | Input similar to number slider but with the ability to scale for more precision. |
| <image src="vgui.list.DNumberWang.png" alt="center"/> | <page>DNumberWang</page> | Input with up and down buttons which can only hold a number. |
| <image src="vgui.list.DNumSlider.png" alt="center"/> | <page>DNumSlider</page> | Numeric slider with text field for manual entering of value. |
| <image src="vgui.list.DPanel.png" alt="center"/> | <page>DPanel</page> | Derma panel used for parenting of various VGUI elements |
| | <page>DPanelOverlay</page> | `DPanelOverlay` |
| <image src="vgui.list.DProgress.png" alt="center"/> | <page>DProgress</page> | Derma progressbar |
| | <page>DProperty_Boolean</page> | `DProperty_Boolean` |
| | <page>DProperty_Float</page> | `DProperty_Float` |
| | <page>DProperty_Generic</page> | `DProperty_Generic` |
| | <page>DProperty_Combo</page> | `DProperty_Combo` |
| | <page>DProperty_Int</page> | `DProperty_Int` |
| | <page>DProperty_VectorColor</page> | `DProperty_VectorColor` |
| <image src="vgui.list.DProperties.png" alt="center"/> | <page>DProperties</page> | A property grid |
| <image src="vgui.list.DPropertySheet.png" alt="center"/> | <page>DPropertySheet</page> | A panel consisiting of multiple tabs (which optionally have icons) that hold a variety of elements. |
| <image src="vgui.list.DRGBPicker.png" alt="center"/> | <page>DRGBPicker</page> | A RGB color picker |
| <image src="vgui.list.DScrollPanel.png" alt="center"/> | <page>DScrollPanel</page> | `DScrollPanel` (Dock layout panels to this for a scrollbar) |
| | <page>DScrollBarGrip</page> | The "grip" part of a scrollbar. |
| | <page>DShape</page> | A shape. |
| | <page>DSizeToContents</page> | `DSizeToContents` |
| | <page>DSlider</page> | A multidirectional slider (capable of sliding across X and Y axis) |
| | <page>DSprite</page> | A sprite |
| | <page>DTab</page> | A tab for internal use on the <page>DPropertySheet</page>. |
| <image src="vgui.list.DTextEntry.png" alt="center"/> | <page>DTextEntry</page> | An advanced <page>TextEntry</page> |
| | <page>DTileLayout</page> | `DTileLayout, probably used in the spawn` |
| <image src="vgui.list.DTooltip.png" alt="center"/> | <page>DTooltip</page> | A tooltip. Not to be used on itself, use Panel:SetTooltip instead. |
| <image src="vgui.list.DTree.png" alt="center"/> | <page>DTree</page> | Tree view. |
| | <page>DTree_Node</page> | Node of a <page>DTree</page> (internal) |
| | <page>DTree_Node_Button</page> | The expand button on a <page>DTree_Node</page> (internal) |
| <image src="vgui.list.DVerticalDivider.png" alt="center"/> | <page>DVerticalDivider</page> | Creates a vertical divider that can be dragged between objects. |
| | <page>DVScrollBar</page> | Vertical scrollbar |
| | <page>ImageCheckBox</page> | Checkbox which uses material to indicate if it's on |
| | <page>Material</page> | Used for drawing a certain material, no user input |
| | <page>MatSelect</page> | Material selection element |
| <image src="vgui.list.SpawnIcon.png" alt="center"/> | <page>SpawnIcon</page> | Creates a spawnicon including the right-click menu (size, redraw etc.) |
## 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
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` |