Element render information

The BptElementRenderInformation 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

📋 [+]

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

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

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

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