Class: Glib::JsonUi::ViewBuilder::Panels::Horizontal

Inherits:
View show all
Defined in:
app/helpers/glib/json_ui/view_builder/panels.rb

Overview

Horizontal layout panel that arranges children side-by-side (left to right).

Horizontal panels use CSS flexbox with flex-direction: row. Supports drag-and-drop reordering and various distribution modes.

Examples:

Basic horizontal layout

panel.panels_horizontal backgroundColor: '#f0f0f0', childViews: ->(horiz) do
  horiz.button text: '1'
  horiz.button text: '2'
  horiz.button text: '3'
end

With equal spacing and alignment

panel.panels_horizontal \
  width: 300,
  distribution: 'spaceEqually',
  align: 'middle',
  childViews: ->(horiz) do
    horiz.button text: 'Left'
    horiz.button text: 'Center'
    horiz.button text: 'Right'
  end

With drag-and-drop reordering

panel.panels_horizontal \
  width: 300,
  dragSupport: {
    onDrop: { action: 'http/post', url: reorder_items_path },
    paramNameForFormData: 'order_data'
  },
  childViews: ->(horiz) do
    @items.each do |item|
      horiz.button id: "item_#{item.id}", text: item.name
    end
  end

With overlapping items (negative margins)

panel.panels_horizontal \
  distribution: 'overlap-3',  # 12px negative margin
  childViews: ->(horiz) do
    horiz.avatar url: user1.avatar_url
    horiz.avatar url: user2.avatar_url
    horiz.avatar url: user3.avatar_url
  end

See Also:

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