Margin

Beta

Wraps content with configurable margin on any or all sides.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Uniform Margin

Add the same margin on all sides.

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

export function UniformMarginExample() {
  return (
    <Margin all={16}>
      <Typography>Content offset by 16px on all sides</Typography>
    </Margin>
  )
}

Vertical & Horizontal Margin

Combine vertical and horizontal shorthand props.

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

export function DirectionalMarginExample() {
  return (
    <Margin vertical={24} horizontal={16}>
      <Typography>24px top/bottom, 16px left/right</Typography>
    </Margin>
  )
}