Inheritance #

TabContainer
Table of contents

TabContainer #

is_instantiable, Node, core, not_builtin_classes

A container that creates a tab for each child control, displaying only the active tab's control.

Arranges child controls into a tabbed view, creating a tab for each one. The active tab's corresponding control is made visible, while all other child controls are hidden. Ignores non-control children.

Note: The drawing of the clickable tabs is handled by this node; TabBar is not needed.

Members #

var all_tabs_in_front: bool = false#

If true, all tabs are drawn in front of the panel. If false, inactive tabs are drawn behind the panel.

var clip_tabs: bool = true#

If true, tabs overflowing this node's width will be hidden, displaying two navigation buttons instead. Otherwise, this node's minimum size is updated so that all tabs are visible.

var current_tab: int = -1#

The current tab index. When set, this index's Control node's visible property is set to true and all others are set to false.

A value of -1 means that no tab is selected.

var deselect_enabled: bool = false#

If true, all tabs can be deselected so that no tab is selected. Click on the current_tab to deselect it.

Only the tab header will be shown if no tabs are selected.

var drag_to_rearrange_enabled: bool = false#

If true, tabs can be rearranged with mouse drag.

var tab_alignment = ALIGNMENT_LEFT#

Sets the position at which tabs will be placed. See TabBar.AlignmentMode for details.

var tab_focus_mode = FOCUS_ALL#

The focus access mode for the internal TabBar node.

var tabs_position = POSITION_TOP#

Sets the position of the tab bar. See TabPosition for details.

var tabs_rearrange_group: int = -1#

TabContainers with the same rearrange group ID will allow dragging the tabs between them. Enable drag with drag_to_rearrange_enabled.

Setting this to -1 will disable rearranging between TabContainers.

var tabs_visible: bool = true#

If true, tabs are visible. If false, tabs' content and titles are hidden.

var use_hidden_tabs_for_min_size: bool = false#

If true, child Control nodes that are hidden have their minimum size take into account in the total, instead of only the currently visible one.

Methods #

const func get_current_tab_control() -> Control#

Returns the child Control node located at the active tab index.

const func get_popup() -> Popup#

Returns the Popup node instance if one has been set already with set_popup.

Warning: This is a required internal node, removing and freeing it may cause a crash. If you wish to hide it or any of its children, use their Window.visible property.

const func get_previous_tab() -> int#

Returns the previously active tab index.

const func get_tab_bar() -> TabBar#

Returns the TabBar contained in this container.

Warning: This is a required internal node, removing and freeing it or editing its tabs may cause a crash. If you wish to edit the tabs, use the methods provided in TabContainer.

const func get_tab_button_icon(tab_idx: int) -> Texture2D#

Returns the button icon from the tab at index tab_idx.

const func get_tab_control(tab_idx: int) -> Control#

Returns the Control node from the tab at index tab_idx.

const func get_tab_count() -> int#

Returns the number of tabs.

const func get_tab_icon(tab_idx: int) -> Texture2D#

Returns the Texture2D for the tab at index tab_idx or null if the tab has no Texture2D.

const func get_tab_icon_max_width(tab_idx: int) -> int#

Returns the maximum allowed width of the icon for the tab at index tab_idx.

const func get_tab_idx_at_point(point: Vector2) -> int#

Returns the index of the tab at local coordinates point. Returns -1 if the point is outside the control boundaries or if there's no tab at the queried position.

const func get_tab_idx_from_control(control: Control) -> int#

Returns the index of the tab tied to the given control. The control must be a child of the TabContainer.

const func get_tab_metadata(tab_idx: int) -> Variant#

Returns the metadata value set to the tab at index tab_idx using set_tab_metadata. If no metadata was previously set, returns null by default.

const func get_tab_title(tab_idx: int) -> String#

Returns the title of the tab at index tab_idx. Tab titles default to the name of the indexed child node, but this can be overridden with set_tab_title.

const func get_tab_tooltip(tab_idx: int) -> String#

Returns the tooltip text of the tab at index tab_idx.

const func is_tab_disabled(tab_idx: int) -> bool#

Returns true if the tab at index tab_idx is disabled.

const func is_tab_hidden(tab_idx: int) -> bool#

Returns true if the tab at index tab_idx is hidden.

func select_next_available() -> bool#

Selects the first available tab with greater index than the currently selected. Returns true if tab selection changed.

func select_previous_available() -> bool#

Selects the first available tab with lower index than the currently selected. Returns true if tab selection changed.

func set_popup(popup: Node) -> void#

If set on a Popup node instance, a popup menu icon appears in the top-right corner of the TabContainer (setting it to null will make it go away). Clicking it will expand the Popup node.

func set_tab_button_icon(icon: Texture2D) -> void#

Sets the button icon from the tab at index tab_idx.

func set_tab_disabled(disabled: bool) -> void#

If disabled is true, disables the tab at index tab_idx, making it non-interactable.

func set_tab_hidden(hidden: bool) -> void#

If hidden is true, hides the tab at index tab_idx, making it disappear from the tab area.

func set_tab_icon(icon: Texture2D) -> void#

Sets an icon for the tab at index tab_idx.

func set_tab_icon_max_width(width: int) -> void#

Sets the maximum allowed width of the icon for the tab at index tab_idx. This limit is applied on top of the default size of the icon and on top of icon_max_width. The height is adjusted according to the icon's ratio.

func set_tab_metadata(metadata: Variant) -> void#

Sets the metadata value for the tab at index tab_idx, which can be retrieved later using get_tab_metadata.

func set_tab_title(title: String) -> void#

Sets a custom title for the tab at index tab_idx (tab titles default to the name of the indexed child node). Set it back to the child's name to make the tab default to it again.

