Raxol.Core.Renderer.View.Layout.Flex (Raxol v0.5.0)

View Source

Handles flex layout functionality for the Raxol view system. Provides row and column layouts with various alignment and justification options.

Summary

Functions

Calculates the layout of flex children based on container size and options.

Creates a column layout container that arranges its children vertically.

Creates a flex container that arranges its children in the specified direction.

Creates a row layout container that arranges its children horizontally.

Functions

calculate_layout(container, size)

Calculates the layout of flex children based on container size and options.

column(opts \\ [])

Creates a column layout container that arranges its children vertically.

Options

  • :children - List of child views to arrange vertically
  • :align - Alignment of children (:start, :center, :end)
  • :justify - Justification of children (:start, :center, :end, :space_between)
  • :gap - Space between children (integer)

Examples

Flex.column(children: [view1, view2])
Flex.column(align: :center, justify: :space_between, children: [view1, view2])

container(opts)

Creates a flex container that arranges its children in the specified direction.

Options

  • :direction - Direction of flex layout (:row or :column)
  • :children - List of child views
  • :align - Alignment of children (:start, :center, :end)
  • :justify - Justification of children (:start, :center, :end, :space_between)
  • :gap - Space between children (integer)
  • :wrap - Whether to wrap children (boolean)

Examples

Flex.container(direction: :row, children: [view1, view2])
Flex.container(direction: :column, align: :center, children: [view1, view2])

row(opts \\ [])

Creates a row layout container that arranges its children horizontally.

Options

  • :children - List of child views to arrange horizontally
  • :align - Alignment of children (:start, :center, :end)
  • :justify - Justification of children (:start, :center, :end, :space_between)
  • :gap - Space between children (integer)

Examples

Flex.row(children: [view1, view2])
Flex.row(align: :center, justify: :space_between, children: [view1, view2])