Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.

The Tab Strip component provides a simple navigation strategy used for small project structures having only a few windows. It allows users to see all the navigation tabs on the screen of the client. It is most commonly used in a docked window to provide automatic window navigation. The Tab Strip allows clicking on a tab to swap one main window for another. The Tab Strip has two navigation modes:

  • Swap Windows - the Tab Strip automatically calls system.nav.swapTo() with the name of the selected tab for easy navigation from one window to another.
  • Disabled - the Tab Strip doesn't do anything when a tab is pressed. Users can customize tabs using property bindings or by responding to the propertyChange scripting event. 

A Tab Strip is an effective primary navigation strategy, particularly when you don't have many items to choose from.

 Image Added


Scroll html ignore
NameNavigation - Tab Strip

 Tab Strip navigation is simple to set up. In the following example, we'll set up a small project that has a few windows which are visible on the navigation tabs. 

  1. Add a Tab Strip component to a window, typically a docked window.
  2. Right-click on the Tab Strip component, choose Customizers > Tab Strip Customizer

  3. In the Tab Strip Customizer you can specify which window to open with each tab. Notice the Navigation Mode property which is set to Swap Windows as shown in the screenshot below.
  4. To create a new tab, click Add Tab. If you have a tab already selected, clicking the Add Tab button creates a Tab with the same colors and font as the selected tab.

    titleMain Windows already created

    This step assumes you already have your main windows created in your Project Browser.

    1. Under Window Name dropdown list, select the window you want to open. Note, it is the full path from the window and not just the name (i.e., Main Windows/Main Window 2).
    2. Enter the Display Name for your new tab (i.e., Main Window 2).
    3. With the Move Up, Move Down, and Remove Tab buttons you can move tabs up and down on the tab strip, and remove a tab if it is no longer required.
    4. You can also set the Background and Foreground colors when to show when a tab is selected and unselected. 
    5. When you're finished, press OK.

  5. Save your project. 
  6. Open your project in the Client and confirm each tab navigates to a different window.