The Tabs component

Tabs allow you to add different components to one of multiple tabs/pages in the form.

In addition to the properties and methods listed below, this component inherits properties and methods from the superclass Component. For example, any Tabs component has a hidden property even though this is not explicitly listed here.

Properties

NameDescriptionDatatypeDefault
componentsArray of tabs. Every tab has the following properties:
  • label: Text to display at the top of the tab.
  • key: Unique identifier of the tab.
  • components: The components of the tab.
Set this property easily with the setContent or addTab methods described below.
tableViewWhen true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid.BooleanFalse

Methods

NameSyntaxDescription
addTabtab = obj​.addTab(​label)Creates a new tab and adds it to a Tabs component. label is the text to show at the top of the tab.
fillTabsobj​.fillTabs(​labels, fillFcns, inputs)Adds tabs to the Tabs component using a set of labels, functions, and possibly input arguments. Each tab is filled by calling the function with as input the tab and optional additional inputs. This method is explained in more detail below.
getTabtab = obj​.getTab(​keyOrLabel)Returns the tab object with the given key or label. Tries to match keyOrLabel with the tab keys first and if no matches were found, matches the labels.
setContent [tab1, ..., tabN] = obj​.setContent(​labels, keys, components)Add components to the Tabs component by using the following arguments:
  • labels: The text to display at the top of each tab.
  • keys: The keys of the tabs.
  • components: (optional) List (Python) or cell array (MATLAB) with in every element, the component(s) to add to the tab.
This method assigns the components property of the Tabs component. It outputs the individual Tab components, so that these may be used to add components to that are created after the Tabs are created. For example (MATLAB):
[firstTab, secondTab] = obj​.setContent(​labels, keys, components);
MyButton = component​.Button(​"my_key", firstTab);
In python the syntax would be:
firstTab, secondTab = obj​.setContent(​labels, keys, components)
MyButton = component​.Button(​"my_key", firstTab)
After calling this, the labels and keys of the individual tabs cannot be changed.

Fill tabs using separate functions

You can call individual functions to fill a Tabs component using the fillTabs method. Its syntax is: obj.fillTabs(labels, fillFcns, inputs) This will add tabs to the Tabs component with the given labels and call each of the tab filling functions.

The input arguments are:

  • labels: The label of each of the tabs. These must be unique.
  • fillFcns: Handles of the functions that fill the tabs. They have syntax myFillFcn(tab, <additionalInputs>).
  • inputs: Optional, additional inputs to each of the tab filling functions. Can be left out if none of the functions take any additional inputs.

The following example illustrates how this can be used in practice:

def gui_init(meta_data) -> dict:
    form = Form()
    labels = ["Setup", "Analysis"]
    fillFcns = [_fill_setup_tab, _fill_analysis_tab]
    inputs = [["A", True], []]
    comp = component.Tabs("myTabs", form)

    # This will add two tabs with the given labels. The tabs will be filled by calling
    # the local functions provided. These can be defined elsewhere as well.
    comp.fillTabs(labels, fillFcns, inputs)

    return {"form": form}


def _fill_setup_tab(tab, key, default):
    cb = component.Checkbox(key, tab)
    cb.defaultValue = default
    cb.label = "Ignore resistance"


def _fill_analysis_tab(tab):
    txt = component.TextField("txt", tab)
    txt.label = "Name"
function payload = guiInit(metaData)
    form            = Form();
    payload.form    = form;
    labels          = ["Setup", "Analysis"];
    fillFcns        = {@fillSetupTab, @fillAnalysisTab};
    inputs          = {{"A", true}, {}};
    comp            = component.Tabs("myTabs", form);

    % This will add two tabs with the given labels. The tabs will be filled by calling
    % the local functions provided. These can be defined elsewhere as well.
    comp.fillTabs(labels, fillFcns, inputs)
end

function fillSetupTab(tab, key1, default)
    cb              = component.Checkbox(key1, tab);
    cb.defaultValue = default;
    cb.label        = "Ignore resistance";
end

function fillAnalysisTab(tab)
    txt         = component.TextField("txt", tab);
    txt.label   = "Name";
end

The result is a Tabs component with two tabs, each filled with their own components: