Styling: Panel

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

Version:
  • 3.2.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">
  <button class="oj-panel-remove-button"
             data-bind=" ojComponent: {
                      component: 'ojButton',
                      chroming: 'half',
                      display: 'icons',
                      icons: {end: 'oj-panel-remove-icon'},
                      label: 'remove'}"></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>
  <button class="oj-panel-resize-button"
             data-bind=" ojComponent: {
                      component: 'ojButton',
                      chroming: 'half',
                      display: 'icons',
                      icons: {end: 'oj-panel-expand-icon'},
                      label: 'expand'}"></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>
  <button class="oj-panel-resize-button"
             data-bind=" ojComponent: {
                      component: 'ojButton',
                      chroming: 'half',
                      display: 'icons',
                      icons: {end: 'oj-panel-collapse-icon'},
                      label: 'collapse'}"></button>
</div>