<cat>Dev.UI</cat> This is a list of all the 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 | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DAlphaBar.png" alt="center"/> | <page>DAlphaBar</page> | Alpha picker (opaque - translucent) | | <image src="https://files.facepunch.com/wiki/files/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 | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DButton.png" alt="center"/> | <page>DButton</page> | A button | | <image src="https://files.facepunch.com/wiki/files/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="https://files.facepunch.com/wiki/files/vgui.list.DCheckBox.png" alt="center"/> | <page>DCheckBox</page> | A checkbox | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DCheckBoxLabel.png" alt="center"/> | <page>DCheckBoxLabel</page> | A checkbox with an accompanying label. | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DCollapsibleCategory.png" alt="center"/> | <page>DCollapsibleCategory</page> | Collapsible Category Panel | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DColorButton.png" alt="center"/> | <page>DColorButton</page> | Colorful buttons. | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DColorCombo.png" alt="center"/> | <page>DColorCombo</page> | `DColorCombo` | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DColorCube.png" alt="center"/> | <page>DColorCube</page> | A cube containing gradients which a player can pick a color from | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DColorMixer.png" alt="center"/> | <page>DColorMixer</page> | A RGBA color mixer | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DColorPalette.png" alt="center"/> | <page>DColorPalette</page> | Color picker | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DColumnSheet.png" alt="center"/> | <page>DColumnSheet</page> | Similar to the DPropertySheet but vertical. | | <image src="https://files.facepunch.com/wiki/files/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` | | <image src="https://files.facepunch.com/wiki/files/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 | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DExpandButton.png" alt="center"/> | <page>DExpandButton</page> | `DExpandButton` | | <image src="https://files.facepunch.com/wiki/files/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 | | <image src="https://files.facepunch.com/wiki/files/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. | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DHorizontalDivider.png" alt="center"/> | <page>DHorizontalDivider</page> | Creates a horizontal divider that can be dragged between objects. | | <image src="https://files.facepunch.com/wiki/files/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` | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DHTMLControls.png" alt="center"/> | <page>DHTMLControls</page> | Controls for <page>DHTML</page> | | <image src="https://files.facepunch.com/wiki/files/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) | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DKillIcon.png" alt="center"/> | <page>DKillIcon</page> | A kill icon | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DLabel.png" alt="center"/> | <page>DLabel</page> | A standard Derma text label | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DLabelEditable.png" alt="center"/> | <page>DLabelEditable</page> | `DLabelEditable` | | <image src="https://files.facepunch.com/wiki/files/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 | | <image src="https://files.facepunch.com/wiki/files/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 | | <image src="https://files.facepunch.com/wiki/files/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` | | | <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 | | <image src="https://files.facepunch.com/wiki/files/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="https://files.facepunch.com/wiki/files/vgui.list.DNumberWang.png" alt="center"/> | <page>DNumberWang</page> | Input with up and down buttons which can only hold a number. | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DNumSlider.png" alt="center"/> | <page>DNumSlider</page> | Numeric slider with text field for manual entering of value. | | <image src="https://files.facepunch.com/wiki/files/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 | | <image src="https://files.facepunch.com/wiki/files/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) | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DProperties.png" alt="center"/> | <page>DProperties</page> | A property grid | | <image src="https://files.facepunch.com/wiki/files/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="https://files.facepunch.com/wiki/files/vgui.list.DRGBPicker.png" alt="center"/> | <page>DRGBPicker</page> | A RGB color picker | | <image src="https://files.facepunch.com/wiki/files/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> | | <image src="https://files.facepunch.com/wiki/files/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. | | <image src="https://files.facepunch.com/wiki/files/vgui.list.DTooltip.png" alt="center"/> | <page>DTooltip</page> | A tooltip. Not to be used on itself, use Panel:SetTooltip instead. | | <image src="https://files.facepunch.com/wiki/files/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. | | <image src="https://files.facepunch.com/wiki/files/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.) | | <image src="https://files.facepunch.com/wiki/files/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` |