Skip to content

Commit eeeddf4

Browse files
committed
docs: tweak flebox documentation
1 parent 93e6534 commit eeeddf4

2 files changed

Lines changed: 44 additions & 692 deletions

File tree

website/docs/ios/components/layout.md

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,13 @@ Each stack type has different alignment options based on its layout direction.
1717

1818
A vertical stack container that arranges its children in a column.
1919

20-
:::tip Flexbox Option
21-
VStack can optionally use a flexbox layout engine by setting `layout="flex"`. This enables React Native-style flexbox properties like `justifyContent` and `alignItems` via the `style` prop. See [Flexbox Layout](../development/flexbox-layout) for details.
22-
:::
23-
2420
**Parameters:**
2521

2622
- `spacing` (number, optional): Spacing between children in points
2723
- `alignment` (string, optional): Horizontal alignment of children:
2824
- `"leading"` - Align to left edge
2925
- `"center"` (default) - Align to center
3026
- `"trailing"` - Align to right edge
31-
- `layout` (string, optional): Layout mode - `"stack"` (default) or `"flex"`. When set to `"flex"`, enables flexbox properties via style prop.
3227

3328
**Apple Documentation:** [VStack](https://developer.apple.com/documentation/swiftui/vstack)
3429

@@ -38,10 +33,6 @@ VStack can optionally use a flexbox layout engine by setting `layout="flex"`. Th
3833

3934
A horizontal stack container that arranges its children in a row.
4035

41-
:::tip Flexbox Option
42-
HStack can optionally use a flexbox layout engine by setting `layout="flex"`. This enables React Native-style flexbox properties like `justifyContent` and `alignItems` via the `style` prop. See [Flexbox Layout](../development/flexbox-layout) for details.
43-
:::
44-
4536
**Parameters:**
4637

4738
- `spacing` (number, optional): Spacing between children in points
@@ -51,7 +42,6 @@ HStack can optionally use a flexbox layout engine by setting `layout="flex"`. Th
5142
- `"bottom"` - Align to bottom edge
5243
- `"firstTextBaseline"` - Align to first text baseline
5344
- `"lastTextBaseline"` - Align to last text baseline
54-
- `layout` (string, optional): Layout mode - `"stack"` (default) or `"flex"`. When set to `"flex"`, enables flexbox properties via style prop.
5545

5646
**Apple Documentation:** [HStack](https://developer.apple.com/documentation/swiftui/hstack)
5747

@@ -89,7 +79,7 @@ In SwiftUI (and Voltra), positioning works differently than CSS. The `alignment`
8979
source={{ assetName: 'avatar' }}
9080
style={{ width: 60, height: 60, borderRadius: 30 }}
9181
/>
92-
82+
9383
{/* Badge is positioned at top-right, then nudged with offset */}
9484
<Voltra.Text
9585
style={{
@@ -119,7 +109,7 @@ Use `offsetX` and `offsetY` style properties to fine-tune individual element pos
119109
A flexible container component that **always uses flexbox layout**. Unlike VStack and HStack which use native SwiftUI stacks by default, View is specifically designed for React Native-style flexbox layouts.
120110

121111
:::tip Flexbox-First Component
122-
The View component is purpose-built for flexbox layouts and always uses the flexbox layout engine. You don't need to add `layout="flex"` – it's flexbox by default. See the [Flexbox Layout](../development/flexbox-layout) guide for comprehensive documentation.
112+
The View component is purpose-built for flexbox layouts and always uses the flexbox layout engine. See the [Flexbox Layout](../development/flexbox-layout) guide for comprehensive documentation.
123113
:::
124114

125115
**Style Properties:**

0 commit comments

Comments
 (0)