Components

LazyHGrid

LazyHGrid is a container that arranges its children in a horizontal grid, loading them lazily. LazyHGrid creates a horizontal grid layout with lazy loading for performance.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

<LazyHGrid rows={2} spacing={10}>{items.map(item => (
      <Card key={item.id}>
        <VStack spacing={5} style={{ padding: '15px' }}>
          <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
        </VStack>
      </Card>
    ))}</LazyHGrid>

Three Rows

Preview unavailable for this example in the static docs build.

Show code

<LazyHGrid rows={3} spacing={15}>{items.map(item => (
      <Card key={item.id}>
        <VStack spacing={5} style={{ padding: '20px' }}>
          <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
        </VStack>
      </Card>
    ))}</LazyHGrid>

Four Rows

Preview unavailable for this example in the static docs build.

Show code

<LazyHGrid rows={4} spacing={10}>{items.map(item => (
      <Card key={item.id}>
        <VStack spacing={5} style={{ padding: '15px' }}>
          <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
        </VStack>
      </Card>
    ))}</LazyHGrid>

With Images

Preview unavailable for this example in the static docs build.

Show code

<LazyHGrid rows={2} spacing={10}>
      {items.map(item => (
        <Card key={item.id}>
          <VStack spacing={5}>
            <div style={{ width: '100px', height: '100px', backgroundColor: '#e0e0e0', borderRadius: '4px' }} />
            <Text style={{ padding: '10px', fontWeight: 'bold' }}>{item.name}</Text>
          </VStack>
        </Card>
      ))}
    </LazyHGrid>

Large Grid

Preview unavailable for this example in the static docs build.

Show code

<LazyHGrid rows={3} spacing={10}>
        {largeItems.map(item => (
          <Card key={item.id}>
            <VStack spacing={5} style={{ padding: '15px' }}>
              <Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
            </VStack>
          </Card>
        ))}
      </LazyHGrid>

API

Prop	Type	Required	Description
`rows`	`number`	No	Number of rows in the grid. Default: `2`
`spacing`	`number`	No	Spacing between grid items. Default: `0`

Inherits additional props from IBaseComponent.

Overview

LazyHGrid is a container that arranges its children in a horizontal grid, loading them lazily. LazyHGrid creates a horizontal grid layout with lazy loading for performance.

SwiftUI Correspondence: Similar to SwiftUI's LazyHGrid.

Notes

LazyHGrid requires a rows prop to specify the number of rows
LazyHGrid supports spacing prop for item spacing
LazyHGrid only renders visible items for better performance
LazyHGrid is ideal for horizontal grid layouts with many items
Default rows is 2 if not specified

Best Practices

Rows: Choose appropriate number of rows for your layout
Spacing: Use consistent spacing between grid items
Performance: LazyHGrid improves performance for large grids
Keys: Always provide unique keys for grid items
Responsive: Consider responsive row counts for different screen sizes

LabeledContent

LabeledContent presents a label and related value using the same compact summary pattern as SwiftUI.

LazyHStack

LazyHStack is a container that arranges its children horizontally, loading them lazily. LazyHStack is similar to HStack but only renders children that are visible in the viewport, improving performance for long horizontal lists.

LazyHGrid

Examples

API

Overview

Notes

Best Practices

On this page