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
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata
General

Component Palette Icon:


 

 

Description

In general, a Tab Strip is just a single-selection multiple choice component. In practice it is used anywhere that a user needs to be able to select between multiple windows or to select between containers to display. It is most commonly used in a docked window to provide automatic window navigation. To support this typical use-case, the tab strip has two navigation modes:

  1. Swap to Window - (default) The Tab Strip will automatically call system.nav.swapTo() with the name of the selected tab. This facilitates very easy navigation for most common projects.
  2. Disabled - The Tab Strip doesn't do anything when the tab selection changes. Users can implement their own via property bindings or by responding to the propertyChange scripting event.

The Tab Strips visual style is highly customizable. There are different rendering styles, and things such as fonts, colors, line thicknesses, hover colors, and gradients are customizable within each rendering style. Use the Tab Strip's customizer to come up with a style that suits your project, as well as to manage the tabs that are present. The tabs and their styles are all stored in a dataset property (called Tab Data), so they can be modified at runtime as well.
Properties
NameDescriptionProperty TypeScriptingCategory
Background ColorThe background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. Color.backgroundAppearance
Border
The border surrounding this component. Options are:No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), Button Border, Field Border, Line Border, and Other Border.

The border is unaffected by rotation.

Border.borderCommon
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.int.cursorCodeCommon
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
Intertab SpaceThe amount of space between each tab.int.interTabSpaceAppearance
NameThe name of this component.String.nameCommon
Navigation ModeNavigation mode. Disabled does nothing when a tab is pressed. Swap to window swaps to the window whose name corresponds to the name of the selected tab, provided that window exists.int.navigationModeBehavior
OrientationOrientation of the tab strip.int.orientationAppearance
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityData
RendererThe renderer to use when rendering tabs.int.rendererAppearance
Rounding RadiusRounding radius for the tab corners.int.roundingRadiusAppearance
Selected TabName of the selected tab. This is also the name of the window that, if it exists, will be swapped to when this tab is pressed.String.selectedTabAppearance
Separator ColorColor of the line drawn across the bottom and around each tab. See Color Selector. Color.separatorColorAppearance
Separator ThicknessThickness of the line drawn across the bottom and around each tab.float.separatorThicknessAppearance
Size ModeThe sizing mode tabs use when deciding their size. Automatic means every tab is the same fixed size. Individual lets each tab decide its own size based on the size of its text.int.sizeModeAppearance
StylesContains the component's styles.Dataset.stylesAppearance
Tab DataTab data to be displayed.Dataset.tabDataData
Text AlignmentThe alignment of the tab text.int.textAlignmentAppearance
Text OffsetPadding on the left or right side of tab's text, depending on alignment.int
Appearance
Text PaddingPadding on each side of the text inside a tab.int.textPaddingAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon
Deprecated Properties
Data QualityThe data quality code for any Tag bindings on this component.int.dataQualityDeprecated
Scripting
Scripting Functions

This component does not have scripting functions associated with it.

Extension Functions

This component does not have extension functions associated with it.

Event Handlers
 mouse
 mouseClicked

This event signifies a mouse click on the source component. A mouse click the combination of a mouse press and a mouse release, both of which must have occurred over the source component. Note that this event fires after the pressed and released events have fired.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.
 mouseEntered

This event fires when the mouse enters the space over the source component.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.
 mouseExited

This event fires when the mouse leaves the space over the source component.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.
 mousePressed

This event fires when a mouse button is pressed down on the source component.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.
 mouseReleased

This event fires when a mouse button is released, if that mouse button's press happened over this component.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.
 mouseMotion
 mouseDragged

Fires when the mouse moves over a component after a button has been pushed.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.
 mouseMoved

Fires when the mouse moves over a component, but no buttons are pushed.

