BnSafeArea
Namespace: BlazorNative.Components
Keeps its content clear of notches, status bars, camera cutouts and home indicators, by padding a BnView with the safe-area insets the host shell reports.
public sealed class BnSafeArea : BnLayoutContainer, Microsoft.AspNetCore.Components.IComponent, Microsoft.AspNetCore.Components.IHandleEvent, Microsoft.AspNetCore.Components.IHandleAfterRender, System.IDisposable
Inheritance Object → ComponentBase → BnLayoutItem → BnLayoutContainer → BnSafeArea
Implements IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Attributes NullableContextAttribute, NullableAttribute
Remarks:
Opt-in. Wrap the page content (or just the part of it) that needs to
stay clear of system UI: <BnSafeArea>…</BnSafeArea>.
Per edge, independently.BnSafeArea.TopEdge, BnSafeArea.RightEdge,
BnSafeArea.BottomEdge and BnSafeArea.LeftEdge each take a
BnSafeAreaEdge — Off ignores the inset on that edge
(the edge-to-edge case, e.g. a full-bleed hero image under the status
bar), Additive (the default) adds the inset to whatever padding you
set for that edge, and Maximum takes whichever of the two is
larger.
Nesting is safe. Wrapping a page in BnSafeArea and then wrapping a section inside it in another BnSafeArea does not pad twice — only the outermost instance applies the inset; a nested one sees it as already consumed.
Live. Rotation, for one — the insets can change while the app is running, and this component re-lays-out when they do.
Properties
TopEdge
How the top edge reacts to the reported inset. Default Additive.
public BnSafeAreaEdge TopEdge { get; set; }
Property Value
RightEdge
How the right edge reacts to the reported inset. Default Additive.
public BnSafeAreaEdge RightEdge { get; set; }
Property Value
BottomEdge
How the bottom edge reacts to the reported inset. Default Additive.
public BnSafeAreaEdge BottomEdge { get; set; }
Property Value
LeftEdge
How the left edge reacts to the reported inset. Default Additive.
public BnSafeAreaEdge LeftEdge { get; set; }
Property Value
ChildContent
Nested content rendered inside this view.
public RenderFragment? ChildContent { get; set; }
Property Value
Padding
Space inside the box, between its edge and its children. Null = none.
public BnLength? Padding { get; set; }
Property Value
Remarks:
Percentages are legal; auto is not, which is why this is
BnLength and not BnAutoLength.
Justify
Main-axis distribution of children. Null = Yoga's default (flex-start).
public FlexJustify? Justify { get; set; }
Property Value
Align
Cross-axis alignment of children. Null = Yoga's default (stretch).
public FlexAlign? Align { get; set; }
Property Value
Wrap
Whether children wrap onto new lines. Null = Yoga's default (nowrap).
public FlexWrap? Wrap { get; set; }
Property Value
Gap
Space between children. Null = none.
public BnLength? Gap { get; set; }
Property Value
PaddingTop
Padding on the top edge only. Overrides BnLayoutContainer.Padding for that edge when both are set — Yoga resolves the more specific edge last.
public BnLength? PaddingTop { get; set; }
Property Value
PaddingRight
Padding on the right edge only. Overrides BnLayoutContainer.Padding for that edge.
public BnLength? PaddingRight { get; set; }
Property Value
PaddingBottom
Padding on the bottom edge only. Overrides BnLayoutContainer.Padding for that edge.
public BnLength? PaddingBottom { get; set; }
Property Value
PaddingLeft
Padding on the left edge only. Overrides BnLayoutContainer.Padding for that edge.
public BnLength? PaddingLeft { get; set; }
Property Value
BackgroundColor
Fill colour behind the component. Null leaves it transparent.
public string? BackgroundColor { get; set; }
Property Value
Margin
Space outside the component, between it and its siblings. Null = none.
public BnAutoLength? Margin { get; set; }
Property Value
Remarks:
auto is legal here and absorbs free space, which re-centres the node.
AlignSelf
Cross-axis alignment for this item alone, overriding the parent's. Null = inherit.
public FlexAlign? AlignSelf { get; set; }
Property Value
Grow
Share of leftover space this item takes (unitless ratio). Null = Yoga's default (0).
public float? Grow { get; set; }
Property Value
Shrink
Share of overflow this item gives up (unitless ratio). Null = Yoga's default (1).
public float? Shrink { get; set; }
Property Value
Basis
Starting main-axis size before grow/shrink. Null = auto.
public BnAutoLength? Basis { get; set; }
Property Value
Width
Box width. Null = auto.
public BnAutoLength? Width { get; set; }
Property Value
Height
Box height. Null = auto.
public BnAutoLength? Height { get; set; }
Property Value
MinWidth
Lower bound on width. Null = unset.
public BnLength? MinWidth { get; set; }
Property Value
MaxWidth
Upper bound on width. Null = unset.
public BnLength? MaxWidth { get; set; }
Property Value
MinHeight
Lower bound on height. Null = unset.
public BnLength? MinHeight { get; set; }
Property Value
MaxHeight
Upper bound on height. Null = unset.
public BnLength? MaxHeight { get; set; }
Property Value
Position
Positioning scheme. Null = Yoga's default (relative).
public FlexPosition? Position { get; set; }
Property Value
Top
Top inset. Null = unset.
public BnLength? Top { get; set; }
Property Value
Right
Right inset. Null = unset.
public BnLength? Right { get; set; }
Property Value
Bottom
Bottom inset. Null = unset.
public BnLength? Bottom { get; set; }
Property Value
Left
Left inset. Null = unset.
public BnLength? Left { get; set; }
Property Value
Constructors
BnSafeArea()
public BnSafeArea()