PictureBox

Description

This component represents an image display control in Blazor using the Gap.Blazor.PictureBox model. It renders an image with optional tooltip text and click interaction, and visually reflects the enabled state through opacity.

Usage

@namespace Gap.Blazor.Components
@inherits WMControlComponentBase

<WMStyleBase model=@pictureBox></WMStyleBase>
<div class="@(model.GetStringClasses() + " " + pictureBox.GetToolTipClass())">
    @if (pictureBox.Image != null)
    {
        <img Title="@pictureBox.ToolTipText"
             alt="@pictureBox.Name"
             src="@this.GetImage()"
             onclick="@this.onClickHandler" />
    }
</div>

<style>
    [email protected]() {
        opacity: @this.GetOpacity();
    }
</style>

Properties

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

• Image: The image to display, retrieved via pictureBox.Image.GetImage().

• ToolTipText: Text shown when hovering over the image.

• Name: Used as the alt attribute for accessibility.

Methods

• GetOpacity(): Returns "1" if the component is enabled, "0.3" if disabled, simulating the enabled/disabled visual state.

• onClickHandler(): Invokes the Click event on the model if the component is enabled.

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

Dynamic Rendering

• Conditional Image Display: The <img> tag is only rendered if pictureBox.Image is not null.

• Tooltip and Alt Text: Provided via ToolTipText and Name.

• CSS Styling: Dynamically adjusts opacity based on the enabled state.

Styles

[email protected]() {
    opacity: [1 or 0.3 depending on Enabled];
}

Events

• Click: Triggered when the image is clicked, if the component is enabled.