Components: HStack, VStack, ZStack

[ItsJonQ]

(Source: Design+Code)

Recently, I started poking around with Swift UI. My, what a wonderful language + workflow it has!

One of the main primitives is their HStack, VStack, and ZStack Views (aka. Components).

After playing around with it, I thought they would be a welcomed edition to this library as well.

It looks like I'm not the only one who would like this for React:

https://twitter.com/dan_abramov/status/1286433774641852417

Flex

We currently have something similar! The Flex component.

The H/V/Z Stack components could use Flex as a their base, and sprinkle some adjustments to achieve the desired effects.

API/Workflow

One of the key things is injecting Spacer() (Swift UI) within one of the stacks to help with layout.

We can achieve something similar:

<HStack>
  <Text>Hello</Text>
  <Spacer />
  <Button>Next</Button>
</HStack>

<VStack>
  <View>Top</View>
  <Spacer />
  <View>Bottom</View>
</VStack>

<ZStack>
  <View>Layer 0</View>
  <View>Layer 1</View>
</ZStack>

We'll need to adjust the <Spacer /> component to perform double duty to work intelligently within one of these Stack components.

ZStack will be a very interesting one! :)

[simison]

This would make an interesting technical basis for a block: WordPress/gutenberg#24473

[ItsJonQ]

Added with this update!
2ffa46c

[ItsJonQ]

Update! Wrote a blog post about it here:
https://g2components.wordpress.com/2020/08/12/creating-smart-layout-components-hstack-vstack-and-zstack/