Module: BetterUi::Application::Components::Card::CardHelper

Included in:
BetterUi::Application::Components::Card, BetterUi::ApplicationHelper
Defined in:
app/helpers/better_ui/application/components/card/card_helper.rb

Instance Method Summary collapse

Instance Method Details

#bui_card(title:, value:, trend: nil, change: nil, color: :green, theme: :default, size: :medium, rounded: :medium, shadow: :small, classes: nil, form: nil, **options) ⇒ String

Helper per creare una card per metriche e statistiche nelle dashboard applicative

Examples:

Card base con solo titolo e valore

<%= bui_card(title: "Utenti Attivi", value: "1.234") %>

Card con trend positivo

<%= bui_card(
  title: "Vendite Totali",
  value: "€ 45.231",
  trend: :up,
  change: "+12%",
  color: :green
) %>

Card con trend negativo

<%= bui_card(
  title: "Conversioni",
  value: "2.8%",
  trend: :down,
  change: "-5%",
  color: :red
) %>

Card con tema e dimensioni personalizzate

<%= bui_card(
  title: "Revenue",
  value: "$89,432",
  theme: :primary,
  size: :large,
  rounded: :large,
  shadow: :medium
) %>

Card con attributi HTML aggiuntivi

<%= bui_card(
  title: "Performance",
  value: "98.5%",
  classes: "transition-all hover:shadow-lg",
  data: { controller: "stats" },
  id: "performance-card"
) %>

Parameters:

  • title (String) —

    Il titolo/etichetta della metrica

  • value (String) —

    Il valore principale da visualizzare

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

    La direzione del trend (:up, :down, nil), default nil

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

    Il valore del cambiamento (es. “+12%”), default nil

  • color (Symbol) (defaults to: :green) —

    Il colore del trend (:green, :red, :blue, :yellow, :purple, :indigo, :gray), default :green

  • theme (Symbol) (defaults to: :default) —

    Il tema della card (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet, :purple), default :default

  • size (Symbol) (defaults to: :medium) —

    La dimensione della card (:small, :medium, :large), default :medium

  • rounded (Symbol) (defaults to: :medium) —

    Il livello di arrotondamento (:none, :small, :medium, :large, :full), default :medium

  • shadow (Symbol) (defaults to: :small) —

    Il tipo di ombra (:none, :small, :medium, :large), default :small

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

    Classi CSS aggiuntive per il contenitore principale

  • form (Nil) (defaults to: nil) —

    Parametro form per compatibilità con form builder (non utilizzato)

  • options (Hash) —

    Attributi HTML aggiuntivi da passare al div principale

Returns:

  • (String) —

    HTML della card per metriche



64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
# File 'app/helpers/better_ui/application/components/card/card_helper.rb', line 64

def bui_card(
  title:,
  value:,
  trend: nil,
  change: nil,
  color: :green,
  theme: :default,
  size: :medium,
  rounded: :medium,
  shadow: :small,
  classes: nil,
  form: nil,
  **options
)
  render BetterUi::Application::Card::Component.new(
    title: title,
    value: value,
    trend: trend,
    change: change,
    color: color,
    theme: theme,
    size: size,
    rounded: rounded,
    shadow: shadow,
    classes: classes,
    **options
  )
end