Styling: AppShellWeb

Oracle® JavaScript Extension Toolkit (JET)
9.0.0

F24343-01

Version:
  • 9.0.0
AppShellWeb - Application Shell: Web
.oj-web-applayout-header-title
Class used on a header title element to style the font properties of a web application page title.
Example
<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-body
Place on the body tag when using oj-web-applayout-* classes.
Example
<body class="oj-web-applayout-body">
</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 classes.

See AppShellWebPadding for more information.
Example
<body class="oj-web-applayout-body">
 <div id="pageContent" class="oj-web-applayout-page">
   <div class="oj-web-applayout-content-nopad">
   </div>
 </div>
</body>
Class used on a footer element to style a web application footer with styles like a background-color or border.
Example
<body class="oj-web-applayout-body">
 <div id="pageContent" class="oj-web-applayout-page">
   <div class="oj-web-applayout-content">
   </div>
   <footer role="contentinfo" class="oj-web-applayout-footer">
   </footer>
 </div>
</body>
Class used on a footer child element to responsively align its content based on screen size.
Example
<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-header
Class used on a header element to style a web application header with styles like a background-color or height.
Example
<body class="oj-web-applayout-body">
 <div id="pageContent" class="oj-web-applayout-page">
   <header class="oj-web-applayout-header">
   </header>
 </div>
</body>
.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 and oj-flex-items-pad within the contents.
Example
<body class="oj-web-applayout-body">
 <div id="pageContent" 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-max-width
Place on elements to restrict their max-width to the maixmum application page width.
Example
<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>
.oj-web-applayout-navbar
Place around the JET navigation list element to style a web application navigation bar.
Example
<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-offcanvas
Class for application layouts requiring a navigation drawer using Off-Canvas.

Note that the oj-contrast-marker class should be used on the oj-web-applayout-offcanvas element to correctly theme the navigation drawer elements.
Example
<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="borderless" 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-offcanvas-icon
Class for application layouts requiring a navigation drawer using Off-Canvas.

Apply this class on the Off-Canvas toggle button within the header for the navigation drawer toggle image. See the oj-web-applayout-offcanvas example for more information.
.oj-web-applayout-page
Class used to setup the page layout which may include a header, main content area, or footer.
Example
<body class="oj-web-applayout-body">
 <div id="pageContent" class="oj-web-applayout-page">
   <!-- Header -->
   <!-- Main Content -->
    <!-- Footer -->
 </div>
</body>