Class: Glib::JsonUi::ViewBuilder::Panels::Flow

Inherits:

View

• Object
• JsonUiElement
• View
• Glib::JsonUi::ViewBuilder::Panels::Flow

Defined in:

app/helpers/glib/json_ui/view_builder/panels.rb

Overview

Flow layout panel that wraps children like text (left to right, then top to bottom).

Flow panels use CSS flexbox with flex-wrap, creating a responsive grid-like layout where children wrap to the next line when they exceed container width. Supports responsive gap and padding for different screen sizes.

Examples:

Basic flow layout

panel.panels_flow width: 300, innerPadding: { all: 10 }, childViews: ->(flow) do
  (1..10).each do |n|
    flow.button text: "Item #{n}"
  end
end

Responsive gaps and padding

panel.panels_flow \
  width: 'matchParent',
  xs: { gap: { x: 4, y: 4 }, padding: { all: 8 } },
  md: { gap: { x: 16, y: 16 }, padding: { all: 24 } },
  lg: { gap: { all: 32 } },
  childViews: ->(flow) do
    @products.each do |product|
      flow.panels_vertical styleClasses: ['card'], childViews: ->(card) do
        card.image url: product.image_url
        card.h4 text: product.name
      end
    end
  end

Tag cloud with inner padding

panel.panels_flow \
  innerPadding: { x: 5, y: 5 },
  childViews: ->(flow) do
    @tags.each do |tag|
      flow.chip text: tag.name
    end
  end

See Also:

• Garage examples

Instance Attribute Summary

Attributes inherited from JsonUiElement

#json, #page

Method Summary

Methods inherited from View

component_name

Methods inherited from JsonUiElement

#initialize, #props

Constructor Details

This class inherits a constructor from Glib::JsonUi::JsonUiElement