SwiftUI.js
Components

VSplitView

VSplitView stacks multiple panes vertically while preserving the SwiftUI split-view mental model in a web-native layout container.

VSplitView stacks multiple panes vertically while preserving the SwiftUI split-view mental model in a web-native layout container.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code
<VSplitView fractions={[1, 2]}>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Top</Text>
          <Text>Top pane content</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Bottom</Text>
          <Text>Bottom pane content</Text>
        </VStack>
      </Card>
    </VSplitView>

Three Panes

Preview unavailable for this example in the static docs build.

Show code
<VSplitView fractions={[1, 1, 2]}>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Header</Text>
          <Text>Header pane</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Summary</Text>
          <Text>Summary pane</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Detail</Text>
          <Text>Detail pane</Text>
        </VStack>
      </Card>
    </VSplitView>

API

This component currently relies on inherited element props.

Inherits additional props from IBaseSplitViewProps.

Overview

VSplitView stacks multiple panes vertically while preserving the SwiftUI split-view mental model in a web-native layout container.

Status: adapted

SwiftUI Correspondence: Adapted from SwiftUI's VSplitView.

Notes

  • fractions defines the relative height of each pane in source order
  • vertical dividers are emitted between panes by default
  • the first version focuses on stable pane layout, not interactive resizing

VisualEffect

VisualEffect adapts SwiftUI's visual-effect modifiers into an explicit surface wrapper for the web.

VStack

VStack is a view that arranges its children in a vertical line. A VStack is a container view that arranges its child views in a vertical line. You can customize the spacing between views and the alignment of views within the stack.

On this page

OverviewNotes