TabBox

TabBox

React equivalent of TabBox is very similar to its XUL equivalent. TabBox element uses react state for handling active tab. Unlike XUL, all the tabpanels are not defined under the TabBox component. Only the current active tabpanel is present inside the TabBox component. activeTab state decides the active tab, based upon which activeTabPanel is decided. A simple TabBox code structure looks like-

<TabBox>
  <TabStrip
    tabs={this.getTabList()}
    activeTab={this.state.activeTab}
    handleTabChange={handleTabChange}
  />
  <TabPanel>
    {activeTabPanelContent}
  </TabPanel>
</TabBox>

getTabList returns an array of all tab objects which have uniqueId, name, and accessKey property. handleTabChange is the method that is called when new tabs are changed i.e., new tab is selected. On activeTab change activeTabPanel is also changed.

TabBox as a component is just a wrapper. Methods like getTabList, handleTabChange are provided by parent React Component. TabPanel is also just a div wrapper which has tabpanel styles for different platforms. TabStrip component contains all the Tab elements.