Styling: AppShellWeb

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-01

Description

AppShellWeb - Application Shell: Web

.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

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

.oj-web-applayout-footer

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>

.oj-web-applayout-footer-item

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