StatusStrip

Description

This component represents a status strip in Blazor using the Gap.Blazor.StatusStrip model. It uses the Telerik ToolBar component to render a horizontal or vertical strip that displays status labels and optional tooltips. The component supports docking behavior and dynamic layout styling.

Usage

<WMStyleBase model=@statusStrip></WMStyleBase>

@if (statusStrip.ShowItemToolTips)
{
    <WMToolTipComponent [email protected]></WMToolTipComponent>
}

<TelerikToolBar [email protected]()>
    @foreach (var item in statusStrip.Items)
    {
        @if (item is ToolStripStatusLabel toolStripStatusLabel)
        {
            <WMToolStripStatusLabel model=@toolStripStatusLabel></WMToolStripStatusLabel>
        }
    }
</TelerikToolBar>

<style>
    [email protected]() {
        top: @styleTop;
        bottom: @styleBottom;
        left: @styleLeft;
        right: @styleRight;
        width: @styleWidth;
        height: @styleHeight;
    }
</style>

Properties

  • StatusStrip: Instance of the Gap.Blazor.StatusStrip model.

  • Items: A collection of ToolStripItem objects, typically ToolStripStatusLabel.

  • ToolTip: Tooltip model used when ShowItemToolTips is enabled.

  • Dock: Enum (DockStyle) that determines the position and layout of the status strip.

Methods

  • OnInitialized(): Initializes the component and calculates layout styles based on the Dock property.

  • GetStartStyles(): Sets the CSS positioning and dimensions based on the DockStyle:

    • Top, Bottom, Left, Right, or None

Dynamic Rendering

  • WMToolTipComponent: Conditionally rendered if ShowItemToolTips is true.

  • TelerikToolBar: Renders the strip and its items.

  • WMToolStripStatusLabel: Used to render individual status labels.

Styles

[email protected]() {
    top: [calculated];
    bottom: [calculated];
    left: [calculated];
    right: [calculated];
    width: [calculated];
    height: [calculated];
}
  • Styles are dynamically calculated based on the Dock property and dimensions from the model.

Events

  • No direct events in this component, but it reflects changes in the model such as tooltip visibility and item updates.

Last updated