View

The View component is a layout primitive that makes it easy to arrange elements in a vertical or horizontal View with consistent spacing. It's built on top of flexbox and provides a simple API for common layout patterns.

Import

import { View } from '@oztix/roadie-components'

Examples

Basic View

By default, View arranges items vertically with no gap:

<View>
  <View p='100' bg='neutral.surface.subtle'>
    Item 1
  </View>
  <View p='100' bg='neutral.surface.subtle'>
    Item 2
  </View>
  <View p='100' bg='neutral.surface.subtle'>
    Item 3
  </View>
</View>

Horizontal View

Use flexDirection='row' to arrange items horizontally:

<View flexDirection='row' gap='200'>
  <View p='100' bg='neutral.surface.subtle'>Item 1</View>
  <View p='100' bg='neutral.surface.subtle'>Item 2</View>
  <View p='100' bg='neutral.surface.subtle'>Item 3</View>
</View>

Spacing Between Items

Control the gap between items using the gap prop:

<View gap='300'>
  <View p='100' bg='neutral.surface.subtle'>Item 1</View>
  <View p='100' bg='neutral.surface.subtle'>Item 2</View>
  <View p='100' bg='neutral.surface.subtle'>Item 3</View>
</View>

Alignment

Control alignment using alignItems and justifyContent props:

<View
  flexDirection='row'
  alignItems='center'
  justifyContent='space-between'
  height='1000'
  bg='neutral.surface.subtle'
>
  <View p='100' bg='neutral.surface.subtle'>Start</View>
  <View p='100' bg='neutral.surface.subtle'>Center</View>
  <View p='100' bg='neutral.surface.subtle'>End</View>
</View>

Responsive Props

View supports responsive props for different screen sizes:

<View
  flexDirection={{ base: 'column', md: 'row' }}
  gap={{ base: '100', md: '200' }}
  alignItems={{ base: 'stretch', md: 'center' }}
>
  <View p='100' bg='neutral.surface.subtle'>
    Item 1
  </View>
  <View p='100' bg='neutral.surface.subtle'>
    Item 2
  </View>
  <View p='100' bg='neutral.surface.subtle'>
    Item 3
  </View>
</View>

Nested Views

Views can be nested to create complex layouts:

<View gap='200'>
  <View flexDirection='row' gap='200' justifyContent='center'>
    <View p='100' bg='neutral.surface.subtle'>Top Left</View>
    <View p='100' bg='neutral.surface.subtle'>Top Right</View>
  </View>
  <View flexDirection='row' gap='200' justifyContent='space-between'>
    <View p='100' bg='neutral.surface.subtle'>Bottom Left</View>
    <View p='100' bg='neutral.surface.subtle'>Bottom Right</View>
  </View>
</View>

Custom elements

View can be rendered as any HTML element or component (like section or Link) using the as prop:

<View as='section' bg='neutral.surface.subtle'>
  <View p='100' bg='neutral.surface.subtle'>Section</View>
  <View as={Link} href='/'>Link</View>
</View>

Custom attributes

View can be rendered with custom attributes like data-testid:

<View as='section' data-testid='section'>
  <View p='100' bg='neutral.surface.subtle'>Section</View>
</View>