Padding

Beta

Wraps content with configurable padding on any or all sides.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

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

Uniform Padding

Apply the same padding to all sides with all.

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

export function UniformPaddingExample() {
  return (
    <Padding all={16}>
      <Typography>Content with 16px padding on all sides</Typography>
    </Padding>
  )
}

Directional Padding

Fine-tune padding per side.

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

export function DirectionalPaddingExample() {
  return (
    <Padding top={24} bottom={8} horizontal={16}>
      <Typography>Custom padding per side</Typography>
    </Padding>
  )
}