Module: BetterUi::General::Components::Grid::GridHelper

Included in:
ApplicationHelper
Defined in:
app/helpers/better_ui/general/components/grid/grid_helper.rb

Instance Method Summary collapse

Instance Method Details

#bui_grid(cols: 1, rows: nil, gap: :medium, flow: :row, align_items: nil, justify_items: nil, classes: '', id: nil, **options, &block) ⇒ String

Helper per creare un contenitore grid CSS

Examples:

Uso base

<%= bui_grid(cols: 3, gap: :medium) do %>
  <%= content %>
<% end %>

Con responsive

<%= bui_grid(cols: {sm: 1, md: 2, lg: 3, xl: 4}, gap: :large) do %>
  <%= content %>
<% end %>

Con righe e allineamento

<%= bui_grid(cols: 2, rows: 3, gap: :medium, align_items: :center) do %>
  <%= content %>
<% end %>

Con flow e justify

<%= bui_grid(cols: 4, flow: :col, justify_items: :center) do %>
  <%= content %>
<% end %>

Con attributi HTML aggiuntivi

<%= bui_grid(cols: 3, id: "main-grid", data: {testid: "grid"}) do %>
  <%= content %>
<% end %>



47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
# File 'app/helpers/better_ui/general/components/grid/grid_helper.rb', line 47

def bui_grid(
  cols: 1,
  rows: nil,
  gap: :medium,
  flow: :row,
  align_items: nil,
  justify_items: nil,
  classes: '',
  id: nil,
  **options,
  &block
)
  render BetterUi::General::Grid::Component.new(
    cols: cols,
    rows: rows,
    gap: gap,
    flow: flow,
    align_items: align_items,
    justify_items: justify_items,
    classes: classes,
    id: id,
    **options
  ), &block
end

#bui_grid_cell(col: nil, row: nil, col_start: nil, col_end: nil, row_start: nil, row_end: nil, justify_self: nil, align_self: nil, classes: '', id: nil, **options, &block) ⇒ String

Helper per creare una cella grid con controllo posizionamento

Examples:

Uso base

<%= bui_grid_cell do %>
  <div>Contenuto cella</div>
<% end %>

Con span colonne

<%= bui_grid_cell(col: 2) do %>
  <div>Cella che occupa 2 colonne</div>
<% end %>

Con responsive

<%= bui_grid_cell(col: {sm: 1, md: 2, lg: 3}) do %>
  <div>Cella responsive</div>
<% end %>

Con posizionamento specifico

<%= bui_grid_cell(col_start: 2, col_end: 4) do %>
  <div>Cella dalla colonna 2 alla 4</div>
<% end %>

Con allineamento

<%= bui_grid_cell(col: 2, justify_self: :center, align_self: :start) do %>
  <div>Cella centrata orizzontalmente</div>
<% end %>



113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
# File 'app/helpers/better_ui/general/components/grid/grid_helper.rb', line 113

def bui_grid_cell(
  col: nil,
  row: nil,
  col_start: nil,
  col_end: nil,
  row_start: nil,
  row_end: nil,
  justify_self: nil,
  align_self: nil,
  classes: '',
  id: nil,
  **options,
  &block
)
  render BetterUi::General::Grid::CellComponent.new(
    col: col,
    row: row,
    col_start: col_start,
    col_end: col_end,
    row_start: row_start,
    row_end: row_end,
    justify_self: justify_self,
    align_self: align_self,
    classes: classes,
    id: id,
    **options
  ), &block
end