SwiftUI.js
Components

Inspector

Inspector presents supplemental controls or contextual details beside primary content.

Inspector presents supplemental controls or contextual details beside primary content.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code
function Demo(props: Partial<IInspectorProps>) {
  const [isPresented, setIsPresented] = useState(true)

  return (
    <VStack spacing={12}>
      <Button onClick={() => setIsPresented((value) => !value)}>
        {isPresented ? 'Hide inspector' : 'Show inspector'}
      </Button>
      <Inspector
        content={
          <VStack spacing={8}>
            <Text>Selection details</Text>
            <Text>Properties</Text>
            <Text>Actions</Text>
          </VStack>
        }
        isPresented={isPresented}
        onOpenChange={setIsPresented}
        style={{ minHeight: '280px' }}
        title="Inspector"
        {...props}
      >
        <VStack spacing={8}>
          <Text>Main document content</Text>
          <Text>Inspector is useful for secondary controls and metadata.</Text>
        </VStack>
      </Inspector>
    </VStack>
  )
}

Leading Placement

Preview unavailable for this example in the static docs build.

Show code
<Demo placement="leading" />

API

PropTypeRequiredDescription
isPresentedbooleanYesWhether the inspector is visible.
onOpenChange(isPresented: boolean) => voidNoCalled when the visibility should change.
contentReactNodeYesInspector content rendered in the side panel.
placement'leading' | 'trailing'NoPlacement of the inspector relative to the main content. Default: 'trailing'
widthnumber | stringNoPanel width. Default: 320
titlestringNoAccessible title for the inspector region.
dismissLabelstringNoDismiss button label. Default: 'Hide inspector'

Inherits additional props from IBaseComponent.

Overview

Inspector presents supplemental controls or contextual details beside primary content.

SwiftUI Correspondence: Adapts SwiftUI's inspector(isPresented:content:) to a React container component.

Notes

  • Use isPresented and onOpenChange to control visibility from React state
  • Use content for the secondary inspection panel
  • Use placement="leading" when the inspector should appear before primary content

Image

Image is a view that displays an image. Use Image to display images from various sources, including bundled images, system images, and images from URLs.

KeyframeAnimator

KeyframeAnimator steps through explicit frame values over time, exposing each frame to a render function.

On this page

OverviewNotes