WebDev Bites: ViewSplitterBar Component Interface

two-panel viewer with draggable splitter and bottom resizer

About Introduction Demo Design Interface 
function add(a, b) {
  return a + b;
}

console.log(add(3, 4));
def add(a, b):
    return a + b

print(add(3, 4))
 ViewSplitterBar is a W3C web component that displays two side-by-side panels separated by a draggable vertical splitter and a draggable bottom resizer. It exposes attributes for sizing, colors, split ratio, and optional Prism syntax highlighting. Drag the vertical bar to redistribute width between panels; total width stays fixed. Drag the strip at the bottom edge to change height. Click either panel to shift the split by one step-px increment.

1.0 - Use in Application

Place this in your page wherever you want a resizable two-panel view: 
  <view-splitter-bar width="min(60rem, 100%)" height="20rem"
    left-ratio="0.5" highlight="prism">
    <pre slot="left"><code class="language-cpp">
      // C++ code
    </code></pre>
    <pre slot="right"><code class="language-rust">
      // Rust code
    </code></pre>
  </view-splitter-bar>
The required script and stylesheet are: 

      <link rel="stylesheet" href="Components/ViewSplitterBarComponent/css/ViewSplitterBar.css">
      <script src="Components/ViewSplitterBarComponent/js/ViewSplitterBar.js" defer></script>
For Prism syntax highlighting, also load Prism before the component script: 

      <link rel="stylesheet" href="../css/prism.css">
      <script src="../js/prism.js"></script>

2.0 - ViewSplitterBar Interface

Interface surface What it does Example
width (attribute) Total component width. Accepts any CSS length or min() expression. 
<view-splitter-bar width="min(60rem, 100%)"></view-splitter-bar>
height (attribute) Initial panel height (px or rem). Draggable after render; attribute is not consulted again after the first drag. 
<view-splitter-bar height="20rem"></view-splitter-bar>
left-ratio (attribute) Initial fraction of total width given to the left panel. Default: 0.5. Re-applied on page resize. 
<view-splitter-bar left-ratio="0.4"></view-splitter-bar>
bar-width (attribute) Thickness of both the vertical splitter and the bottom resizer. Default: 6px. 
<view-splitter-bar bar-width="8px"></view-splitter-bar>
bar-color (attribute) Color of both the splitter and the resizer. Default: #888. 
<view-splitter-bar bar-color="#666"></view-splitter-bar>
bg-color (attribute) Background color of both panels. Accepts any CSS color value or custom property. 
<view-splitter-bar bg-color="var(--light)"></view-splitter-bar>
color (attribute) Text color of both panels. 
<view-splitter-bar color="var(--dark)"></view-splitter-bar>
overflow-x (attribute) Horizontal overflow policy for both panels. Default: auto. 
<view-splitter-bar overflow-x="scroll"></view-splitter-bar>
code-padding (attribute) Padding applied inside each panel's slotted <pre>. Default: 0.75rem 1rem. 
<view-splitter-bar code-padding="0.5rem 0.75rem"></view-splitter-bar>
highlight (attribute) Set to "prism" to enable Prism.js syntax highlighting on slotted <code> elements. 
<view-splitter-bar highlight="prism"></view-splitter-bar>
step-px (attribute) Pixels transferred between panels per click. Default: 40. 
<view-splitter-bar step-px="60"></view-splitter-bar>
min-panel-px (attribute) Minimum width in pixels for either panel when dragging or clicking. Default: 120. 
<view-splitter-bar min-panel-px="160"></view-splitter-bar>
min-height-px (attribute) Minimum container height in pixels when dragging the bottom resizer. Default: 80. 
<view-splitter-bar min-height-px="120"></view-splitter-bar>
Slot: left Content for the left panel. Use a bare <pre> for plain text, or <pre><code class="language-*"> for Prism mode. 
<view-splitter-bar>
  <pre slot="left">Left content</pre>
</view-splitter-bar>
Slot: right Content for the right panel. Same structure as the left slot. 
<view-splitter-bar>
  <pre slot="right">Right content</pre>
</view-splitter-bar>
Drag splitter (behavior) Mouse-drag the vertical bar left or right to redistribute width between panels. Total component width stays fixed. 
// drag splitter → left and right panels exchange width
Drag resizer (behavior) Mouse-drag the horizontal strip at the bottom edge to change the height of both panels together. 
// drag resizer → component height grows or shrinks
Click left panel (behavior) Transfers step-px pixels from the right panel to the left panel, clamped to min-panel-px. 
// click left panel → left panel grows by step-px
Click right panel (behavior) Transfers step-px pixels from the left panel to the right panel, clamped to min-panel-px. 
// click right panel → right panel grows by step-px
CSS parts: container, panel-left, panel-right, splitter, resizer All five shadow DOM structural elements are exposed via part for external styling with ::part(). 
view-splitter-bar::part(splitter) {
  background: navy;
}
Events No custom events are dispatched. All state changes (width, height) happen internally via inline style. 
// no custom events in current build