Tab Container Root Properties
Root properties are accessed by selecting the root for a View with a Tab container on the Project Browser tree.
|tabs||Content to display in the menu as tabs. Each tab in this array may be either a string to display as the tab text or an object with viewPath and optionally viewParams. If the latter, a view will render as the tab in place of text.||array|
|currentTableIndex||Which index in the tabs property is currently active.||value: numeric|
|menuType||If the type is 'classic', a traditional menu with boxed tabs is shown. The 'modern' type has no borders around each tab and shows selection with an underline. Options are classic or modern.||value: string dropdown|
Default size allotted to a single tab. If container width does not allow, tab width will shrink from this size accordingly.
Additional styling to apply to the menu.
Additional styling to apply to all tabs depending on active (selected) or inactive state.
|style||Sets a style for this view. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.||value: numeric|
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.
- Next we added headers to the tabs.
- Select the root container.
- In the Property editor, select the first element in the tabs array. Enter the name "Region".
- In the second element, enter the name "Events".
You'll see the names appear on the tabs as you enter them in the Property Editor.
- Next we'll configure some nested tabs under the Region tab. Double click to deep select the Tab Container component for the nested tabs.
- From the Perspective component palette, drag a Tab component onto the View.
- In the Property Editor, click the Add icon twice to add two more tabs to the component.
- Name the tabs 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 10.
- 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.