VisualEffect
VisualEffect adapts SwiftUI's visual-effect modifiers into an explicit surface wrapper for the web.
VisualEffect adapts SwiftUI's visual-effect modifiers into an explicit surface wrapper for the web.
Examples
Subtle
Preview unavailable for this example in the static docs build.
Show code
<VisualEffect effect="subtle">
<Text style={{ padding: '12px 16px' }}>Secondary surface</Text>
</VisualEffect>Variants
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={12}>
<VisualEffect effect="prominent" shape="rounded">
<Text style={{ padding: '14px 18px' }}>Inspector summary</Text>
</VisualEffect>
<VisualEffect effect="prominent" shape="capsule">
<Text style={{ padding: '10px 16px' }}>Toolbar chip</Text>
</VisualEffect>
</VStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
effect | 'subtle' | 'prominent' | No | No description yet. |
shape | 'automatic' | 'rounded' | 'capsule' | No | No description yet. |
active | boolean | No | No description yet. |
Inherits additional props from IBaseComponent.
Overview
VisualEffect adapts SwiftUI's visual-effect modifiers into an explicit surface wrapper for the web.
Status: adapted
ViewThatFits
ViewThatFits picks the first layout variant that fits the available width. The web version uses `data-min-width` hints on child views to choose an appropriate variant.
VSplitView
VSplitView stacks multiple panes vertically while preserving the SwiftUI split-view mental model in a web-native layout container.