Class: Glib::JsonUi::ViewBuilder::Panels::Column

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

Overview

Grid column for use within panels_responsive containers.

Columns use Vuetify’s 12-column grid system where you specify how many columns (out of 12) this component should occupy at different breakpoints.

Breakpoints (from smallest to largest):

  • xs: < 600px (mobile phones)

  • sm: 600px - 960px (tablets)

  • md: 960px - 1264px (small laptops)

  • lg: 1264px - 1904px (desktops)

  • xl: 1904px - 2560px (large desktops)

  • xxl: > 2560px (ultra-wide displays)

Examples:

Responsive column that changes width at different screen sizes

responsive.panels_column \
  lg: { cols: 4 },  # 4/12 = 1/3 width on large screens
  md: { cols: 6 },  # 6/12 = 1/2 width on medium screens
  xs: { cols: 12 }, # 12/12 = full width on mobile
  childViews: ->(col) do
    col.h3 text: 'Card Title'
  end

Column with responsive padding and ordering

responsive.panels_column \
  lg: { cols: 8, order: 0, padding: { bottom: 0 } },
  xs: { cols: 12, order: 1, padding: { bottom: 20 } },
  childViews: ->(col) do
    col.label text: 'Content'
  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