Styling: AppShellHybridMobile

Oracle® JavaScript Extension Toolkit (JET)
9.0.0

F24343-01

Version:
  • 9.0.0
PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.
.oj-hybrid-applayout-header-title
Classes used on a header title element to align and style the text of a hybrid mobile application page title.

For accessibility, this class should be set on an h1 header tag.
Example
<div class="oj-applayout-fixed-top">
  <header class="oj-hybrid-applayout-header">
    <div class="oj-hybrid-applayout-bar-title">
      <h1 class="oj-hybrid-applayout-header-title">
        <!-- Page Title -->
      </h1>
    </div>
  </header>
</div>
.oj-hybrid
Place on the body tag to indicate this is a hybrid mobile application.

This results in suppression of context menus and popups, triggered for copy and paste or links. Note that copy and paste is not surpressed for input and textarea elements. This class will be added by the tooling CLI when compiling starter templates for mobile platforms.
Example
<body class="oj-hybrid">
</body>
.oj-hybrid-applayout-content
Class used on the page content element to ensure proper layout within the application layout.
Example
<div class="oj-applayout-fixed-top">
  <header class="oj-hybrid-applayout-header">
  </header>
  <div class="oj-applayout-content">
    <div class="oj-hybrid-applayout-content">
    </div>
  </div>
</div>
Class used on a footer element to style a hybrid mobile application header with styles like a background-color or border.

Note that, in some themes, the footer may not have a border and that a footer should not be used with a bottom positioned navigation bar.
Example
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header">
    </header>
  <div class="oj-applayout-content">
    <div class="oj-hybrid-applayout-content">
    </div>
  </div>
   <div class="oj-applayout-fixed-bottom">
     <footer role="contentinfo" class="oj-hybrid-applayout-footer">
     </footer>
   </div>
</div>
.oj-hybrid-applayout-header
Class used on a header element to style a hybrid mobile application header with styles like a background-color or border.

Note that, in some themes, the header may not have a border.
Example
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header">
    </header>
  </div>
</div>
.oj-hybrid-applayout-header-icon-back
Class used for the header back arrow icon.
Example
<div class="oj-flex-bar-start">
  <oj-button display="icons" chroming="borderless">
    <span slot="startIcon" class="oj-hybrid-applayout-header-icon-back oj-fwk-icon"></span>
    <span>Back</span>
  </oj-button>
</div>
.oj-hybrid-applayout-header-no-border
Class used on a header element to style a borderless application header with styles like a background-color.

This class should be used instead of oj-hybrid-applayout-header when using a fixed top navigation bar.
Example
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header-no-border">
    </header>
    <div class="oj-hybrid-applayout-navbar-page">
    </div>
  </div>
</div>
.oj-hybrid-applayout-bar-title
Classes used on a bar title element to align and style the text of a hybrid mobile application page title.

For accessibility, this class should be set on an h1 header tag.
Example
<div class="oj-applayout-fixed-top">
  <header class="oj-hybrid-applayout-header">
    <div class="oj-hybrid-applayout-bar-title">
      <!-- Header Title -->
    </div>
  </header>
</div>
.oj-hybrid-applayout-navbar-app
Place around an ojNavigationList element to style a hybrid mobile application navigation bar that is always placed at the bottom of the page.

The navigationLevel option for the ojNavigationList should be set to 'application' to get the correct look for a bottom positioned navigation bar. Note that a footer is not recommended when using a fixed bottom navigation bar.
Example
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header">
    </header>
  <div class="oj-applayout-content">
    <div class="oj-hybrid-applayout-content">
    </div>
  </div>
   <div class="oj-applayout-fixed-bottom">
     <div role="navigation" class="oj-hybrid-applayout-navbar-app">
     </div>
   </div>
 </div>
.oj-hybrid-applayout-navbar-page
Place around an ojNavigationList element to style a hybrid mobile application navigation bar that is always placed at the top of the page, under the header if applicable.

The navigationLevel option for the ojNavigationList should be set to 'page' to get the correct look for a top-positioned navigation bar. Please also see the oj-hybrid-applayout-header-no-border class if the page also contains a header.
Example
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header-no-border">
    </header>
    <div role="navigation" class="oj-hybrid-applayout-navbar-page">
    </div>
  </div>
</div>
.oj-hybrid-applayout-offcanvas
Class for hybrid application layouts using Off-Canvas.

This results in suppression of context menus and popups, triggered for copy and paste or links. Note that copy and paste is not surpressed for input and textarea elements. This class will be added by the tooling CLI when compiling starter templates for mobile platforms.
Example
<div class="oj-offcanvas-outer-wrapper oj-offcanvas-page">
  <div class="oj-hybrid-applayout-offcanvas oj-contrast-marker oj-offcanvas-start">
    <!-- Navigation Drawer -->
  </div>
</div>
.oj-hybrid-applayout-page
Class used to setup the page layout which may include a header, main content area, or footer/navigation bar.
Example
<div class="oj-offcanvas-outer-wrapper oj-offcanvas-page">
  <div class="oj-hybrid-applayout-offcanvas oj-contrast-marker oj-offcanvas-start">
  </div>
  <div id="pageContent" class="oj-hybrid-applayout-page">
    <!-- Header -->
    <!-- Main Content -->
    <!-- Footer or Navigation Bar -->
  </div>
</div>
.oj-hybrid-applayout-toolbar-stretch
Place on an element containing JET buttons to theme buttons that will stretch to the full width and height of its container. This pattern is most commonly seen in a hybrid mobile application footer toolbar.
Example
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header">
    </header>
  <div class="oj-applayout-content">
    <div class="oj-hybrid-applayout-content">
    </div>
  </div>
  <div class="oj-applayout-fixed-bottom">
    <footer role="contentinfo" class="oj-hybrid-applayout-footer">
       <div class="oj-hybrid-applayout-toolbar-stretch">
       </div>
    </footer>
  </div>
</div>
.oj-hybrid-statusbar-spacer
Place on the body tag for hybrid mobile applications to correctly pad and space the application header and title for overlaid statusbars.

Note that this class may not have an effect on all mobile platforms and that the effect may only be seen when running on an actual device or emulator. This class will be added by the tooling CLI when compiling starter templates for mobile platforms.
Example
<body class="oj-hybrid oj-hybrid-statusbar-spacer">
  <div class="oj-hybrid-applayout-page">
    <div class="oj-applayout-fixed-top">
      <header class="oj-hybrid-applayout-header">
      </header>
    </div>
  </div>
</body>