Tabs and Tab Panels

Modified on Wed, 22 Jun 2022 at 10:24 AM

The Material UI Tabs element creates a nav bar for a set of tabs. It is easiest when used in conjunction with the Tab Panels element from the regular UI library. 


Functionality


To set up the labels for the tabs you would like to show, you will need to enumerate the tab labels under "items" in the State of the Tabs element. 


To link the Tabs element to the Tab Panels element, you are going to need to connect the onChange action from Tabs to the setSelectedIndex action on the Tab Panels element. To get the correct data, you will connect getSelectedIndex on Tabs to selectedIndex on the Tab Panels element.



The Tab Panels element should be filled with the same number of items that you listed in "items" in the Tabs element. These should be container that hold the views for each tab starting with a zero index. If you are unsure of the order of the containers, be sure to look at the Tree panel to assist. 


Style


The Tabs element can be oriented horizontally or vertically. Aligning the Tabs element vertically will change the direction of the element, so it is likely you will need to adjust the layout of its parent element to hold children horizontally for it to look appropriate. 



Adjusting the primaryColor option under State in the Tabs element will change the color that indicates the selected index in the list of tabs.  


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article