Class: Glib::JsonUi::ViewBuilder::Panels::Vertical

Inherits:

View

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

Defined in:

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

Overview

Vertical layout panel that stacks children vertically (top to bottom).

Vertical panels use CSS flexbox with flex-direction: column. Children are arranged vertically and can be aligned or distributed in various ways.

Examples:

Basic vertical stacking

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

Centered content with equal spacing

panel.panels_vertical \
  width: 'matchParent',
  height: 300,
  distribution: 'spaceEqually',
  align: 'center',
  childViews: ->(vert) do
    vert.button text: 'Top'
    vert.button text: 'Middle'
    vert.button text: 'Bottom'
  end

Clickable vertical panel

panel.panels_vertical \
  styleClasses: ['card'],
  onClick: ->(action) { action.windows_open url: item_path(@item) },
  childViews: ->(vert) do
    vert.h3 text: @item.title
    vert.p text: @item.description
  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