-
.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>
-
.oj-tabbar-nofollow-link
-
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
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 |