Components
ContainerRelativeFrame
Sizes content relative to its container using SwiftUI-style count, span, and spacing semantics.
Example
Requires React 18.2+ or 19 and shared styles. See setup.
Horizontal
Loading preview…
Code
'use client';
import { Card, ContainerRelativeFrame, HStack, Text } from '@swiftuijs/ui';
export default function Example() {
return ((<HStack spacing={12}>
<ContainerRelativeFrame count={3} span={1} spacing={12}>
<Card><Text>1/3</Text></Card>
</ContainerRelativeFrame>
<ContainerRelativeFrame count={3} span={2} spacing={12}>
<Card><Text>2/3</Text></Card>
</ContainerRelativeFrame>
</HStack>));
}More examples
Vertical sizing
API reference
| Prop | Type | Required | Description |
|---|---|---|---|
alignment | EAlignment | No | — |
axis | 'horizontal' | 'vertical' | 'both' | No | — |
count | number | No | — |
length | number | string | No | — |
spacing | number | No | — |
span | number | No | — |
Inherits additional props from IBaseComponent.