chromium/ui/webui/resources/cr_elements/cr_tab_box/README.md

# cr-tab-box

cr-tab-box is a non-Polymer custom element that can be used to create a simple
tabbed UI. This is generally most useful for debug pages that are not
concerned with matching the look/feel of the larger user-facing Chromium WebUIs
that use Polymer (e.g. chrome://settings). cr-tab-box replaces the deprecated
cr.ui.TabBox from ui/webui/resources/js/tabs.js which was previously
used by debug pages for this purpose.

## Example usage
Tabs and tab panels can be added into the appropriate slots. The number and
order of the tabs should match the number and order of the panels. Example:

```html
  <cr-tab-box>
    <div slot="tab" role="tab" id="donuts-tab" aria-controls="donuts-panel">Donuts</div>
    <div slot="tab" role="tab" id="cookies-tab" aria-controls="cookies-panel">Cookies</div>
    <div slot="panel" role="tabpanel" id="donuts-panel" aria-labelledby="donuts-tab">
      <span>Some content related to donuts</span>
    </div>
    <div slot="panel" role="tabpanel" id="cookies-panel" aria-labelledby="cookies-tab">
      <span>Some content related to cookies</span>
    </div>
  </cr-tab-box>
```
## Relationship to cr-tabs
In general, user facing WebUIs using Polymer should use cr-tabs, while debug
UIs trying to avoid Polymer (e.g., in order to run on mobile platforms) should
use cr-tab-box. Key differences include:

* cr-tab-box contains slots for both tabs and corresponding panels. cr-tabs
  has only one slot for tabs, and is generally used in combination with
  something like cr-page-selector.
* cr-tabs is kept up to date with current user-facing WebUI styles. cr-tab-box
  is intended for debug UIs and uses very simple styling.
* cr-tabs depends on Polymer, while cr-tab-box does not.