The TabView widget is a UI control that enables the user switch between content panels.

{{>getting-started}}

Anatomy of a TabView

Minimum Markup Requirement

{{>need-skin-note}} ``` {{>need-skin-comment}} ```

A TabView consists of a list of links that target a content element.

The basic markup needed to create from HTML is the following:

```
foo content
bar content
baz content
```

Rendered Markup

After a TabView is rendered, the final markup becomes: ```

foo content
bar content
baz content
```

Creating and Configuring a TabView

A TabView instance can be created from existing markup on the page, or dynamically using JavaScript.

From Existing Markup

To create from existing markup, first conform to the basic markup pattern, then create a new TabView instance, pointing to the existing srcNode, and render.

```
foo content
bar content
baz content
```

From JavaScript

To create purely from JavaScript, all that is required is passing the TabView constructor a list of children containing their respective label and attributes, and call render. As with all YUI Widgets, render takes an optional container to render into, or defaults to the body element.

```
```

Skinning TabView

The TabView comes with a basic skin by default. This can be easily customized using the rich set of classNames.

For a more polished look and feel, we also ship with the "sam skin", which can be applied by adding the yui3-skin-sam className to some ancestor:

``` ...
foo content
bar content
baz content
... ```

TabView Events

TabViews fire the following events during operation:

Event When Payload
addChild a Tab is added to the TabView child, index
removeChild a Tab is removed from the TabView child, index
selectionChange the selected tab changes prevVal, newVal
render a Tabview is rendered Normal change event signature (newVal, prevVal, etc). When dragging, extra event property ddEvent : (drag:drag event) is added

This is not an exhaustive list. See the API docs for a complete listing.