Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


A Tab container can be used for a relatively simple layout type. Tabs run along the top of the layout. You can configure and select a distinct embedded view, container, or component in each tab. The tab headers themselves can be configured to show text or even embedded views. A menuType property on the tab container offers two basic appearances for the tabs: classic and modern

Critically, each element in a Tab container has only a single position property, tabIndex. The edges of the enclosed element will be stretched to fill the entire tab, allowing easy dragging and dropping of different subviews. Of course, you can nest containers inside of a tab layout to provide whatever functionality you'd like.

For details on the properties in a Tab component, see Perspective - Tab Container.

On this page ...

IULocgo


Tab Container



Tab Container Root Properties

Root properties are accessed by selecting the root for a View with a Tab container on the Project Browser tree.

Root Property

Description

Data Type

tabsContent 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
currentTableIndexWhich index in the tabs property is currently active.value: numeric
menuTypeIf 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
tabSize

Default size allotted to a single tab. If container width does not allow, tab width will shrink from this size accordingly.

Root Property

Description

Data Type

widthWidth of tab, in pixels. Default is 96.value: numeric
heightHeight of tab, in pixels. Default is 36.value: numeric
object
menuStyle

Additional styling to apply to the menu.

Root Property

Description

Data Type

backgroundColorBackground color for the menu.color
object
tabStyle

Additional styling to apply to all tabs depending on active (selected) or inactive state.

Root Property

Description

Data Type

activeStyle for all tabs when active. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous.object
inactiveStyle for all tabs when inactive. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous.object
object
styleSets 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



Tab Navigation

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.

Nested Tabs

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:

  1. Create a new view with a Tab container type, and create a Page URL

  2. Next we added headers to the tabs.
    1. Select the root container.
    2. In the Property editor, select the first element in the tabs array. Enter the name "Region".
    3. 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. 



  3. Next we'll configure some nested tabs under the Region tab. Double click to deep select the Tab Container component for the nested tabs.
  4. From the Perspective component palette, drag a Tab component onto the View. 



  5. In the Property Editor, click the Add icon twice to add two more tabs to the component.
  6. Name the tabs North, South, East and West.



  7. Select the tab you want to add a component to (i.e., West). 
  8. 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.
  9. The example now shows the Map component when the West tab is selected. 



  10. To add multiple components on a sub-container, let's use a different tab (i.e., East) from our example above.
  11. Double click to deep select the Tab component (i.e., East) and drag a Coordinate container from the component palette into the sub-container. 
  12. 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.



  13. Now, lets open it up in a Perspective Session by clicking on the Page Configuration icon. Right click on your Page URL for your Tab View to launch a Perspective Session. 



  14. Here's what your Tab container layout will look like in a Perspective Session.




  • No labels