# TabControl

A `TabControl` contains tab pages, which are represented by `TabPage` objects that you add through the `TabPages` property. The order of tab pages in this collection reflects the order the tabs appear in the control.

![TabControl Example](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2FAAl4ZzK8uiCgSHtrr8sy%2Fimage.png?alt=media\&token=6a6d98b1-101e-49ff-9088-56006066bb19)

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Movable Tabs

When `AllowUserToMoveTabs` is set to `true`, the user is able to rearrange the tab pages at runtime.

![TabControl with movable tabs](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-30c1770c32754758ca6f7fb0a39e7c17da566afb%2FTabControlMovable.gif?alt=media)

### Orientation

The `TabControl` can be configured to display the tabs in a `Horizontal` or `Vertical` manner. The default orientation is `Horizontal`.

![TabControl with Horizontal orientation](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-90ddf46accabf1a7dd1ac2d04dca42654540e081%2Fimage.png?alt=media)

![TabControl with Vertical orientation](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-82197acfad002ff5310ddd3ba4aca1b69e33dadd%2Fimage.png?alt=media)

{% embed url="<https://www.youtube.com/watch?v=Wyr-Z3Q8S5E>" %}

## Advanced

### JavaScript Widget <a href="#javascript-widget" id="javascript-widget"></a>

| Item             | Description                                                                                                                                                                                              |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.TabControl"                                                                                                                                                                                   |
| Theme appearance | "tabview", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                                                                                   |
| Child components | "bar" is the container for the tab page buttons. "pane" hosts the tabview page. "page" hosts the actual tabview content. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                                      |