Styling: Application Shell: Web

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


Version:
  • 8.0.0
Class(es) Description Example Usage
oj-web-applayout-body Place on the body tag when using oj-web-applayout-* classes. 
<body class="oj-web-applayout-body">
</body>
oj-web-applayout-offcanvas
oj-web-applayout-offcanvas-icon
 Classes for application layouts requiring a navigation drawer using Offcanvas. Note that the oj-contrast-marker class should be used on the oj-web-applayout-offcanvas element to correctly theme the navigation drawer elements. Use the oj-web-applayout-offcanvas-icon class on the Offcanvas toggle button within the header for the navigation drawer toggle image. 
<body class="oj-web-applayout-body">
  <div class="oj-offcanvas-outer-wrapper oj-offcanvas-page">
    <div class="oj-web-applayout-offcanvas oj-contrast-marker oj-offcanvas-start">
      <!-- Navigation Drawer -->
    </div>
    <div id="pageContent" class="oj-web-applayout-page">
      <div class="oj-web-applayout-header">
        <div class="oj-flex-bar oj-sm-align-items-center">
          <!-- Offcanvas toggle button -->
          <div class="oj-flex-bar-start">
            <oj-button id="drawerToggleButton" on-click="[[toggleDrawer]]" chroming="half" display="icons">
              <span slot="startIcon" class="oj-fwk-icon oj-fwk-icon-hamburger"></span>
              <span>Navigation Drawer</span>
            </oj-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
oj-web-applayout-page Class used to setup the page layout which may include a header, main content area, or footer. . 
<body class="oj-web-applayout-body">
  <div id="pageContent" class="oj-web-applayout-page">
    <!-- Header -->
    <!-- Main Content -->
    <!-- Footer -->
  </div>
</body>
oj-web-applayout-header Class used on a header element to style a web application header with styles like a background-color or height. 
<body class="oj-web-applayout-body">
  <div class="oj-web-applayout-page">
    <header class="oj-web-applayout-header">
    </header>
  </div>
</body>
oj-web-applayout-header-title Class used on a header title element to style the font properties of a web application page title. 
<header class="oj-web-applayout-header">
  <div class="oj-web-flex-bar">
    <div class="oj-flex-bar-middle">
      <h1 class="oj-web-applayout-header-title">
        <!-- Page Title -->
      </h1>
    </div>
  </div>
</header>
oj-web-applayout-content Class used on the page content element to ensure proper layout within the application layout. This class expects the use of oj-flex oj-flex-items-pad within the contents. 
<body class="oj-web-applayout-body">
  <div class="oj-web-applayout-page">
    <header class="oj-web-applayout-header">
    </header>
    <div class="oj-web-applayout-content">
      <div class="oj-flex oj-flex-items-pad">
        <div class="oj-flex-item">
          <h1>Page Title</h1>
        </div>
      </div>
    </div>
  </div>
</body>
oj-web-applayout-content-nopad Class used on the page content element to ensure proper layout within the application layout. This class has no padding, and therefore needs to be combined with appropriate padding class. See Web Padding for more information. 
<body class="oj-web-applayout-body">
  <div class="oj-web-applayout-page">
    <header class="oj-web-applayout-header">
    </header>
    <div class="oj-web-applayout-content-nopad oj-web-spacing">
    </div>
  </div>
</body>
oj-web-applayout-footer Class used on a footer element to style a web application footer with styles like a background-color or border. 
<body class="oj-web-applayout-body">
  <div class="oj-web-applayout-page">
    <div class="oj-web-applayout-content-nopad oj-web-spacing">
    </div>
    <footer role="contentinfo" class="oj-web-applayout-footer">
  </div>
</body>
oj-web-applayout-footer-item Class used on a footer child element to responsively align its content based on screen size. 
<footer role="contentinfo" class="oj-web-applayout-footer">
  <div class="oj-web-applayout-footer-item oj-web-applayout-max-width">
  </div>
</footer>
oj-web-applayout-navbar Place around the JET navigation list element to style a web application navigation bar. 
<header class="oj-web-applayout-header">
  <div class="oj-flex-bar">
    <!-- Page Title -->
  </div>
  <div role="navigation" class="oj-web-applayout-navbar">
  </div>
</header>
oj-web-applayout-max-width Place on elements to restrict their max-width to the maixmum application page width. 
<div class="oj-web-applayout-header">
  <div class="oj-flex-bar oj-web-applayout-max-width">
  </div>
</div>

<div class="oj-web-applayout-navbar oj-web-applayout-max-width">
  <!-- Navigation Content -->
</div>