Tabs

A set of tabs, where each tab is associated with a single panel.

A very basic tab declaration looks something like this:

Tabs {
    TabPanel {
        Tab { Text("Tab 1") }
        Panel { Text("Panel 1") }
    }
    TabPanel {
        Tab { Text("Tab 2") }
        Panel { Text("Panel 2") }
    }
}

In other words, Tabs is a collection of TabPanels, and each TabPanel MUST define exactly one tab and one associated panel.

Each TabPanel can also be configured to be disabled, and/or to be the default tab that is selected when the widget first composes.

For example, here's a collection of three tabs, with the first disabled and the third set to be selected by default:

Tabs {
    TabPanel(enabled = false) {
        Tab { Text("Tab 1") }; Panel { Text("Panel 1") }
    }
    TabPanel {
        Tab { Text("Tab 2") }; Panel { Text("Panel 2") }
    }
    TabPanel(isDefault = true) {
        Tab { Text("Tab 3") }; Panel { Text("Panel 3") }
    }
}

When first composed, the initially active tab will be the first non-disabled tab that is marked as default, or the first non-disabled tab if none are marked as default. (If there are no tabs or all tabs are disabled, an exception will be thrown).

While each Tab and Panel call can take their own individual modifiers, you can specify common modifiers that apply across all of them.

For example, if you want to have all your tabs stretch equally to fill all available space, you can do this:

Tabs(commonTabModifier = Modifier.flexGrow(1)) { /* ... */}

and you can always exclude an individual tab using its individual modifier:

Tabs(commonTabModifier = Modifier.flexGrow(1)) {
  TabPanel { /* ... */} // Tab 1
  TabPanel { /* ... */} // Tab 2
  TabPanel { Tab(Modifier.flexGrow(0)) { Text("Tab 3") }; /* ... */}
}

Parameters