MeterGroup

Multi-segment meter with legend

Parts of a whole on one bar — storage by file type, a budget by category, votes by option — with a legend that names each part, its value and its share. With max the bar is "used of available" and the remainder stays grey; without it the segments are shares of their own sum and fill the bar.

Colours come from --bless-color-chart-1..5 in order; a segment's color can be any token key (text-muted, accent) or a CSS colour. format shapes the values; the #legend slot ({ segment, percent }) replaces a legend row. orientation="vertical" stands the bar up with the legend beside it. The bar is a role="meter" whose value is the sum, read through format ("75 GB of 100 GB"); the segments are decoration and the legend carries the detail.

One value on a bar is Progress; more than a handful of segments, or segments over time, is a Chart.

Basic

• Video42 GB · 42%
• Images18 GB · 18%
• Docs9 GB · 9%
• Other6 GB · 6%

• Video42 · 61%
• Images18 · 26%
• Docs9 · 13%

<script setup lang="ts">
import { BlessMeterGroup } from "blessing-ui";
const segs = [
  { label: "Video", value: 42 },
  { label: "Images", value: 18 },
  { label: "Docs", value: 9 },
  { label: "Other", value: 6, color: "text-muted" },
];
</script>

<template>
  <div class="col" style="max-width: 480px">
    <BlessMeterGroup :segments="segs" :max="100" label="Storage" :format="(v) => `${v} GB`" />
    <BlessMeterGroup
      :segments="segs.slice(0, 3)"
      label="Votes"
      orientation="vertical"
      style="margin-top: 16px"
    />
  </div>
</template>

Usage

import { BlessMeterGroup } from "blessing-ui";

API

Props

Name	Type	Default	Description
segments*	BlessMeterSegment[]	—
max	number	—
label	string	"Usage"
legend	boolean	true	show the legend
format	((v: number) => string)	—
orientation	"horizontal" | "vertical"	"horizontal"

Slots

Name	Scope	Description
legend	{ segment: BlessMeterSegment; percent: number; }