Styling: Panel

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

Description

Style classes handling the Panel display


.oj-panel
This class can be placed on an element to create a default panel.
Example
<div class="oj-panel">
   <!--  content -->
</div>
.oj-panel-border-radius-0
Place on a panel to show it as selected
Example
<div class="oj-panel oj-panel-border-radius-0">
   <!--  content -->
<div>
.oj-panel-padding
Panel has padding by default, this class gives default panel padding to a non-panel so things line up, it would be used on something like an oj-action-card. This class uses the !important rule.
Example
.oj-selected
Place on a panel to show it as selected
Example
<div class="oj-panel oj-selected">
   <!--  content -->
<div>

Category: Panel Color

This class can be placed on an element for alternate colored panels.

Class template:

.oj-panel-[alt1-5]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [alt1-5]

Value (required) Name Description
alt1 Panel color white alt1 color white
alt2 Panel color blue alt2 color blue
alt3 Panel color yellow alt3 color yellow
alt4 Panel color pink alt4 color pink
alt5 Panel color grey alt5 color grey

Deprecated:
Since Description
9.0.0 use oj-bg-* classes instead.
Since:
  • 4.0.0
Example
<div class="oj-panel oj-panel-alt3">
    <!--  content -->
</div>

Category: Panel Border Radius

Classes to remove default border radius for different corners.

Classes:

.oj-panel-border-radius-0-top-start
.oj-panel-border-radius-0-top-end
.oj-panel-border-radius-0-bottom-start
.oj-panel-border-radius-0-bottom-end

Example
<div class="oj-panel oj-panel-border-radius-0-top-start">
   <!--  content -->
</div>

Category: Panel Collapse

Classes that can be used for panel collapse functionality.

Classes:

.oj-panel-resize-button
.oj-panel-collapse-icon

Example
<div class="oj-panel>
   <div>panel content</div>
   <oj-button class="oj-panel-resize-button demo-button" chroming="borderless" display="icons">
     <span slot="startIcon" class="oj-panel-collapse-icon"></span>
     <span>collapse</span>
   </oj-button>
   <div>panel content</div>
</div>

Category: Panel Depth

Classes that gives a panel some depth.

Classes:

.oj-panel-shadow-xs
.oj-panel-shadow-sm
.oj-panel-shadow-md
.oj-panel-shadow-lg
.oj-panel-shadow-xl

Example
<div class="oj-panel oj-panel-shadow-md">
   <!--  content -->
</div>

Category: Panel Drag

Classes that can be used to create a panel drag handle.

Classes:

.oj-panel-drag-handle
.oj-panel-drag-icon

Example
<div class="oj-panel>
  <div class="oj-panel-drag-handle" title="Drag to reorder">
    <span class="oj-panel-drag-icon"></span>
  </div>
  <div>panel content</div>
</div>

Category: Panel Expand

Classes that can be used for panel expand functionality.

Classes:

.oj-panel-resize-button
.oj-panel-expand-icon

Example
<div class="oj-panel>
  <div>panel content</div>
  <oj-button class="oj-panel-resize-button demo-button" chroming="borderless" display="icons">
     <span slot="startIcon" class="oj-panel-expand-icon"></span>
     <span>expand</span>
  </oj-button>
  <div>panel content</div>
</div>

Category: Panel Remove

Classes that can be used to create a panel remove button.

Classes:

.oj-panel-remove-button
.oj-panel-remove-icon

Example
<div class="oj-panel>
  <oj-button class="oj-panel-remove-button demo-button" chroming="borderless" display="icons">
    <span slot="startIcon" class="oj-panel-remove-icon"></span>
    <span>remove</span>
  </oj-button>
  <div>panel content</div>
 </div>