ControlBarSpacer

A non-interactive spacer that renders as a vertical separator in a control bar and as a horizontal separator in the overflow popper.

Import

import { ControlBarSpacer } from "@schukai/monster/source/components/form/control-bar-spacer.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Purpose and scope

A non-interactive spacer that renders as a vertical separator in a control bar and as a horizontal separator in the overflow popper.

This page documents the <monster-control-bar-spacer> custom element. Use the Usage examples for a working starting point and the API tab for the complete public contract.

When to use it

Use this module when its focused responsibility matches the surrounding workflow. Prefer its public options, properties, methods and events over reaching into rendered internals.

Control Bar Spacing

This example shows monster-control-bar with grouped actions, a native input and monster-control-bar-spacer. Resize the available width to see controls move into overflow and watch the layout event update the status text.

Available width

Save

Preview

Export

Javascript

import "@schukai/monster/source/components/form/button.mjs";
import "@schukai/monster/source/components/form/control-bar.mjs";
import "@schukai/monster/source/components/form/control-bar-spacer.mjs";

await customElements.whenDefined("monster-control-bar");

const widthInput = document.getElementById("control-bar-width");
const frame = document.getElementById("control-bar-frame");
const controlBar = document.getElementById("workflow-control-bar");
const status = document.getElementById("control-bar-status");

let layoutSummary = "waiting for first layout event";

const updateStatus = () => {
  status.textContent =
    "Width: " + widthInput.value + "px. Layout: " + layoutSummary + ".";
};

const updateWidth = () => {
  frame.style.maxWidth = widthInput.value + "px";
  updateStatus();
};

controlBar.addEventListener("monster-control-bar-layout-changed", (event) => {
  const detail = event.detail;
  layoutSummary =
    (detail.stacked ? "stacked" : "inline") +
    ", alignment " +
    detail.alignment;
  updateStatus();
});

widthInput.addEventListener("input", updateWidth);
updateWidth();

HTML

<section class="control-bar-example">
  <label class="control-bar-width-control" for="control-bar-width">
    Available width
    <input id="control-bar-width" type="range" min="260" max="760" step="10" value="420" />
  </label>

  <div id="control-bar-frame" class="control-bar-frame">
    <monster-control-bar
      id="workflow-control-bar"
      data-monster-option-layout-alignment="left"
      data-monster-option-layout-stacked-breakpoint="340px"
      data-monster-option-layout-stacked-alignment="center"
      data-monster-option-layout-stacked-breakpoint-container="#control-bar-frame"
    >
      <monster-button>Save</monster-button>
      <monster-button>Preview</monster-button>
      <monster-control-bar-spacer></monster-control-bar-spacer>
      <input aria-label="Filter records" placeholder="Filter records" />
      <monster-button>Export</monster-button>
      <monster-button>Archive</monster-button>
    </monster-control-bar>
  </div>

  <p id="control-bar-status" class="control-bar-status">
    Width: 420px. Layout changes are reported by monster-control-bar-layout-changed.
  </p>
</section>

Stylesheet

.control-bar-example {
  display: grid;
  gap: var(--monster-space-4);
}

.control-bar-width-control {
  color: var(--monster-color-primary-1);
  display: grid;
  gap: var(--monster-space-2);
}

.control-bar-frame {
  background: var(--monster-bg-color-primary-1);
  border-color: var(--monster-color-border-primary-2);
  border-radius: var(--monster-border-radius);
  border-style: var(--monster-border-style);
  border-width: var(--monster-border-width);
  max-width: 420px;
  padding: var(--monster-space-3);
}

.control-bar-frame input {
  min-width: 10rem;
}

.control-bar-status {
  color: var(--monster-color-primary-1);
  margin: 0;
}

Open in playground

Runtime Control Bar Layout

Combines a flexible spacer with runtime alignment through the ControlBar layout options.

Save

Cancel

Javascript

import "@schukai/monster/source/components/form/control-bar.mjs";
import "@schukai/monster/source/components/form/control-bar-spacer.mjs";
import "@schukai/monster/source/components/form/button.mjs";

const bar = document.getElementById("runtime-control-bar");
document.getElementById("runtime-control-bar-align").addEventListener("click", () => {
  bar.setOption("layout.alignment", "center");
});

HTML

<section style="display:grid;gap:var(--monster-space-3)">
  <monster-control-bar id="runtime-control-bar">
    <monster-button>Save</monster-button>
    <monster-control-bar-spacer></monster-control-bar-spacer>
    <monster-button>Cancel</monster-button>
  </monster-control-bar>
  <button id="runtime-control-bar-align" type="button">Center actions</button>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

monster-control-bar-spacer provides a semantic separator inside a Monster control bar without owning application behavior.

Layout

The separator part is the stable styling hook. Adjust its size and contrast while preserving the surrounding control bar's alignment.

HTML Structure

<monster-control-bar-spacer></monster-control-bar-spacer>

JavaScript Initialization

const element = document.createElement('monster-control-bar-spacer');
document.body.appendChild(element);

Exported

ControlBarSpacer

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

-/-

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

No description available.

getTag()

Returns

{string}

No description available.

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Components.Form.ControlBarSpacer}

No description available.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.