Better Tab Container

An asset by gducrash
The page banner background of a mountain and forest
Better Tab Container image holder but it is empty

Quick Information

1 ratings
Better Tab Container icon image
gducrash
Better Tab Container

This addon adds a container, that can have multiple tabs, which the user can change by swiping left or right on the screen. It is based on the ScrollContainer node.Getting Started:• Download the addon and place it into your project directory, either manually, or through the Asset Store• Activate it in the Project Settings ("Plugins" tab)• Add a BetterTabContainer node to a scene. It is recommended that it is either set to full rect or has a "Fill" horizontal size flag• Add multiple nodes to it. Each child node counts as a separate tab, it can be any type of Control node. Please ignore the "ScrollContainer can only have one node" warning, I am actively trying to get rid of it• Done!Customizing the Node:• You can set the "Current Tab" property in the inspector. By default, it is set to 0, meaning the first tab is active on start• You can connect the "tab_switched" signal to another node to detect when it's changed• If you want to change the tab through code (for example, if you have a list of tab buttons next to the container), you can call the switch_tab(tab) method• You might also want to hide the horizontal scroll bar, as it does nothing• If you want to be able to swipe on tabs, make sure to set all of the children containers' mouse filter to "Pass", so it detects input

Supported Engine Version
4.0
Version String
1.1
License Version
MIT
Support Level
testing
Modified Date
11 months ago
Git URL
Issue URL

icon A Mobile-friendly tabs container for Godot 3

This addon adds a container, that can have multiple tabs, which the user can change by swiping left or right on the screen. It is based on the ScrollContainer node.

Watch a Video Showcase

Getting Started

  1. Download the addon and place it into your project directory, either manually, or through the Asset Store
  2. Activate it in the Project Settings ("Plugins" tab)
  3. Add a BetterTabContainer node to a scene. It is recommended that it is either set to full rect or has a "Fill" horizontal size flag
  4. Add multiple nodes to it. Each child node counts as a separate tab, it can be any type of Control node. Please ignore the "ScrollContainer can only have one node" warning, I am actively trying to get rid of it
  5. Done!

Customizing the Node

  • You can set the "Current Tab" property in the inspector. By default, it is set to 0, meaning the first tab is active on start
  • You can connect the "tab_switched" signal to another node to detect when it's changed
  • If you want to change the tab through code (for example, if you have a list of tab buttons next to the container), you can call the switch_tab(tab) method
  • You might also want to hide the horizontal scroll bar, as it does nothing
  • If you want to be able to swipe on tabs, make sure to set all of the children containers' mouse filter to "Pass", so it detects input

Examples & Screenshots

TODO

Contributing

Feel free to improve the code, fix bugs or add functionality by creating an issue or submitting a pull request

This addon adds a container, that can have multiple tabs, which the user can change by swiping left or right on the screen. It is based on the ScrollContainer node.

Getting Started:
• Download the addon and place it into your project directory, either manually, or through the Asset Store
• Activate it in the Project Settings ("Plugins" tab)
• Add a BetterTabContainer node to a scene. It is recommended that it is either set to full rect or has a "Fill" horizontal size flag
• Add multiple nodes to it. Each child node counts as a separate tab, it can be any type of Control node. Please ignore the "ScrollContainer can only have one node" warning, I am actively trying to get rid of it
• Done!

Customizing the Node:
• You can set the "Current Tab" property in the inspector. By default, it is set to 0, meaning the first tab is active on start
• You can connect the "tab_switched" signal to another node to detect when it's changed
• If you want to change the tab through code (for example, if you have a list of tab buttons next to the container), you can call the switch_tab(tab) method
• You might also want to hide the horizontal scroll bar, as it does nothing
• If you want to be able to swipe on tabs, make sure to set all of the children containers' mouse filter to "Pass", so it detects input

Reviews

1 ratings
LittleMouseDev Rated positive

Your Rating

Headline must be at least 3 characters but not more than 50
Review must be at least 5 characters but not more than 500
Please sign in to add a review

Quick Information

1 ratings
Better Tab Container icon image
gducrash
Better Tab Container

This addon adds a container, that can have multiple tabs, which the user can change by swiping left or right on the screen. It is based on the ScrollContainer node.Getting Started:• Download the addon and place it into your project directory, either manually, or through the Asset Store• Activate it in the Project Settings ("Plugins" tab)• Add a BetterTabContainer node to a scene. It is recommended that it is either set to full rect or has a "Fill" horizontal size flag• Add multiple nodes to it. Each child node counts as a separate tab, it can be any type of Control node. Please ignore the "ScrollContainer can only have one node" warning, I am actively trying to get rid of it• Done!Customizing the Node:• You can set the "Current Tab" property in the inspector. By default, it is set to 0, meaning the first tab is active on start• You can connect the "tab_switched" signal to another node to detect when it's changed• If you want to change the tab through code (for example, if you have a list of tab buttons next to the container), you can call the switch_tab(tab) method• You might also want to hide the horizontal scroll bar, as it does nothing• If you want to be able to swipe on tabs, make sure to set all of the children containers' mouse filter to "Pass", so it detects input

Supported Engine Version
4.0
Version String
1.1
License Version
MIT
Support Level
testing
Modified Date
11 months ago
Git URL
Issue URL

Open Source

Released under the AGPLv3 license

Plug and Play

Browse assets directly from Godot

Community Driven

Created by developers for developers