SwiftUI.js
Components

HSplitView

HSplitView lays out multiple panes side by side, adapting SwiftUI's horizontal split container model to a proportional flex layout on the web.

HSplitView lays out multiple panes side by side, adapting SwiftUI's horizontal split container model to a proportional flex layout on the web.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code
<HSplitView fractions={[1, 2]}>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Sidebar</Text>
          <Text>Navigation and filters</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Content</Text>
          <Text>Primary content surface</Text>
        </VStack>
      </Card>
    </HSplitView>

Three Panes

Preview unavailable for this example in the static docs build.

Show code
<HSplitView fractions={[1, 2, 1]}>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Leading</Text>
          <Text>Leading pane</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Center</Text>
          <Text>Center pane</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={8} style={{ padding: '16px' }}>
          <Text style={{ fontWeight: 600 }}>Trailing</Text>
          <Text>Trailing pane</Text>
        </VStack>
      </Card>
    </HSplitView>

API

This component currently relies on inherited element props.

Inherits additional props from IBaseSplitViewProps.

Overview

HSplitView lays out multiple panes side by side, adapting SwiftUI's horizontal split container model to a proportional flex layout on the web.

Status: adapted

SwiftUI Correspondence: Adapted from SwiftUI's HSplitView.

Notes

  • fractions defines the relative width of each pane in source order
  • split dividers are visual only in this first implementation; pane resizing is not yet interactive
  • children are rendered in place, so each pane can host arbitrary SwiftUI.js content

HoverEffect

HoverEffect adapts SwiftUI's hover feedback modifiers into explicit pointer-oriented wrappers for the web.

HStack

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

On this page

OverviewNotes