Skip to main content
Version: 8.1

Vision - Tab Strip

Component Palette Icon

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:

  • 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.
  • 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​

PropertyDescriptionProperty 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
BorderThe border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.
Note: The border is unaffected by rotation.

Changed in 8.1.21
As of 8.1.21, the "Button Border" and "Other Border" options are removed.
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.intAppearance
Text PaddingPadding on each side of the text inside a tab.int.textPaddingAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon

Deprecated Properties​

PropertyDescriptionProperty TypeScriptingCategory
Data QualityThe data quality code for any Tag bindings on this component.int.dataQualityDeprecated

Scripting​

Component Functions​

This component does not have component functions associated with it.

Extension Functions​

This component does not have extension functions associated with it.

Event Handlers​

Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page

Customizers​

The Tab Strip Customizer has it's 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.

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 Section​

PropertiesDescription
Window NamePathname of the window location
Display nameThe 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​

PropertiesDescription
Background ColorThe background color of the tab.
Foreground ColorThe 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 GradientSelect Use Gradient checkboxes to use gradient features. Uncheck the Use Gradient checkboxes to disable the gradient feature.
Tab IconSelect an image from the Image Browser to insert on a tab.
Apply to AllThe 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.

Additional Customizers​

Example​

Horizontal Tabs​

PropertiesDescription
StyleFancy
OrientationTop
Tab DataDataset customized with the Tab Strip Customizer. Notice how the Gradient features are grayed out with the Fancy style.

For a more in-depth example on how to use the Tab Strip for navigation, see the Navigation - Tab Strip page.