The Tab Layout is a way to allow your users to swap between several views easily. However, this is not a navigation strategy that works for anything other than a very small project. This navigation strategy is intrinsically limited. You cannot use a tab layout to navigate to a new page, only to cycle between different views on the same page. As such, the page URL will never change, and the forward and back buttons on your browser will not navigate through the tabs.
For complex pages, this type of layout can work very well. When we talk about using tabs to organize a page, we are talking about a single page that has a lot of information on it. A good example is an customer details screen. You may need to know all about your own customers, location, contacts, order information, payment, and more. If each of these items is a new tab on a single page, you can show much more information in a smaller space. If this sort of tab structure suits your page's organizational needs, the tab layout can integrate that structure without complicated scripting or bindings.
If you're after a nested tab structure, all this requires is nesting another tab container inside of each of the tabs in a parent container:
Create a new view with a Tab container type, and create a Page URL.
replace image above with the following at 8.0.8 release. no banner needed.
- The Tab container will have a couple tabs preconfigured. If you'd like to add or remove tabs, you can do so by interacting with the tabs themselves, or by adding or removing elements in the tabs array.
- If you'd like to add headers to your tabs, select the root container, and add strings to the entries in the tabs array. We labeled our two tabs "Region" and "Events".
- Select a tab (i.e., Region) where you'd like to configure some nested tabs.
- Double click to deep select the Tab Container component for the nested tabs.
- From the Perspective component palette, drag a Tab Container component (or another view you created that has a tab layout) onto the View.
- Configure the number of tabs and the headers using the same means we discussed in steps 2 and 3. For this example, we made four tabs and labeled them North, South, East and West.
- Select the tab you want to add a component to (i.e., West).
- Drag a component onto the tab. In this example, we added a Map component on the tab labeled West. When you drag a component into a tab, the component fills up the entire space. If you want to add multiple components on a sub-container/nested tab, go to Step 11.
- The example now shows the Map component when the West tab is selected.
- To add multiple components on a sub-container, let's use a different tab (i.e., East) from our example above.
- Double click to deep select the Tab component (i.e., East) and drag a Coordinate container from the component palette into the sub-container.
- Now you can drag multiple components into the container. This example drags in a Map and Table components. You can resize and organize the components within the tab. Here's what the components look like within the tab.
- Now, lets open it up in a Perspective Session by clicking on the Page Configuration
- Here's what your Tab container layout will look like in a Perspective Session.