# TabsOptions

Import it from `@grafloria/element`.

TAB CONTAINERS — a container whose children are PAGES, one visible at a
time, with a strip of tabs across its top. DevExpress ships this as its Tab
Container; VS Code's editor area is a split of them.

This module owns the strip: its height, its geometry and its DOM. Who is
active, where the pages sit and what a press means are the container's
business (dashboard.ts), exactly as the caption band's press routing is the
binder's.

```ts
interface TabsOptions
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `inset?` | `number` |  | Pixels between the frame and the pages — left, right, bottom, and below the strip (0.4.43). The cards of a page sit INSIDE the container's tinted frame, so two cards under one tab read as one panel; a border on the cell alone ran exactly where the cards' own borders were. Default 8; 0 puts the pages edge to edge, the look before 0.4.43. |
| `position?` | `'top'` |  | Where the strip sits. Only 'top' today; 'bottom' \| 'start' \| 'end' follow. |
| `align?` | `'start' \| 'center' \| 'end'` |  | Along the strip (default 'start', mirrored on RTL). |
| `stretch?` | `boolean` |  | Tabs share the strip's width equally. |
| `height?` | `number` |  | Strip height, px (default 30). |
| `className?` | `string` |  | Your class on the strip, for per-container theming. |
| `hidden?` | `boolean` |  | No strip at all (0.4.83) — DevExpress's tab container with ShowCaption="false". Nothing is reserved for it (the pages fill the frame, less `inset`) and nothing is on screen: no element, so no paint, no tab stop and nothing to press. Pages are switched from code — `handle.activateTab()`, `getActiveTab()` and `onTabChange` work as with a visible strip. |