VStack

A view that arranges its children one on top of the other.

interface VStackSignature {
  Attributes: {
    readable?: FrameInlineLength // Shortcut for `placement="leading fill" frame:alignment="center" frame:width="infinity" frame:max-width="{length}"`
    distribution?: 'leading' | 'leading fill' | 'center' | 'trailing' | 'fill' | 'space-between' // The distribution of cols
    template?: Template // The main-axis grid template
    spacing?: Spacing // The gap between the primary axis
    alignment?: InlineAlignment // The cross-axis alignment
    distribution?: BlockAlignment // The main-axis alignment
    placement?: BlockPlacement // The main-axis alignment
  }

  Slots: {
    default: HTMLElement[] // The default slot
  }
}

class VStack extends HTMLElement<VStackSignature> {}

declare global {
  interface HTMLElementTagNameMap {
    'v-stack': VStack // <v-stack></v-stack>
  }
}

Try It

See also

Arranging views

HStack Component

A view that arranges its children side by side.