Skip to content

Add support for vertical TabBar and side tab placement on TabContainer #116485

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Quatumus wants to merge 1 commit into
base: master
Choose a base branch
from
+1,925 −474
Open

Add support for vertical TabBar and side tab placement on TabContainer #116485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 33 additions & 2 deletions doc/classes/TabBar.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8" ?>
<class name="TabBar" inherits="Control" api_type="core" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../class.xsd">
<brief_description>
A control that provides a horizontal bar with tabs.
A control that provides a horizontal or vertical bar with tabs.
</brief_description>
<description>
A control that provides a horizontal bar with tabs. Similar to [TabContainer] but is only in charge of drawing tabs, not interacting with children.
A control that provides a horizontal or vertical bar with tabs. Similar to [TabContainer] but is only in charge of drawing tabs, not interacting with children.
</description>
<tutorials>
</tutorials>
Expand Down Expand Up @@ -97,6 +97,12 @@
Returns tab [Rect2] with local position and size.
</description>
</method>
<method name="get_tab_style_v_flip" qualifiers="const">
<return type="bool" />
<description>
Returns [code]true[/code] if the tab style is flipped vertically. See [method set_tab_style_v_flip].
</description>
</method>
<method name="get_tab_text_direction" qualifiers="const">
<return type="int" enum="Control.TextDirection" />
<param index="0" name="tab_idx" type="int" />
Expand Down Expand Up @@ -215,6 +221,13 @@
Sets the metadata value for the tab at index [param tab_idx], which can be retrieved later using [method get_tab_metadata].
</description>
</method>
<method name="set_tab_style_v_flip">
<return type="void" />
<param index="0" name="tab_style_v_flip" type="bool" />
<description>
If [code]true[/code], the tab style will be flipped vertically. This is used when tabs are positioned at the bottom of the container to ensure the tab style is oriented correctly.
</description>
</method>
<method name="set_tab_text_direction">
<return type="void" />
<param index="0" name="tab_idx" type="int" />
Expand Down Expand Up @@ -302,6 +315,9 @@
[TabBar]s with the same rearrange group ID will allow dragging the tabs between them. Enable drag with [member drag_to_rearrange_enabled].
Setting this to [code]-1[/code] will disable rearranging between [TabBar]s.
</member>
<member name="vertical" type="bool" setter="set_vertical" getter="is_vertical" default="false">
If [code]true[/code], tabs are arranged vertically (top to bottom) instead of horizontally (left to right).
</member>
</members>
<signals>
<signal name="active_tab_rearranged">
Expand Down Expand Up @@ -450,6 +466,12 @@
<theme_item name="decrement_highlight" data_type="icon" type="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.
</theme_item>
<theme_item name="decrement_vertical" data_type="icon" type="Texture2D">
Icon for the up arrow button that appears when there are too many tabs to fit in the container height (vertical tabs). When the button is disabled (i.e. the first tab is visible), it appears semi-transparent.
</theme_item>
<theme_item name="decrement_vertical_highlight" data_type="icon" type="Texture2D">
Icon for the up arrow button that appears when there are too many tabs to fit in the container height (vertical tabs). Used when the button is being hovered with the cursor.
</theme_item>
<theme_item name="drop_mark" data_type="icon" type="Texture2D">
Icon shown to indicate where a dragged tab will be dropped (see [member drag_to_rearrange_enabled]).
</theme_item>
Expand All @@ -459,6 +481,15 @@
<theme_item name="increment_highlight" data_type="icon" type="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.
</theme_item>
<theme_item name="increment_vertical" data_type="icon" type="Texture2D">
Icon for the down arrow button that appears when there are too many tabs to fit in the container height (vertical tabs). When the button is disabled (i.e. the last tab is visible), it appears semi-transparent.
</theme_item>
<theme_item name="increment_vertical_highlight" data_type="icon" type="Texture2D">
Icon for the down arrow button that appears when there are too many tabs to fit in the container height (vertical tabs). Used when the button is being hovered with the cursor.
</theme_item>
<theme_item name="vertical_drop_mark" data_type="icon" type="Texture2D">
Icon shown to indicate where a dragged tab will be dropped when using vertical tabs (see [member drag_to_rearrange_enabled]).
</theme_item>
<theme_item name="button_highlight" data_type="style" type="StyleBox">
Background of the tab and close buttons when they're being hovered with the cursor.
</theme_item>
Expand Down
28 changes: 26 additions & 2 deletions doc/classes/TabContainer.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@
<param index="0" name="popup" type="Node" />
<description>
If set on a [Popup] node instance, a popup menu icon appears in the top-right corner of the [TabContainer] (setting it to [code]null[/code] will make it go away). Clicking it will expand the [Popup] node.
[b]Note:[/b] In vertical mode ([member tabs_position] is [constant POSITION_LEFT] or [constant POSITION_RIGHT]), the popup button is positioned next to the scroll buttons (if visible) or centered vertically in the tab bar.
</description>
</method>
<method name="set_tab_button_icon">
Expand Down Expand Up @@ -211,6 +212,7 @@
</member>
<member name="clip_tabs" type="bool" setter="set_clip_tabs" getter="get_clip_tabs" default="true">
If [code]true[/code], 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.
[b]Note:[/b] In vertical mode ([member tabs_position] is [constant POSITION_LEFT] or [constant POSITION_RIGHT]), space is always reserved for a visible popup button (see [method set_popup]) regardless of this setting, to prevent overlap with tab content.
</member>
<member name="current_tab" type="int" setter="set_current_tab" getter="get_current_tab" default="-1">
The current tab index. When set, this index's [Control] node's [code]visible[/code] property is set to [code]true[/code] and all others are set to [code]false[/code].
Expand Down Expand Up @@ -249,7 +251,8 @@
[b]Note:[/b] [code]index[/code] is a value in the [code]0 .. get_tab_count() - 1[/code] range.
</member>
<member name="tabs_position" type="int" setter="set_tabs_position" getter="get_tabs_position" enum="TabContainer.TabPosition" default="0">
The horizontal alignment of the tabs.
The position of the tab bar.
[b]Note:[/b] When using [constant POSITION_LEFT] or [constant POSITION_RIGHT], the internal [TabBar] will automatically be set to [member TabBar.vertical] and tabs will be arranged from top to bottom.
</member>
<member name="tabs_rearrange_group" type="int" setter="set_tabs_rearrange_group" getter="get_tabs_rearrange_group" default="-1">
[TabContainer]s with the same rearrange group ID will allow dragging the tabs between them. Enable drag with [member drag_to_rearrange_enabled].
Expand Down Expand Up @@ -312,7 +315,13 @@
<constant name="POSITION_BOTTOM" value="1" enum="TabPosition">
Places the tab bar at the bottom. The tab bar's [StyleBox] will be flipped vertically.
</constant>
<constant name="POSITION_MAX" value="2" enum="TabPosition">
<constant name="POSITION_LEFT" value="2" enum="TabPosition">
Places the tab bar at the left. Tabs will be arranged vertically (top to bottom).
</constant>
<constant name="POSITION_RIGHT" value="3" enum="TabPosition">
Places the tab bar at the right. Tabs will be arranged vertically (top to bottom).
</constant>
<constant name="POSITION_MAX" value="4" enum="TabPosition">
Represents the size of the [enum TabPosition] enum.
</constant>
</constants>
Expand Down Expand Up @@ -376,6 +385,12 @@
<theme_item name="decrement_highlight" data_type="icon" type="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.
</theme_item>
<theme_item name="decrement_vertical" data_type="icon" type="Texture2D">
Icon for the up arrow button that appears when there are too many tabs to fit in the container height (vertical tabs). When the button is disabled (i.e. the first tab is visible), it appears semi-transparent.
</theme_item>
<theme_item name="decrement_vertical_highlight" data_type="icon" type="Texture2D">
Icon for the up arrow button that appears when there are too many tabs to fit in the container height (vertical tabs). Used when the button is being hovered with the cursor.
</theme_item>
<theme_item name="drop_mark" data_type="icon" type="Texture2D">
Icon shown to indicate where a dragged tab will be dropped (see [member drag_to_rearrange_enabled]).
</theme_item>
Expand All @@ -385,12 +400,21 @@
<theme_item name="increment_highlight" data_type="icon" type="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.
</theme_item>
<theme_item name="increment_vertical" data_type="icon" type="Texture2D">
Icon for the down arrow button that appears when there are too many tabs to fit in the container height (vertical tabs). When the button is disabled (i.e. the last tab is visible), it appears semi-transparent.
</theme_item>
<theme_item name="increment_vertical_highlight" data_type="icon" type="Texture2D">
Icon for the down arrow button that appears when there are too many tabs to fit in the container height (vertical tabs). Used when the button is being hovered with the cursor.
</theme_item>
<theme_item name="menu" data_type="icon" type="Texture2D">
The icon for the menu button (see [method set_popup]).
</theme_item>
<theme_item name="menu_highlight" data_type="icon" type="Texture2D">
The icon for the menu button (see [method set_popup]) when it's being hovered with the cursor.
</theme_item>
<theme_item name="vertical_drop_mark" data_type="icon" type="Texture2D">
Icon shown to indicate where a dragged tab will be dropped when using vertical tabs (see [member drag_to_rearrange_enabled]).
</theme_item>
<theme_item name="panel" data_type="style" type="StyleBox">
The style for the background fill.
</theme_item>
Expand Down
1 change: 1 addition & 0 deletions editor/icons/GuiScrollArrowDown.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions editor/icons/GuiScrollArrowDownHl.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions editor/icons/GuiScrollArrowUp.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions editor/icons/GuiScrollArrowUpHl.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions editor/icons/GuiTabVerticalDropMark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading