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:

  <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.