UxPercentBar
components/ux/PercentBar.vue
Horizontal progress bar with grape fill and optional title label.
CPU usage
Memory
Disk
Scenarios
Default
1.4K
240
61
Compact — dense panel rows (c59 SurfacePanel)
1.4K
240
61
Solid — inverted title, clipped at the fill's end
1.4K
240
61
titlePosition left
1.4K
240
61
titlePosition right
1.4K
240
61
thin + titleSize 10 — the DataRankedBars row
1.4K
240
61
solid + outlined + thin — the c100 meter (a whole with a readable gap)
components/ux/PercentBar.vue
Usage
<UxPercentBar
title = "—"
:percent = "0"
:compact = "false"
:solid = "false"
:titlePosition = "inside"
:thin = "false"
:titleSize = "titleSize"
:outlined = "false"
>
Content here
</UxPercentBar>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | String | '' | Label above the bar |
| percent | Number | 0 | Fill percentage (0-100) |
| compact | Boolean | false | Dense mode for tight contexts (SurfacePanel compact): 9px label with 11px line-height and tighter padding — the h-full fill band shrinks with it |
| solid | Boolean | false | High-contrast fill — the content color (black in light, white in dark) instead of the pale primary tint. An inside title is drawn twice, the top copy in the surface color clipped to the fill, so it reads inverted over the bar and normal past its end. |
| titlePosition | 'inside' | 'left' | 'right' | 'inside' | inside overlays the title on the start of the bar; left / right give it its own right-aligned column before / after the bar (at right, stacked bars' numbers align on their last digit). |
| thin | Boolean | false | Half-height bar (6 px), centered on the title. Side titles only — an inside title needs the full bar behind it. |
| titleSize | Number | undefined | Title font-size override in px (compact default 9; line-height follows at +2 px) |
| outlined | Boolean | false | The unfilled rest as an outlined surface track (rounded, 1 px content outline) — the whole and its gap both read. With solid + thin it is the c100 meter (lever-strip Coverage / Harness). Side-title layout; with no title, the bar alone |
Slots
| Slot | Description |
|---|---|
| default | Additional content below the bar |