Class: Glib::JsonUi::ViewBuilder::Panels::Responsive

Inherits:

View

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

Defined in:

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

Overview

Responsive grid panel using Vuetify’s 12-column grid system.

Responsive panels automatically adjust layout based on screen size. Use panels_column children to define grid columns with breakpoint-specific sizing.

Examples:

Responsive two-column layout

panel.panels_responsive width: 'matchParent', childViews: ->(responsive) do
  responsive.panels_column lg: { cols: 8 }, xs: { cols: 12 }, childViews: ->(col) do
    col.h1 text: 'Main Content'
  end
  responsive.panels_column lg: { cols: 4 }, xs: { cols: 12 }, childViews: ->(col) do
    col.h2 text: 'Sidebar'
  end
end

With hover effect

panel.panels_responsive \
  styleClasses: ['card'],
  hoverViews: ->(hover) { hover.label text: 'Click me!' },
  onClick: ->(action) { action.windows_open url: product_path(@product) },
  childViews: ->(panel) do
    panel.h3 text: @product.name
  end

See Also:

• Vuetify Grid Documentation
• 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