Styling: Application Shell: Hybrid Mobile

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01


Version:
  • 8.0.0
Class(es) Description Example Usage
oj-hybrid Place on the body tag to suppress 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. 
<body class="oj-hybrid">
</body>
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. 
<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>
oj-hybrid-applayout-offcanvas Class for application layouts requiring a navigation drawer using Offcanvas. Note that the oj-contrast-marker class should be used on the oj-hybrid-applayout-offcanvas element to correctly theme the navigation drawer elements. Note the required oj-offcanvas-* classes needed in the sample HTML below. 
<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 of use in navigation drawer and main page of an application with Offcanvas -->
<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-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. 
<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-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. 
<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
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. 
<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-applayout-header-icon-back Class used for the header back arrow icon. 
<div class="oj-flex-bar-start">
  <oj-button display="icons" chroming="half">
    <span slot="startIcon" class="oj-hybrid-applayout-header-icon-back oj-fwk-icon"></span>
    <span>Back</span>
  </oj-button>
</div>
oj-hybrid-applayout-content Class used on the page content element to ensure proper layout within the application layout. 
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header">
    </header>
  </div>
  <div class="oj-applayout-content">
    <div class="oj-hybrid-applayout-content">
    </div>
  </div>
</div>
oj-hybrid-applayout-footer 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. 
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header">
    </header>
  </div>
  <div class="oj-applayout-content">
    <div class="oj-hybrid-applayout-content">
    </div>
  <div class="oj-applayout-fixed-bottom">
    <footer role="contentinfo" class="oj-hybrid-applayout-footer">
    </footer>
  </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. 
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header">
    </header>
  </div>
  <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-applayout-navbar-page Place around the 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. 
<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-navbar-app Place around the 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. 
<div class="oj-hybrid-applayout-page">
  <div class="oj-applayout-fixed-top">
    <header class="oj-hybrid-applayout-header">
    </header>
  </div>
  <div class="oj-applayout-content">
    <div class="oj-hybrid-applayout-content">
    </div>
  <div class="oj-applayout-fixed-bottom">
    <div role="navigation" class="oj-hybrid-applayout-navbar-app">
    </div>
  </div>
</div>