<!-- Generated by npm run gen:skill from ui/TabStrip/skill.md - do not edit. -->

# TabStrip

## `<tabstrip>`

- `position`: top | bottom
- `tabs`, `add`
- Tabs: `title`, `icon`, `selected`, `value`, `closeable` (true, false, keep-one), `hide`
- events: Add, Close, ContextMenu, Release, Select
- methods: getSelection, getTab, getTabByTitle, getTabIndex, hideTab, navLeft, navRight, selectByIndex, selectTab, setSelection, showTab

```xml
<tabstrip name="basic" width="260" height="120">
  <panel name="tab1" type="rows" selected="true" title="Details" padding="8">
    <label text="First tab"/>
  </panel>
  <panel name="tab2" type="rows" title="History" padding="8">
    <label text="Second tab"/>
  </panel>
  <panel name="tab3" type="rows" title="Settings" padding="8">
    <label text="Third tab"/>
  </panel>
</tabstrip>
```

## Guidance

- Static tabs: one `panel` per tab with a `title` (also the tab's accessible name) and `selected="true"` on the first shown. `hide="true"` starts a tab hidden; `showTab`/`hideTab(title)` toggle it.
- Data tabs: a `rule` making `<item name="{@name}" title="{@title}"/>` plus one shared panel (an item's `value` names another child panel to show); bind the tabstrip and on Select read `{selection(#v#tabs)}`. `closeable` is for these only: the Close step deletes the node.
- Switching static tabs fires Release, then Select, on the tabstrip. `add="true"`: the Add step must create the tab. `tabs="false"` needs a `selected="true"` panel, or nothing shows.
- The close "x", the "+" and the overflow arrow are mouse-only: give the same step a button or menu item.
