VStack

Vertical flex column with a configurable gap.

Import

Vue

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

Gap 12

VisaHotelTransfer

Vue

<UiVStack
  :gap="12"
  :style="{ border: '1px dashed var(--zg-stroke)', padding: '12px', borderRadius: '12px' }"
>
  <UiBadge>
    Visa
  </UiBadge>
  <UiBadge>
    Hotel
  </UiBadge>
  <UiBadge>
    Transfer
  </UiBadge>
</UiVStack>

Centered, gap 4

Umrah 7 nights

From 1 200 SAR

Vue

<UiVStack
  :gap="4"
  align="center"
  :style="{ border: '1px dashed var(--zg-stroke)', padding: '12px', borderRadius: '12px' }"
>
  <UiHeading :level="3" size="sm">
    Umrah 7 nights
  </UiHeading>
  <UiText tone="muted" size="sm">
    From 1 200 SAR
  </UiText>
  <UiButton variant="primary" size="sm">
    Book
  </UiButton>
</UiVStack>

API reference

Vertical flex column 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 column.