Meter
Show a value within a known range.
use herogpui::components::meter::Meter;Meter on docs.rsSource at v0.14.0
Usage
Showing Usage, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.
Labels and values use 14px text with a 20px line height, independent of the surrounding text style. Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.
use herogpui::prelude::Meter;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
let value = self.meter_value;
gpui::div()
.flex()
.flex_col()
.items_start()
.justify_center()
.gap(px(12.))
.children(vec![gpui::div()
.w(px(256.))
.child(
Meter::new("meter-usage", value)
.label("Disk usage")
.radius(px(4.))
.show_value(true),
)
.into_any_element()])Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.
use herogpui::prelude::{Color, Meter};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
let value = self.meter_value;
gpui::div()
.flex()
.flex_col()
.items_start()
.justify_center()
.gap(px(12.))
.children(Color::ALL
.iter()
.enumerate()
.map(|(index, c)| {
let key = format!("meter-color-{c:?}");
gpui::div()
.w(px(256.))
.child(Meter::new(("meter-color", index), value).color(*c))
.into_any_element()
}))Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.
use herogpui::prelude::{Meter, Size};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
let value = self.meter_value;
gpui::div()
.flex()
.flex_col()
.items_start()
.justify_center()
.gap(px(12.))
.children(Size::ALL
.iter()
.enumerate()
.map(|(index, s)| {
let key = format!("meter-size-{s:?}");
gpui::div()
.w(px(256.))
.child(Meter::new(("meter-size", index), value).size(*s))
.into_any_element()
}))Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.
use herogpui::prelude::Meter;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
let value = self.meter_value;
gpui::div()
.flex()
.flex_col()
.items_start()
.justify_center()
.gap(px(12.))
.children(vec![gpui::div()
.w(px(256.))
.child(Meter::new("meter-no-label", value))
.into_any_element()])An element expression with window: &mut Window and cx: &mut App in scope.
use herogpui::prelude::Meter;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
gpui::div()
.flex()
.flex_col()
.items_start()
.justify_center()
.gap(px(12.))
.children(vec![gpui::div()
.w(px(256.))
.child(Meter::new("meter-custom-scale", 320.)
.min_value(0.)
.max_value(500.)
.label("Storage")
.show_value(true)
.format_options(herogpui::core::NumberFormat::unit("GB")))
.into_any_element()])Anatomy
Rust types
Meter is assembled from these builders. The API reference lists each one.
Customization
Shared appearance belongs on ThemeBuilder::components and .recipe("name"). Typed builders change how Meter looks at one call site. Every builder also carries sx for placement, width and flex: it takes GPUI's own styling methods and refines them over the component's root after the theme, so an instance override wins. Behaviour builders live in the API reference below.
Styling
| Method | Values | Description |
|---|---|---|
size(Size) | Size::Sm | Size::Md | Size::Lg | Selects the meter track thickness. |
color(Color) | Color::Default | Color::Accent | Color::Success | Color::Warning | Color::Danger | Semantic color of the fill bar. |
// The one slot for caller-owned low-level styling: GPUI's
// styling methods, refined over the root element last.
.sx(|el| {
el.bg(gpui::rgba(0xffa500ff)) // background
.text_color(gpui::rgba(0x000000ff)) // text
.w(gpui::px(13.)) // size
.h(gpui::px(12.))
})API reference
Against HeroUI v3.2.6: 9 entries ported, 6 partial, 0 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.
Builders
| Builder | Values | Default | Description |
|---|---|---|---|
new( | number | 0 | Current value within the configured range. |
min_value( | number | 0 | Minimum value used to normalize the fill. |
max_value( | number | 100 | Maximum value used to normalize the fill. |
size( | Size:: | Size:: | Selects the meter track thickness. |
color( | Color:: | Color:: | Semantic color of the fill bar. |
format_options(Partial | Intl. | {style: 'percent'} | Formats the value label; covers common numeric styles without caller-selected locale data. |
value_label(Partial | AnyElement | — | Replaces the generated value text; accepts text or a value render closure. |
label(Partial | AnyElement | | — | Composes a label and output renderer while track and fill remain built in. |
value_content( | number | — | Normalized percentage handed to the output renderer. |
Parts
| Part | Description |
|---|---|
Meter | Root meter state and layout owner. |
MeterPartial | Formatted output beside the label, customizable through the value closure. |
MeterPartial | Clipped default-color track delegated to ProgressBar. |
MeterPartial | Semantic fill proportional to the normalized value. |
States
| State | Builder | Description |
|---|---|---|
Determinate | ProgressBar::value | Fill width and output follow the normalized value. |