Column

Beta

Vertical flex layout with configurable alignment and spacing.

Installation

npm install @xaui/native

Import

import { Column } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

import { Column } from '@xaui/native/view'

export function Example() {
  return (
    <Column>
      {/* children */}
    </Column>
  )
}

Basic Column

Stack children vertically with a spacing gap.

import { Column } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function BasicColumnExample() {
  return (
    <Column spacing={12}>
      <Typography>First</Typography>
      <Typography>Second</Typography>
      <Typography>Third</Typography>
    </Column>
  )
}

Main Axis Alignment

Control vertical distribution of children.

import { Column } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function MainAxisExample() {
  return (
    <Column mainAxisAlignment="space-between" style={{ height: 200 }}>
      <Typography>Top</Typography>
      <Typography>Middle</Typography>
      <Typography>Bottom</Typography>
    </Column>
  )
}

Cross Axis Alignment

Align children horizontally inside the column.

import { Column } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function CrossAxisExample() {
  return (
    <Column crossAxisAlignment="center" spacing={8}>
      <Typography>Centered item</Typography>
      <Typography>Another centered item</Typography>
    </Column>
  )
}