ToolStripButton

Description

This component represents a toolbar button in Blazor using the Gap.Blazor.ToolStripButton model. It is rendered inside a Telerik ToolBarButton and supports displaying an image, text, or both. The component also supports tooltips, autosizing, and click interaction.

Usage

<WMStyleBase model=@toolStripButton></WMStyleBase>

<ToolBarButton Class="@($"{toolStripButton.GetStringClasses()} {toolStripButton.GetToolTipClass()} {GetAutoSizeClass()}")"
               Title="@toolStripButton.GetToolTipText()"
               OnClick="@toolStripItemClick"
               Visible="this.Visible">
    @if (this.ShowImage && this.GetImage() is string image)
    {
        <div>
            <img class="icon-size-default" src="@image" />
        </div>
    }
    @if (this.ShowText && !string.IsNullOrEmpty(this.Text))
    {
        <div>
            <p class="button-text-default">@toolStripButton.Text</p>
        </div>
    }
</ToolBarButton>

<style>
    [email protected]() {
        position: relative;
        display: block;
        padding: 2px;
    }

    .@(model.GetComponentClass() + ".AutoSize") {
        width: auto;
        height: auto;
    }

    [email protected]() .icon-size-default {
        display: block;
        margin-inline: auto;
        float: @this.toolStripButton.ImageAlign.GetFloatStyle();
    }

    [email protected]() .button-text-default {
        margin: 1px;
        clear: both;
        float: @this.toolStripButton.TextAlign.GetFloatStyle();
    }
</style>

Properties

• toolStripButton: Instance of the Gap.Blazor.ToolStripButton model.

• DisplayStyle: Determines whether to show image, text, or both (Image, Text, ImageAndText).

• ToolTipText: Tooltip shown on hover.

• Image: The image displayed on the button.

• Text: The label text displayed on the button.

• ImageAlign / TextAlign: Control the float alignment of the image and text.

Methods

• OnInitialized(): Subscribes to NotifyModelChanged and ImageChanged to update the UI when the model changes.

• toolStripItemClick(MouseEventArgs): Invokes the PerformClick() method on the model when the button is clicked.

• GetImage(): Retrieves the image source from the model.

• ShowImage / ShowText: Boolean flags derived from DisplayStyle to control rendering.

Dynamic Rendering

• ToolBarButton: Renders the button UI.

• Image and Text: Conditionally rendered based on DisplayStyle.

• CSS Styling: Dynamically applies layout and alignment styles.

Styles

[email protected]() {
    position: relative;
    display: block;
    padding: 2px;
}

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

[email protected]() .icon-size-default {
    display: block;
    margin-inline: auto;
    float: [based on ImageAlign];
}

[email protected]() .button-text-default {
    margin: 1px;
    clear: both;
    float: [based on TextAlign];
}

Events

• Click: Triggered when the button is clicked.

• ImageChanged: Updates the UI when the image changes.

• NotifyModelChanged: Triggers a full UI refresh when the model changes.