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.

Last updated