ToolStrip

Description

This component represents a horizontal or vertical toolbar in Blazor using the Gap.Blazor.ToolStrip model. It uses the Telerik ToolBar component to render a collection of interactive items such as buttons, labels, and separators. The component supports tooltips, autosizing, and dynamic item rendering.

Usage

<WMStyleBase model=@toolStrip></WMStyleBase>

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

<TelerikToolBar Class=@($"{this.toolStrip.GetStringClasses()} {GetAutoSizeClass()}")>
    @foreach (var item in toolStrip.Items)
    {
        @if (item is ToolStripLabel toolStripLabel)
        {
            <WMToolStripLabel model=@toolStripLabel></WMToolStripLabel>
        }
        @if (item is ToolStripButton toolStripButton)
        {
            <WMToolStripButton model=@toolStripButton></WMToolStripButton>
        }
        @if (item is ToolStripSeparator toolStripSeparator)
        {
            <WMToolStripSeparator model=@toolStripSeparator></WMToolStripSeparator>
        }
    }
</TelerikToolBar>

<style>
    [email protected]() {
        padding: 1px;
        align-items: stretch;
    }

    .@(model.GetComponentClass() + ".AutoSize") {
        height: auto;
    }
</style>

Properties

• toolStrip: Instance of the Gap.Blazor.ToolStrip model.

• Items: A collection of ToolStripItem objects, including:

  • ToolStripLabel

  • ToolStripButton

  • ToolStripSeparator

• ShowItemToolTips: Boolean indicating whether tooltips should be displayed.

• ToolTip: Tooltip model used when ShowItemToolTips is enabled.

Methods

• GetAutoSizeClass(): Returns "AutoSize" if the toolbar should automatically adjust its height.

Dynamic Rendering

• TelerikToolBar: Renders the toolbar container.

• WMToolStripLabel / Button / Separator: Rendered dynamically based on the item type.

• WMToolTipComponent: Conditionally rendered if tooltips are enabled.

Styles

[email protected]() {
    padding: 1px;
    align-items: stretch;
}

[email protected]().AutoSize {
    height: auto;
}

Events

• No direct events in this component, but individual items (e.g., buttons) may trigger their own events.