HStack

Horizontal flex row with gap, alignment and wrapping.

Import

Vue

import { UiHStack } from '@ziyarago/ui/vue'

Default

Vue

<UiHStack
  :gap="12"
  :style="{ border: '1px dashed var(--zg-stroke)', padding: '12px', borderRadius: '12px' }"
>
  <UiButton variant="secondary" size="sm">
    One
  </UiButton>
  <UiButton variant="secondary" size="sm">
    Two
  </UiButton>
  <UiButton variant="secondary" size="sm">
    Three
  </UiButton>
</UiHStack>

Space between

Makkah

Vue

<UiHStack
  justify="space-between"
  align="center"
  :style="{ border: '1px dashed var(--zg-stroke)', padding: '12px', borderRadius: '12px' }"
>
  <UiText bold>
    Makkah
  </UiText>
  <UiButton variant="primary" size="sm">
    Details
  </UiButton>
</UiHStack>

API reference

Horizontal flex row with a configurable gap.

Props

PropType and valuesDefaultDescription

gapnumber | string12Gap between children. Numbers are pixels, strings any CSS length.

alignstring—CSS align-items value, for example center, flex-start, stretch.

justifystring—CSS justify-content value, for example space-between, center.

wrapbooleanfalseAllows children to wrap onto several lines.

asstring'div'HTML tag to render.

styleRecord<string, string | number>—Inline styles merged over the component styles.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultItems laid out in a row.