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 USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


General

Component Palette Icon:




IULocgo


Tab Container

Description

The Tab Container uses tabs as navigation buttons arranged together with the selected tab highlighted. Only one component can be displayed in each tab. See also Tab Containers.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty 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
currentTabIndexWhich index in tabs array is currently active.value: numeric
menuTypeIf the type is 'classic', a traditional menu with boxed tabs is shown. If the type is 'modern', it has no borders around each tab and shows selection with an underline.value: string dropdown
tabSize

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

NameDescriptionProperty Type
widthWidth in pixels for the tab size.value: numeric
heightHeight in pixels for the tab size.value: numeric
object

menuStyle

Opens the Style menu to change Tab properties: Text, Background, Margin and Padding, Border, and Misc.

value: string dropdown

contentStyle

The following feature is new in Ignition version 8.0.13
Click here to check out the other new features
Sets a style for the content frame component. Full menu of style options is available. You can also specify a style class.

object
tabStyle

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

NameDescriptionProperty Type
activeSets a style for a tab when it is the active tab. The Style menu contains all the tools for modifying text, background, margins, borders, and more. You can also specify a style class.object
inactiveSets a style for tabs that are inactive. The Style menu contains all the tools for modifying text, background, margins, borders, and more. You can also specify a style class.object
object
styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

Scripting Functions

The following feature is new in Ignition version 8.0.3
Click here to check out the other new features

 .getChildren()
  • Description

Returns an ArrayList, which contains references to all components inside of the container.

  • Parameters

none

  • Return

Array List - An ArrayList of components in the container. The resulting ArrayList can be iterated over via a for-loop.

Example

In this example, three tabs set up in the Tab Container component. Tab 3 is active and contains a Map component.

PropertyValue
props.tabs.0Tab 1
props.tabs.1Tab 2
props.tabs.2Tab 3
props.menuStyle.backgroundColor#D5D5D5
tabStyle.active.backgroundColor#00FFFF
tabStyle.active.fontWeightbold
tabStyle.inactive.backgroundColor#CCFFFF
tabStyle.inactive.fontWeightlighter


  • No labels