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 %>

Parameters:

  • cols (Integer, Hash) (defaults to: 1) —

    Numero colonne (1-12, :auto, :none) o hash responsive 1, md: 2, lg: 3, xl: 4

  • rows (Integer, Hash, nil) (defaults to: nil) —

    Numero righe (1-6, :auto, :none) o hash responsive

  • gap (Symbol, Hash) (defaults to: :medium) —

    Spaziatura (:none, :small, :medium, :large) o hash responsive

  • flow (Symbol) (defaults to: :row) —

    Direzione flusso (:row, :col, :row_dense, :col_dense)

  • align_items (Symbol, nil) (defaults to: nil) —

    Allineamento verticale (:start, :center, :end, :stretch)

  • justify_items (Symbol, nil) (defaults to: nil) —

    Allineamento orizzontale (:start, :center, :end, :stretch)

  • classes (String) (defaults to: '') —

    Classi CSS aggiuntive

  • id (String, nil) (defaults to: nil) —

    ID elemento

  • options (Hash) —

    Attributi HTML aggiuntivi

  • block (Proc) —

    Blocco contenente le celle grid

Returns:

  • (String) —

    HTML del grid container



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 %>

Parameters:

  • col (Integer, Hash, nil) (defaults to: nil) —

    Span colonne (1-12, :auto, :full) o hash responsive 1, md: 2, lg: 3

  • row (Integer, Hash, nil) (defaults to: nil) —

    Span righe (1-6, :auto, :full) o hash responsive

  • col_start (Integer, Hash, nil) (defaults to: nil) —

    Posizione inizio colonna (1-13, :auto) o hash responsive

  • col_end (Integer, Hash, nil) (defaults to: nil) —

    Posizione fine colonna (1-13, :auto) o hash responsive

  • row_start (Integer, Hash, nil) (defaults to: nil) —

    Posizione inizio riga (1-7, :auto) o hash responsive

  • row_end (Integer, Hash, nil) (defaults to: nil) —

    Posizione fine riga (1-7, :auto) o hash responsive

  • justify_self (Symbol, nil) (defaults to: nil) —

    Allineamento orizzontale cella (:auto, :start, :center, :end, :stretch)

  • align_self (Symbol, nil) (defaults to: nil) —

    Allineamento verticale cella (:auto, :start, :center, :end, :stretch)

  • classes (String) (defaults to: '') —

    Classi CSS aggiuntive

  • id (String, nil) (defaults to: nil) —

    ID elemento

  • options (Hash) —

    Attributi HTML aggiuntivi

  • block (Proc) —

    Blocco contenente il contenuto della cella

Returns:

  • (String) —

    HTML della grid cell



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