Element: <oj-tab-bar>

Oracle® JavaScript Extension Toolkit (JET)
16.0.0
F83703-01

DOM Interface: TabBarElement

Version:
  • 16.0.0
Since:
  • 4.0.0
.oj-disabled
Any list item can be disabled by adding the oj-disabled class to that element
Example
<oj-tab-bar>
  <ul>
    <li id="foo" class="oj-disabled" >
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-focus-highlight
Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.

The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.

The application-level behavior for this component is controlled in the theme by the $focusHighlightPolicy SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:

nonPointer: oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
all: oj-focus-highlight is applied regardless of the focus mechanism.
none: oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.

To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.
Example
<oj-tab-bar class="oj-focus-highlight">
  <!-- Content -->
</oj-tab-bar>
.oj-removable
Use this class to make an item removable.
Example
<oj-tab-bar>
  <ul>
    <li id="foo" class="oj-removable" >
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-category-divider
Use this class to add a horizontal divider line between two categories of items.
Example
<oj-tab-bar>
  <ul>
    <li ...></li>
    <li class="oj-tabbar-category-divider"></li>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-hide-remove-icon
Use this class to hide the remove icon. In this case, Item can be removed using context menu.
Example
<oj-tab-bar class="oj-tabbar-hide-remove-icon" >
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-item-dividers

Note: This styleclass is not supported in the following themes: Redwood

Use this class to render a divider between tab items. Note: On IE11, this is not supported when overflow attribute is set to 'popup'.
Example
<oj-tab-bar class="oj-tabbar-item-dividers">
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-item-end

Note: This styleclass is not supported in the following themes: Alta

Use this class to add an badge/metadata/icon to a list item.
Example
<oj-tab-bar class="oj-tabbar-item-end" >
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-end>
           <span class="oj-badge oj-badge-subtle">3
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-item-icon
Use this class to add an icon to a list item.
Example
<oj-tab-bar class="oj-tabbar-stack-icon-label" >
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-item-label
Use this class to specify the element with the label. This will eliminate the need for Tabbar to automatically wrap any child element that is not an icon or a badge with this class. Note the content must have the correct order (icon element first, then the label element, then the badge element) as Tabbar in this case will not attempt to reorder the content.
Example
<oj-tab-bar class="oj-tabbar-stack-icon-label" >
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        <span class="oj-tabbar-item-label">
        Foo
        </span>
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-item-text-wrap
Use this class to wrap item label text. Note: On IE11, this is not supported when overflow attribute is set to 'popup'. This style class is not supported when edge is 'top' or 'bottom'.
Example
<oj-tab-bar class="oj-tabbar-item-text-wrap" >
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-item-title
When arbitrary content is placed inside an item's content area, its title text can be marked using this style class. This helps the component in identifying the Item's label.
Example
<li id="foo">
  <div>
    <span class="oj-tabbar-item-title">Play</span>
      <button>Button</button>
  </div>
</li>
Use this class to prevent automatic navigation to the url specified on an <a> tag's href attribute.
In this case, navigation can be handled programmatically by using selectionChanged event.
This is useful to execute some custom logic before browser triggers navigation.
Example
<oj-tab-bar class="oj-tabbar-nofollow-link" >
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>
.oj-tabbar-stack-icon-label
Use this class to display a horizontal Tab Bar with icons and labels stacked. Applicable only when edge is top.
Example
<oj-tab-bar class="oj-tabbar-stack-icon-label" >
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>

Category: Condense

Use this class to wrap item label text. Note: On IE11, this is not supported when overflow attribute is set to 'popup'.

Class template:

.oj-[size]-condense

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Example
<oj-tab-bar class="oj-sm-condense" >
  <ul>
    <li id="foo">
      <a href="#">
        <span class="oj-tabbar-item-icon demo-icon-font-24 demo-palette-icon-24">
        </span>
        Foo
      </a>
    </li>
  </ul>
</oj-tab-bar>

CSS Variables

See JET CSS Variables for additional details.
Name Type Description
--oj-tab-bar-icon-to-text-padding <length> Padding between icon and text
--oj-tab-bar-icon-margin <length> Tab bar icon margin
--oj-tab-bar-icon-size <length> Tab bar icon size
--oj-tab-bar-item-margin <length> Tab bar item margin
--oj-tab-bar-item-padding <length> Tab bar item padding
--oj-tab-bar-item-min-height <length> Tab bar item minimum height
--oj-tab-bar-item-line-height <number> Tab bar item line height
--oj-tab-bar-item-font-size <length> Tab bar item font size
Default
Name Type Description
--oj-tab-bar-item-font-weight <font_weight> Default tab bar item font weight
--oj-tab-bar-item-label-color <color> Default tab bar item label color
Hovered
Name Type Description
--oj-tab-bar-item-label-color-hover <color> Tab bar item label color when hovered
--oj-tab-bar-item-bg-color-hover <color> Tab bar item background color when hovered
Active
Name Type Description
--oj-tab-bar-item-bg-color-active <color> Tab bar item background color when active
--oj-tab-bar-item-border-color-active <color> Tab bar item border color when active
Selected
Name Type Description
--oj-tab-bar-item-font-weight-selected <font_weight> Tab bar item font weight when selected
--oj-tab-bar-item-label-color-selected <color> Tab bar item label color when selected
--oj-tab-bar-item-bg-color-selected <color> Tab bar item background color when selected
--oj-tab-bar-item-border-color-selected <color> Tab bar item border color when selected