# Class: tabs

## LuCI .ui. tabs

The `tabs` class handles tab menu groups used throughout the view area. It takes care of setting up tab groups, tracking their state and handling related events.

This class is automatically instantiated as part of `LuCI.ui`. To use it in views, use `'require ui'` and refer to `ui.tabs`. To import it in external JavaScript, use `L.require("ui").then(...)` and access the `tabs` property of the class instance value.

#### new LuCI.ui.tabs()

ui.js, line 3493

### Methods

#### initTabGroup(panes)

ui.js, line 3548

  Initializes a new tab group from the given tab pane collection.

  This function cycles through the given tab pane DOM nodes, extracts their tab IDs, titles and active states, renders a corresponding tab menu and prepends it to the tab panes common parent DOM node.

  The tab menu labels will be set to the value of the `data-tab-title` attribute of each corresponding pane. The last pane with the `data-tab-active` attribute set to `true` will be selected by default.

  If no pane is marked as active, the first one will be preselected.

  Name | Type | Description
  --- | --- | ---
  `panes` | Array.<Node> | NodeList | A collection of tab panes to build a tab group menu for. May be a plain array of DOM nodes or a NodeList collection, such as the result of a `querySelectorAll()` call or the `.childNodes` property of a DOM node.

#### isEmptyPane(pane){boolean}

ui.js, line 3618

  Checks whether the given tab pane node is empty.

  Name | Type | Description
  --- | --- | ---
  `pane` | Node | The tab pane to check.

  ##### Returns:

  Type | Description
  --- | ---
  boolean | Returns `true` if the pane is empty, else `false`.