Styling: Application Shell: Web

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

Version:
  • 3.2.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">
            <button class="oj-button-lg" data-bind="click: toggleDrawer,
              ojComponent: {component:'ojButton', label: 'Application Navigation',
              chroming: 'half', display: 'icons', icons: {start: 'oj-web-applayout-offcanvas-icon'}}">
            </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.
<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>
  </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">
    </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>