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

Inherits:
View show all
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:

Instance Attribute Summary

Attributes inherited from JsonUiElement

#json, #page

Method Summary

Methods inherited from View

component_name

Methods inherited from JsonUiElement

action, any, array, badgeable, bool, color, component_name, date, date_time, enum, float, hash, icon, #initialize, int, length, menu, panels_builder, #props, required, singleton_array, string, text, url, views

Constructor Details

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