Segment Display
A 7- or 16-segment digital readout. It reads as instrumentation rather than as a web page, which suits a panel screen mimicking a physical display.
Reach for it when you need:
- A prominent readout on a machine-side panel
Component name: SegmentDisplay · Category: Display
In the palette: 7- or 16-segment digital readout for floating-point values
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
value | number | 42.5 | Numeric value (floating point supported). Ignored when Text is set. |
text | string | "" | Literal text to display (uppercased) — overrides Value. Best with the 16-segment variant. |
variant | enum | seven | Segment set. Options: seven · sixteen. |
length | number | 4 | Number of character cells (field width). |
decimals | number | 1 | Fraction digits shown. |
leadingZeros | boolean | false | Pad the integer side with 0s instead of blanks. |
align | enum | right | Options: left · center · right. |
onColor | color | #ffb000 | — |
offColor | color | rgba(255,176,0,0.10) | Unlit (ghost) segment colour. |
showOffSegments | boolean | true | Draw unlit segments faintly (classic LED look). |
background | color | #0b0f14 | — |
radius | number | 6 | — |
padding | number | 10 | — |
slant | number | 0 | Italic skew in degrees (0 = upright). |
glow | boolean | false | Subtle bloom around lit segments. |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
Right-click behaves differently in the Designer
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.