Skip to main content

BnModal

Namespace: BlazorNative.Components

A modal overlay: a scrim across the whole screen with a content box on top.

public class BnModal : Microsoft.AspNetCore.Components.ComponentBase, Microsoft.AspNetCore.Components.IComponent, Microsoft.AspNetCore.Components.IHandleEvent, Microsoft.AspNetCore.Components.IHandleAfterRender

Inheritance Object → ComponentBase → BnModal
Implements IComponent, IHandleEvent, IHandleAfterRender
Attributes NullableContextAttribute, NullableAttribute

Remarks:

It is an overlay inside your existing page, not a native dialog window. That is worth knowing because it is what makes the modal behave like the rest of your tree: it lays out with the same engine, and it does not own its own dismissal.

You own whether it is open. Dismissal is a request: tapping the scrim — and, on Android, the hardware back button — raises VisibleChanged with false, and nothing closes until your state says so. Taps inside the content box never dismiss. Bind Visible and the ordinary Blazor flow does the rest; refuse the request (an unsaved edit, say) and the modal simply stays open.

The content box carries its own ContentWidth, ContentHeight, Padding and BackgroundColor; ChildContent renders inside it. Stacking is creation order, so a modal shown later lands on top.

<BnModal @bind-Visible="_confirming" ContentWidth="280" Padding="16"
         BackgroundColor="#FFFFFF">
    <BnColumn Gap="12">
        <BnText Text="Delete this item?" />
        <BnButton Label="Cancel" OnClick="() => _confirming = false" />
    </BnColumn>
</BnModal>

Fields​

DefaultScrimColor​

The scrim colour used when you do not set one: a half-opaque black. Binding BnModal.ScrimColor to null falls back to this rather than leaving the scrim unpainted.

public static string DefaultScrimColor;

Properties​

Visible​

Whether the modal is mounted. False = ZERO wire presence (hide is unmount — one RemoveNodePatch for the whole subtree). .NET owns this; the shell only ever REQUESTS a change via BnModal.VisibleChanged.

public bool Visible { get; set; }

Property Value​

Boolean

VisibleChanged​

Raised with false on every dismissal request (scrim tap; Android back with this modal topmost) — the write-back half of the @bind-Visible pair. A parent that ignores it keeps the modal open.

public EventCallback<bool> VisibleChanged { get; set; }

Property Value​

EventCallback<Boolean>

ChildContent​

The modal's content — rendered inside the content box. State in here does NOT survive hide unless bound (hide is unmount; the 7.2 eviction rule).

public RenderFragment? ChildContent { get; set; }

Property Value​

RenderFragment

ScrimColor​

The colour painted over the page behind the content box, as a hex string with alpha. Null falls back to BnModal.DefaultScrimColor, so the scrim is never accidentally invisible.

public string? ScrimColor { get; set; }

Property Value​

String

ContentWidth​

The content box's declared width, e.g. "280". Null = auto (the box sizes to its content).

public string? ContentWidth { get; set; }

Property Value​

String

ContentHeight​

The content box's declared height, e.g. "180". Null = auto.

public string? ContentHeight { get; set; }

Property Value​

String

Padding​

Inside spacing, in density-independent units — 16 is 16dp on Android and 16pt on iOS. Children are placed inside the padding box, so padding shrinks the space they get rather than moving this view. Null = none. Unlike the other lengths this one is a number, not a string: percentage and "auto" paddings are not expressible.

public float? Padding { get; set; }

Property Value​

Single?

BackgroundColor​

Background color as a hex string, e.g. "#FFEEAA". Null leaves the view transparent.

public string? BackgroundColor { get; set; }

Property Value​

String

Constructors​

BnModal()​

public BnModal()