Styling: Panel

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


Version:
  • 8.0.0
Class(es) Description Example Usage
oj-panel this class can be placed on an element to create a default panel. Add the marker class oj-selected onto the same dom element to show the panel as selected. 
<div class="oj-panel">
  // content
</div>
oj-panel-alt[1-5] this class can be placed on an element for alternate colored panels. 
<div class="oj-panel oj-panel-alt3">
  // content
</div>
oj-panel-shadow-sm
oj-panel-shadow-md
oj-panel-shadow-lg
 gives a panel some depth. 
<div class="oj-panel oj-panel-shadow-md">
  // content
</div>
oj-panel-drag-handle
oj-panel-drag-icon
 these classes can be used to create a drag handle. 
<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>
oj-panel-remove-button
oj-panel-remove-icon
 these classes can be used to create a remove button. 
<div class="oj-panel">
  <oj-button class="oj-panel-remove-button demo-button"
             chroming="half"
             display="icons">
    <span slot="startIcon" class="oj-panel-remove-icon"></span>
    <span>remove</span>
  </oj-button>
  <div>panel content</div>
</div>
oj-panel-resize-button
oj-panel-expand-icon
 these classes can be used to create an expand button. 
<div class="oj-panel">
  <div>panel content</div>
  <oj-button class="oj-panel-resize-button demo-button"
             chroming="half"
             display="icons">
    <span slot="startIcon" class="oj-panel-expand-icon"></span>
    <span>expand</span>
  </oj-button>
</div>
oj-panel-resize-button
oj-panel-collapse-icon
 these classes can be used to create a collapse button. 
<div class="oj-panel">
  <div>panel content</div>
    <oj-button class="oj-panel-resize-button demo-button"
             chroming="half"
             display="icons">
      <span slot="startIcon" class="oj-panel-collapse-icon"></span>
      <span>collapse</span>
    </oj-button>
</div>