SafeAreaInset
SafeAreaInset adapts SwiftUI's `.safeAreaInset` modifier into an explicit layout container for the web.
SafeAreaInset adapts SwiftUI's `.safeAreaInset` modifier into an explicit layout container for the web.
Examples
Bottom
Preview unavailable for this example in the static docs build.
Show code
<SafeAreaInset edge="bottom" inset={<Button>Compose</Button>}>
<div style={{ padding: 16, border: '1px solid var(--sw-color-gray-4, #d1d5db)', borderRadius: 16 }}>
Mail list
</div>
</SafeAreaInset>Variants
Preview unavailable for this example in the static docs build.
Show code
<SafeAreaInset edge="top" inset={<div style={{ padding: 12 }}>Now playing</div>}>
<div style={{ padding: 16, border: '1px solid var(--sw-color-gray-4, #d1d5db)', borderRadius: 16 }}>
Library content
</div>
</SafeAreaInset>API
| Prop | Type | Required | Description |
|---|---|---|---|
edge | 'top' | 'bottom' | 'leading' | 'trailing' | No | No description yet. |
inset | ReactNode | Yes | No description yet. |
Inherits additional props from IBaseComponent.
Overview
SafeAreaInset adapts SwiftUI's .safeAreaInset modifier into an explicit layout container for the web.
SafeArea
SafeArea is a view that insets its content to respect safe area boundaries. SafeArea ensures content is not obscured by system UI elements like notches, status bars, and home indicators.
ScenePadding
ScenePadding adapts SwiftUI's `scenePadding` modifier into an explicit layout wrapper for web scenes and grouped screens.