Styling: Panel

Oracle® JavaScript Extension Toolkit (JET)
5.0.0

E90577-01

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 5.0.0
Module:
  • jsdoc
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>