.sourceThe component that fired this event
.buttonThe code for the button that caused this event to fire.
.clickCountThe number of mouse clicks associated with this event.
.xThe x-coordinate (with respect to the source component) of this mouse event.
.yThe y-coordinate (with respect to the source component) of this mouse event.
.popupTriggerReturns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.
.altDownTrue (1) if the Alt key was held down during this event, false (0) otherwise.
.controlDownTrue (1) if the Control key was held down during this event, false (0) otherwise.
.shiftDownTrue (1) if the Shift key was held down during this event, false (0) otherwise.
 propertyChange
 propertyChange

Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.

.sourceThe component that fired this event
.newValueThe new value that this property changed to.
.oldValueThe value that this property was before it changed. Note that not all components include an accurate oldValue in their events.
.propertyName

The name of the property that changed.

Remember to always filter out these events for the property that you are looking for! Components often have many properties that change.

Customizers

The Tab Strip Customizer has its own set of properties that you can set and modify which dictate how the Tab Strip component looks and behaves whether or not it is used for window navigation. The tabs and the styles are stored in the Tab Data dataset property.

When customizing the Tab Strip, keep in mind how you are using the component when setting your properties. Some Tab Strip properties may behave a little differently based on style, tab orientation, or text alignment. It's a good idea to use the preview window to verify the style you configured is the style you want.


Tab Strip Customizer - Property Descriptions

PropertiesDescription
OrientationOrientation of the Tab Strip on a window: Top, Left, Bottom and Right. For example, use the Top orientation to place the Tab Strip component at the top of your window.
Navigation ModeTwo Navigation modes:
  • Swap Windows - the Tab Strip automatically calls system.nav.swapTo() to perform a window swap from the current window to another window when a tab is pressed. Swap Windows is the default mode.
  • Disabled - the Tab Strip only sets the Selected Tab property when pressed. You can set the component's behavior using property bindings or by responding to the propertyChange scripting event.
Size ModeTwo Size modes:
  • Individual - all the tabs are the same size.
  • Automatic - all the tabs are sized to fit the text.
StyleThree style options to change the appearance of the individual tabs: Simple, Fancy, and Folder.
Add TabAdds a new tab next to the selected tab.
Remove TabRemoves a selected tab.
Move Up / Move DownDepends on the current Orientation selection. Moves the selected tab Up or Down in the tab strip when using the Left or Right orientation.
Move Left / Move RightDepends on the current Orientation selection. Moves the selected tab either Left or Right in the tab strip when using the Top / Bottom orientation.
Text AlignmentInserts text in the Center, Left, or Right inside a tab.
Text OffsetSpecifies how many pixels to move text to the left or right within a tab.
Text PaddingSpecifies the number of pixels around the text in the tab.
Intertab SpaceSpecifies the number of pixels between tabs.
Rounding RadiusSpecifies the number of pixels to round the corners of the tab depending on the tab orientation.
General
Window NamePathname of the window location

Display name

The name to display on the tab.
Mouseover TextThe text to display in the tooltip which pops up when mousing over a tab.
Hover ColorThe color to display in the tootip which pops up when mousing over a tab.
When Selected / When Unselected
Background ColorThe background color of the tab.

Foreground Color

The foreground color is the color of the text.
FontSelect the font type, font size, and style.
Gradient Start ColorSelect a start color to begin the gradient. Gradients are not valid for the Fancy style, and are shown as being grayed out. Select Simple or Folder style to use the gradient feature.
Gradient End ColorSelect an end color to end the gradient. Gradients are not valid for the Fancy style, and are shown as being grayed out. Select Simple or Folder style to use the gradient feature.

Use Gradient

Select Use Gradient checkboxes to use gradient features. Uncheck the Use Gradient checkboxes to disable the gradient feature.
Tab IconSelect an image from the Image Browsser to insert on a tab.
Apply to All

The button applies all of the currently shown settings (except Window Name and Display Name) to all of the tabs. Note: this does not save your changes.


Examples
Horizontal Tabs
Property NameValue
StyleFancy
OrientationTop
Tab Data

Dataset customized with the Tab Strip Customizer.
Notice how the Gradient features are grayed out with the Fancy style.



 

 

  • No labels