SwiftUI.js
Components

ContainerBackground

ContainerBackground adapts SwiftUI's `containerBackground(_:for:)` modifier into an explicit surface wrapper for navigation and grouped content areas.

ContainerBackground adapts SwiftUI's `containerBackground(_:for:)` modifier into an explicit surface wrapper for navigation and grouped content areas.

Examples

Automatic

Preview unavailable for this example in the static docs build.

Show code
<ContainerBackground>
      <Text style={{ padding: '12px 16px' }}>Automatic container surface</Text>
    </ContainerBackground>

Variants

Preview unavailable for this example in the static docs build.

Show code
<VStack spacing={12}>
      <ContainerBackground placement="navigation" emphasis="secondary">
        <Text style={{ padding: '12px 16px' }}>Navigation title group</Text>
      </ContainerBackground>
      <Card>
        <Text>Underlying content</Text>
      </Card>
    </VStack>

API

PropTypeRequiredDescription
placement'automatic' | 'navigation' | 'window' | 'widget'NoNo description yet.
emphasis'regular' | 'secondary' | 'prominent'NoNo description yet.

Inherits additional props from IBaseComponent.

Overview

ContainerBackground adapts SwiftUI's containerBackground(_:for:) modifier into an explicit surface wrapper for navigation and grouped content areas.

Status: adapted

On this page