CSSBase¶

CSSBase()¶

CSSBASE Abstract base class for CSS-styled HTML-backed MATLAB UI controls

Usage:

(abstract — subclass and call obj@CSSBase(parent, …) from the: concrete constructor, then obj.endInit() after setting properties)

Inputs:

parent : graphics container - target uifigure/uipanel/uigrid – required options : name-value pairs:

Position (1x4 double, default: [10 10 120 36]) Enabled (logical, default: true) TempDir (char, default: tempdir()) Style (char, default: ‘’) CSS (char, default: ‘’) CSSFile (char, default: ‘’) Scrollbars (logical, default: false) — when true,

the widget renders thin styled scrollbars for any overflow:auto region inside it (Table body, ListBox track, Tree wrap). When false (default) scrollbars are hidden globally; wheel/keyboard scrolling still works but there’s no visible track.

Outputs:

obj : CSSBase handle object (concrete subclass)

Notes

Every CSSBase component is a uihtml element whose content is a self-contained HTML document. CSSBase handles the full lifecycle: temp-file writing, JS bridge injection, Enabled-state queuing, CSS variable compilation, and live CSS patching without page reloads.

See also: CSSPreset, CSSuiButton, CSSuiDropdown, CSSuiListBox, CSSuiEditField, CSSuiNumericField, CSSuiSwitch, CSSuiTable, CSSuiTextArea, CSSUIProgressBar, CSSuiLabel

∿∿∿ Prerau Laboratory MATLAB Codebase · sleepEEG.org ∿∿∿

HTML / CSS ELEMENT SCHEMA¶

Every component produces an HTML document with this structure:

<body>

<div id=”css-root”> ← sizing container (CSSBase-managed)
<div class=”css-control”> ← main visual/interactive element <div class=”css-label”> ← adjacent text label (if present) <svg class=”css-icon”> ← SVG icon (if present)

</div>

</body>

Selector reference:

#css-root Outer sizing container. Width/Height/OuterPadding/: Border convenience properties map here. Receives .css-disabled when Enabled=false.
.css-control The main interactive surface — the <button>, input: wrapper, <textarea>, toggle track, dropdown wrapper, or label div, depending on the component.
.css-label Adjacent descriptive text label (EditField, Dropdown,: NumericField, Switch, TextArea only).

.css-icon SVG icon element (CSSuiButton only). #cssbase-text Span whose textContent is live-patched by JS without

a page reload (button text, label text, switch label).

.css-disabled Applied to #css-root when Enabled=false; sets opacity:0.5,: removes box-shadow on all children, and blocks pointer-events.
.css-surface Applied to the primary rendered surface; targeted by: CSSPreset hover/active/transition rules.
.css-clickable Applied to interactive surfaces; enables hover lift and: active press animations from CSSPreset.

Widget-type classes (additional class on #css-root, one per component):

.cssui-button CSSuiButton .cssui-label CSSuiLabel .cssui-edit CSSuiEditField .cssui-numeric CSSuiNumericField .cssui-textarea CSSuiTextArea .cssui-dropdown CSSuiDropdown .cssui-listbox CSSuiListBox .cssui-checkbox CSSuiCheckbox .cssui-switch CSSuiSwitch .cssui-radio CSSuiRadioGroup .cssui-search CSSuiSearchBar .cssui-table CSSuiTable .cssui-tree CSSuiTree .cssui-progressbar CSSUIProgressBar (and SmoothProgressBar)

These let one CSSPreset target widget kinds differently from a single .CSS string — e.g. ‘.cssui-button .css-surface{background:#ececec;}’ tints buttons without affecting inputs. The role classes above remain the right tool for behavior shared across kinds (clickable hover etc.).

WRITING CUSTOM CSS (obj.CSS property)¶

Use the convenience properties (Color, BackgroundColor, …) for the most common appearance changes — they compile to :root CSS variables and are always reliable. Use obj.CSS for anything not covered:

% Works identically for any component — no per-component knowledge needed: obj.CSS = ‘.css-control { text-transform: uppercase; letter-spacing: 0.08em; }’; obj.CSS = ‘.css-label { font-style: italic; }’; obj.CSS = ‘.css-icon { fill: #E53935; }’;

% Override disabled appearance (e.g. make it more faded): obj.CSS = ‘.css-disabled { opacity: 0.3; }’;

% Suppress the default hover lift on a button: btn.CSS = ‘.css-control.css-clickable:hover { transform: none; }’;

obj.CSS is injected into <style id=”cssbase-override”>, which is placed AFTER the component’s own <style> in the document. User CSS therefore wins at equal specificity — no !important needed for most overrides. Preset CSS (from the Style argument) is also in this block, but placed before obj.CSS so user rules always take priority over the preset.

CSS VARIABLE MAP (convenience properties → :root custom props)¶

Color → –color BackgroundColor → –bg-color FontSize → –font-size FontFamily → –font-family FontWeight → –font-weight FontStyle → –font-style LetterSpacing → –letter-spacing LineHeight → –line-height TextTransform → –text-transform TextDecoration → –text-decoration HorizontalAlignment → –text-align (‘left’|’center’|’right’) VerticalAlignment → –align-items (‘top’|’center’|’bottom’) BorderRadius → –border-radius BoxShadow → –box-shadow InsetShadow → –inset-shadow Opacity → –opacity Cursor → –cursor Padding → –padding Width → –width Height → –height OuterPadding → –outer-padding Border → –border AspectRatio → –aspect-ratio MinWidth → –min-width MinHeight → –min-height MaxWidth → –max-width MaxHeight → –max-height

EXTERNAL THEME FILE (obj.CSSFile property)¶

Point multiple components at a shared .css file for a consistent theme. The <link> is injected first (lowest cascade priority), so per-component properties and obj.CSS always override it:

obj.CSSFile = fullfile(pwd, ‘mytheme.css’);

CASCADE ORDER (lowest → highest priority)¶

CSSFile <link> (external theme)

infraCSS <style> (#css-root sizing, .css-disabled)

<style id=”cssbase-vars”> (:root custom property variables)

Component <style> (internal component defaults)

<style id=”cssbase-override”> (preset CSS, then obj.CSS)

SUBCLASS CONTRACT¶

Call superclass constructor first: obj@CSSBase(parent, …)
Implement html = buildHTML(obj) (Abstract, protected).
- Return a complete HTML document.
- Must include <div id=”css-root”> as the outermost body child.
- Place .css-control, .css-label, .css-icon inside #css-root.
- Reference appearance via var(–color), var(–bg-color), etc.
- May define window.componentSetup(hc) for JS initialisation.
- May define window.onCommand(cmd) for MATLAB→JS commands.
Call obj.endInit() at the END of the concrete constructor.
Override onMessage(obj, data) for custom JS→MATLAB events.

BRIDGE PROTOCOL¶

MATLAB → JS: obj.pushCmd(struct(‘cmd’,’…’, …)): ‘setEnabled’ toggle .css-disabled on #css-root ‘setCSS’ update cssbase-vars (.vars) and cssbase-override (.override) ‘setVar’ set a single CSS custom property on :root ‘setText’ patch #cssbase-text textContent ‘batch’ struct with .commands cell-array, dispatched in order (other) forwarded to window.onCommand(cmd)
JS → MATLAB: window.sendEvent({event:’…’, …}): ‘ready’ component fully initialised (after componentSetup) ‘error’ JS exception (.message field) (other) forwarded to obj.onMessage(data)