47 lines
1.8 KiB
Plaintext
47 lines
1.8 KiB
Plaintext
@using System.Globalization
|
|
@* Generic progress bar. Value: 0.0 to 1.0. Color: Bootstrap color name (primary, success, etc). Size: sm (default), md, lg. Segments for stacked mode. *@
|
|
@if (Segments is not null and { Count: > 0 }) {
|
|
<div class="progress-stacked" style="height: @Height">
|
|
@foreach (var seg in Segments) {
|
|
<div class="progress" role="progressbar" style="width: @((seg.Width * 100).ToString(CultureInfo.InvariantCulture))%">
|
|
<div class="progress-bar @(SegmentClass(seg.Color))" style="@(SegmentStyle(seg.Color))"></div>
|
|
</div>
|
|
}
|
|
</div>
|
|
} else {
|
|
<div class="progress" role="progressbar" style="height: @Height">
|
|
<div class="progress-bar @BgClass" style="width: @((Value * 100).ToString(CultureInfo.InvariantCulture))%"></div>
|
|
</div>
|
|
}
|
|
|
|
@code {
|
|
[Parameter] public float Value { get; set; }
|
|
[Parameter] public string? Color { get; set; }
|
|
[Parameter] public string Size { get; set; } = "sm";
|
|
[Parameter] public IReadOnlyList<(float Width, string Color)>? Segments { get; set; }
|
|
|
|
string Height => Size switch {
|
|
"sm" => "6px",
|
|
"md" => "12px",
|
|
"lg" => "20px",
|
|
_ => "6px"
|
|
};
|
|
|
|
string BgClass => ToCssClass(Color ?? "primary");
|
|
|
|
string SegmentClass(string color) => color.StartsWith("var(--") ? "" : ToCssClass(color);
|
|
|
|
string SegmentStyle(string color) => color.StartsWith("var(--") ? $"background-color: {color}" : "";
|
|
|
|
static string ToCssClass(string name) => name switch {
|
|
"primary" => "text-bg-primary",
|
|
"success" => "text-bg-success",
|
|
"danger" => "text-bg-danger",
|
|
"warning" => "text-bg-warning",
|
|
"info" => "text-bg-info",
|
|
"secondary" => "text-bg-secondary",
|
|
"dark" => "text-bg-dark",
|
|
var c => $"bg-{c}"
|
|
};
|
|
}
|