Element render information

IsabyteElementRenderInformation

The IsabyteElementRenderInformation is a wrapper around your HTML markup or a Blazor component for element size, position and on/off screen detection. You can enable or disable each functionality individually to avoid being flushed with all kind of live feedback from the browser.

Rescale this box by dragging the bottom right handle or change window size to make the box render outside the browser window.

Feedback window

Current Configuration

📋

<IsabyteElementRenderInformation Debug="true"
    EnableElementOffscreenDetection="true"
    EnableElementSizeChangedDetection="true"
    EnableElementPositionDetection="true"
    OnElementOffscreenDetectionChanged="ElementOffscreenDetectionChanged"
    OnElementSizeChanged="ElementSizeChanged"
    OnElementPositionChanged="ElementPositionChanged">
    <div>Your content here</div>
</IsabyteElementRenderInformation>

@code {
private async Task ElementOffscreenDetectionChanged(Boolean offscreen)
{
    // Handle offscreen detection
}

private async Task ElementSizeChanged(IsabyteSize elementSize)
{
    // Handle element size change
}

private async Task ElementPositionChanged(IsabytePosition elementPos)
{
    // Handle element position change
}
}