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 leaves it unset, so the box sizes to its content; BnAutoLength.Auto is the explicit auto — see BnAutoLength for why those two are not the same value.

public BnAutoLength? ContentWidth { get; set; }

Property Value​

BnAutoLength?

ContentHeight​

The content box's declared height, e.g. 180. Null leaves it unset; BnAutoLength.Auto is the explicit auto.

public BnAutoLength? ContentHeight { get; set; }

Property Value​

BnAutoLength?

Padding​

Space inside the box, between its edge and its children. Null = none.

public BnLength? Padding { get; set; }

Property Value​

BnLength?

Remarks:

Percentages are legal; auto is not, which is why this is BnLength and not BnAutoLength.

BackgroundColor​

The content box's fill colour, e.g. "#FFFFFF" — the same colour grammar BnLayoutItem.BackgroundColor uses elsewhere. It paints the CONTENT BOX only, never the modal node itself (see the file header: the modal node accepts no styles on either shell). Null = no fill.

public string? BackgroundColor { get; set; }

Property Value​

String

Constructors​

BnModal()​

public BnModal()