@page "/linear-gauge"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor Linear Gauge
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    A linear gauge shows a value on a straight scale, horizontal or vertical, with ticks, ranges, and a pointer - think of a thermometer or a level meter.
</RadzenText>

<RadzenText Anchor="linear-gauge#basic-usage" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Basic Usage
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    A horizontal linear gauge with configurable tick placement, pointer type, and value.
</RadzenText>
<RadzenExample ComponentName="LinearGauge" Example="LinearGaugeBasic">
    <LinearGaugeBasic />
</RadzenExample>

<RadzenText Anchor="linear-gauge#ranges" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Ranges and Value Display
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Colored ranges highlight status zones. Use <code>ShowValue</code> and a <code>&lt;Template&gt;</code> to display a custom label next to the pointer.
</RadzenText>
<RadzenExample ComponentName="LinearGauge" Example="LinearGaugeRanges">
    <LinearGaugeRanges />
</RadzenExample>

<RadzenText Anchor="linear-gauge#rounded-ranges" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Rounded Ranges
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>BorderRadius</code> on <code>RadzenLinearGaugeScaleRange</code> for pill-shaped bands.
</RadzenText>
<RadzenExample ComponentName="LinearGauge" Example="LinearGaugeRoundedRanges">
    <LinearGaugeRoundedRanges />
</RadzenExample>

<RadzenText Anchor="linear-gauge#reversed" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Reversed Scale
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Set <code>Reversed="true"</code> to place Max on the left and Min on the right.
</RadzenText>
<RadzenExample ComponentName="LinearGauge" Example="LinearGaugeReversed">
    <LinearGaugeReversed />
</RadzenExample>

<RadzenText Anchor="linear-gauge#draggable" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Draggable Pointer
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Set <code>Draggable="true"</code> with <code>@@bind-Value</code>. Click anywhere on the scale or drag the pointer to update the value.
</RadzenText>
<RadzenExample ComponentName="LinearGauge" Example="LinearGaugeDraggable">
    <LinearGaugeDraggable />
</RadzenExample>

<RadzenText Anchor="linear-gauge#vertical" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Vertical Orientation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Set <code>Orientation="Orientation.Vertical"</code> for compact dashboard layouts. All pointer types and ranges are supported.
</RadzenText>
<RadzenExample ComponentName="LinearGauge" Example="LinearGaugeVertical">
    <LinearGaugeVertical />
</RadzenExample>

<RadzenText Anchor="linear-gauge#multiple-scales" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Multiple Scales
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>LinePosition</code> to stack independent scales inside the same gauge container.
</RadzenText>
<RadzenExample ComponentName="LinearGauge" Example="LinearGaugeMultipleScales">
    <LinearGaugeMultipleScales />
</RadzenExample>

