HStack

<HStack /> is a flex box which can wrap children components.

Its flexDirection is fiexed as row.

// import { HStack } from '@vibrant-ui/components' <HStack width="100%" height={200} alignVertical="start" alignHorizontal="start" > <Box minHeight={50} width={50} backgroundColor="onView1" /> <Box minHeight={50} width={50} backgroundColor="onView2" /> <Box minHeight={50} width={50} backgroundColor="onView3" /> </HStack>

// import { HStack } from '@vibrant-ui/components'
<HStack
  width="100%"
  height={200}
  alignVertical="start"
  alignHorizontal="start"
>
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView1"
  />
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView2"
  />
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView3"
  />
</HStack>

Loading...

How to use

import { HStack } from '@vibrant-ui/components';

Properties

<HStack /> is based on <Stack />, with a fixed direction(flex-direction) as horizontal.

Therefore, <HStack /> can take all properties that <Stack /> have except direction.

Read Properties section of Stack to use Siez, Position, Overflow etc.

Prop	Type	Default	Description
alignHorizontal	space-between | start | end | center	start	Alignment property along with the main axis. Matched with justifyContent of flex box props.
alignVertical	stretch | start | end | center	stretch	Alignment property along with the cross axis. Matched with alignItems of flex box props.

Usage

alignHorizontal

Alignment property which is aligned along the cross axis.

It corresponds to the justifyContent of the flex box that flexDirection is set as row.

<HStack height={'auto'} alignHorizontal="space-between"> {/* Check out how alignment would change when "space-between" is "start", "end", "center" */} <Box minHeight={50} width={50} backgroundColor="onView1" /> <Box minHeight={50} width={50} backgroundColor="onView2" /> <Box minHeight={50} width={50} backgroundColor="onView3" /> </HStack>

<HStack height={'auto'} alignHorizontal="space-between">
  {/* Check out how alignment would change when "space-between" is "start", "end", "center" */}
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView1"
  />
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView2"
  />
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView3"
  />
</HStack>

Loading...

alignVertical

Alignment property which is aligned along the main axis.

It corresponds to the alignItems of the flex box that flexDirection is set as row.

<HStack height={200} alignVertical="stretch"> {/* Check out how alginment would change when "stretch" is "start", "end", "center" */} <Box minHeight={50} width={50} backgroundColor="onView1" /> <Box minHeight={50} width={50} backgroundColor="onView2" /> <Box minHeight={50} width={50} backgroundColor="onView3" /> </HStack>

<HStack height={200} alignVertical="stretch">
  {/* Check out how alginment would change when "stretch" is "start", "end", "center"  */}
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView1"
  />
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView2"
  />
  <Box
    minHeight={50}
    width={50}
    backgroundColor="onView3"
  />
</HStack>

Loading...