SafeArea
safe-areaApplies device inset padding to keep mobile content outside obstructed regions.
Usage
Full security zone
The default is edges="all", and all four sides are max(min, env(safe-area-inset-*)). The desktop env is always 0, so use min to open the demonstration.
Content area (the outer circle is the safe area left blank)
tsx
<SafeArea edges="all" min={16}>
<Content />
</SafeArea>Bottom only
The edge array transfer only takes effect on the specified edge, often used at the bottom Home Indicator to leave blank.
Content area (the outer circle is the safe area left blank)
tsx
<SafeArea edges={["bottom"]} min={24}>
<BottomBar />
</SafeArea>Horizontal orientation
The semantic alias horizontal is equal to left and right (vertical is up and down).
Content area (the outer circle is the safe area left blank)
tsx
<SafeArea edges="horizontal" min={20}>
<Content />
</SafeArea>When to Use
Use it to keep edge-aligned content clear of a device notch or home indicator. TabBar already includes safe-area handling; wrap only custom edge content in SafeArea.
Import
ts
import { SafeArea } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
edges | SafeAreaEdge[] | "all" | "vertical" | "horizontal" | "all" | Edges that receive an inset; SafeAreaEdge = "top"|"right"|"bottom"|"left" |
mode | "padding" | "margin" | "padding" | Applies each inset as padding or margin |
min | number | string | 0 | The minimum value of each inset (number = px or any CSS length), when the env cannot be obtained |
as | ElementType | "div" | Polymorphic root element |
InheritsHTMLAttributes<HTMLElement>and forwardsclassName,style,children, and other element attributes.
Usage Guidelines
env(safe-area-inset-*)on the desktop is always 0. If you want to see the blank space on a non-notch device, you must givemin(such asmin={16}) a spacing - this is also the spacing when the real machine does not have a safe zone.- Numeric
minvalues are interpreted as pixels; strings may use any CSS length, such as"1rem".
Related
TabBar · Fab · ActionSheet · Picker · SwipeAction · PullToRefresh