Styling: AppShellHybridMobile

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Description

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

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

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

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-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-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-color-invert 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-color-invert 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-show-context-menu

Place on the body tag to enable text selection and context menu in a hybrid mobile application.

This results in disabling the suppression of context menu and popups, triggered for copy and paste or links. By default the context menu is suppressed. Application developer needs to add this class in body tag to override the default behaviour.

Example

<body class="oj-hybrid-show-context-menu">
</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.

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>