func set_tab_tooltip(tooltip: String) -> void#

Sets a custom tooltip text for tab at index tab_idx.

Note: By default, if the tooltip is empty and the tab text is truncated (not all characters fit into the tab), the title will be displayed as a tooltip. To hide the tooltip, assign " " as the tooltip text.

Annotations #

Constants #

const POSITION_TOP = 0 enum TabPosition#

Places the tab bar at the top.

const POSITION_BOTTOM = 1 enum TabPosition#

Places the tab bar at the bottom. The tab bar's StyleBox will be flipped vertically.

const POSITION_MAX = 2 enum TabPosition#

Represents the size of the TabPosition enum.

Constructors #

Enums #

TabPosition#

enum TabPosition { POSITION_TOP = 0, POSITION_BOTTOM = 1, POSITION_MAX = 2, }

Operators #

Signals #

signal active_tab_rearranged(idx_to: int)#

Emitted when the active tab is rearranged via mouse drag. See drag_to_rearrange_enabled.

signal pre_popup_pressed()#

Emitted when the TabContainer's Popup button is clicked. See set_popup for details.

signal tab_button_pressed(tab: int)#

Emitted when the user clicks on the button icon on this tab.

signal tab_changed(tab: int)#

Emitted when switching to another tab.

signal tab_clicked(tab: int)#

Emitted when a tab is clicked, even if it is the current tab.

signal tab_hovered(tab: int)#

Emitted when a tab is hovered by the mouse.

signal tab_selected(tab: int)#

Emitted when a tab is selected via click, directional input, or script, even if it is the current tab.

Theme Items #

self["theme_override_colors/drop_mark_color"] = Color(1, 1, 1, 1) as Color#

Modulation color for the drop_mark icon.

self["theme_override_colors/font_disabled_color"] = Color(0.875, 0.875, 0.875, 0.5) as Color#

Font color of disabled tabs.

self["theme_override_colors/font_hovered_color"] = Color(0.95, 0.95, 0.95, 1) as Color#

Font color of the currently hovered tab.

self["theme_override_colors/font_outline_color"] = Color(0, 0, 0, 1) as Color#

The tint of text outline of the tab name.

self["theme_override_colors/font_selected_color"] = Color(0.95, 0.95, 0.95, 1) as Color#

Font color of the currently selected tab.

self["theme_override_colors/font_unselected_color"] = Color(0.7, 0.7, 0.7, 1) as Color#

Font color of the other, unselected tabs.

self["theme_override_constants/icon_max_width"] = 0 as int#

The maximum allowed width of the tab's icon. This limit is applied on top of the default size of the icon, but before the value set with TabBar.set_tab_icon_max_width. The height is adjusted according to the icon's ratio.

self["theme_override_constants/icon_separation"] = 4 as int#

Space between tab's name and its icon.

self["theme_override_constants/outline_size"] = 0 as int#

The size of the tab text outline.

Note: If using a font with FontFile.multichannel_signed_distance_field enabled, its FontFile.msdf_pixel_range must be set to at least twice the value of outline_size for outline rendering to look correct. Otherwise, the outline may appear to be cut off earlier than intended.

self["theme_override_constants/side_margin"] = 8 as int#

The space at the left or right edges of the tab bar, accordingly with the current tab_alignment.

The margin is ignored with TabBar.ALIGNMENT_RIGHT if the tabs are clipped (see clip_tabs) or a popup has been set (see set_popup). The margin is always ignored with TabBar.ALIGNMENT_CENTER.

self["theme_override_fonts/font"] = font as Font#

The font used to draw tab names.

self["theme_override_font_sizes/font_size"] = font_size as int#

Font size of the tab names.

self["theme_override_icons/decrement"] = icon as Texture2D#

Icon for the left arrow button that appears when there are too many tabs to fit in the container width. When the button is disabled (i.e. the first tab is visible), it appears semi-transparent.

self["theme_override_icons/decrement_highlight"] = icon as Texture2D#

Icon for the left arrow button that appears when there are too many tabs to fit in the container width. Used when the button is being hovered with the cursor.

self["theme_override_icons/drop_mark"] = icon as Texture2D#

Icon shown to indicate where a dragged tab is gonna be dropped (see drag_to_rearrange_enabled).

self["theme_override_icons/increment"] = icon as Texture2D#

Icon for the right arrow button that appears when there are too many tabs to fit in the container width. When the button is disabled (i.e. the last tab is visible) it appears semi-transparent.

self["theme_override_icons/increment_highlight"] = icon as Texture2D#

Icon for the right arrow button that appears when there are too many tabs to fit in the container width. Used when the button is being hovered with the cursor.

The icon for the menu button (see set_popup).

The icon for the menu button (see set_popup) when it's being hovered with the cursor.

self["theme_override_styles/panel"] = style as StyleBox#

The style for the background fill.

self["theme_override_styles/tab_disabled"] = style as StyleBox#

The style of disabled tabs.

self["theme_override_styles/tab_focus"] = style as StyleBox#

StyleBox used when the TabBar is focused. The tab_focus StyleBox is displayed over the base StyleBox of the selected tab, so a partially transparent StyleBox should be used to ensure the base StyleBox remains visible. A StyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a StyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.

self["theme_override_styles/tab_hovered"] = style as StyleBox#

The style of the currently hovered tab.

Note: This style will be drawn with the same width as tab_unselected at minimum.

self["theme_override_styles/tab_selected"] = style as StyleBox#

The style of the currently selected tab.

self["theme_override_styles/tab_unselected"] = style as StyleBox#

The style of the other, unselected tabs.

self["theme_override_styles/tabbar_background"] = style as StyleBox#

The style for the background fill of the TabBar area.

Tutorials #