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
components/ux/PercentBar.vue
Usage
<UxPercentBar
title = "—"
:percent = "0"
:compact = "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 |
Slots
| Slot | Description |
|---|---|
| default | Additional content below the bar |