Class: DaisyUI::Card

Inherits:
BaseComponent show all
Defined in:
app/components/daisy_ui/data_display/card.rb,
app/components/daisy_ui/data_display/card/body.rb,
app/components/daisy_ui/data_display/card/title.rb,
app/components/daisy_ui/data_display/card/figure.rb,
app/components/daisy_ui/data_display/card/actions.rb

Overview

Card component for displaying content in a contained card format

Examples:

Basic usage with simple button

<%= render(CardComponent.new(
  title: "Card Title",
  description: "Card description here",
  button: { text: "Action", color: :primary, justify: :end }
)) %>

With figure/image

<%= render(CardComponent.new(
  img_url: "https://picsum.photos/400/200"
)) %>

Bordered variant

<%= render(CardComponent.new(variant: :bordered)) do |component| %>
  <% component.with_body(title: "Bordered Card") %>
<% end %>

Side image variant

<%= render(CardComponent.new(
  variant: :side,
  img_url: "https://picsum.photos/200/400"
)) do |component| %>
  <% component.with_body do |body| %>
    <% body.with_title { "Side Image" } %>
  <% end %>
<% end %>

With actions

<%= render(CardComponent.new) do |component| %>
  <% component.with_body do |body| %>
    <% body.with_title { "Card with Actions" } %>
    <% body.with_actions(justify: :between) do %>
      <%= render(ButtonComponent.new(text: "Action")) %>
    <% end %>
  <% end %>
<% end %>

Defined Under Namespace

Classes: Actions, Body, Figure, Title

Constant Summary collapse

VARIANTS =

Available card variants

{
  compact: 'card-compact',
  side: 'card-side',
  side_responsive: 'lg:card-side',
  bordered: 'card-border',
  dash: 'card-dash'
}.freeze
COLORS = 
{
  primary: 'bg-primary text-primary-content',
  secondary: 'bg-secondary text-secondary-content',
  accent: 'bg-accent text-accent-content',
  neutral: 'bg-neutral text-neutral-content',
  base: 'bg-base-100'
}.freeze
SIZES = 
{
  xs: 'card-xs',
  sm: 'card-sm',
  md: 'card-md',
  lg: 'card-lg',
  xl: 'card-xl'
}.freeze

Instance Method Summary collapse

Constructor Details

#initialize(variant: nil, image_full: false, title: nil, description: nil, button: nil, img_url: nil, img_alt: nil, bottom_image: false, shadow: false, size: nil, color: :base, **system_arguments) ⇒ Card

Returns a new instance of Card.

Options Hash (button:):

  • :text (String) —

    Button text

  • :color (Symbol) —

    Button color (primary, secondary, etc)

  • :variant (Symbol) —

    Button variant (outline, soft, etc)

  • :size (Symbol) —

    Button size (xs, sm, md, lg, xl)

  • :justify (Symbol) —

    Button justification (start, end, center, between, around, evenly)



94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
# File 'app/components/daisy_ui/data_display/card.rb', line 94

def initialize(variant: nil,
               image_full: false,
               title: nil,
               description: nil,
               button: nil,
               img_url: nil,
               img_alt: nil,
               bottom_image: false,
               shadow: false,
               size: nil,
               color: :base,
               **system_arguments)
  @variant = build_argument(variant, VARIANTS, 'variant')
  @color = build_argument(color, COLORS, 'color')
  @size = build_argument(size, SIZES, 'size')
  @image_full = image_full
  @title = title
  @description = description
  @button = button
  @img_url = img_url
  @img_alt = img_alt
  @shadow = shadow
  @bottom_image = bottom_image
  super(**system_arguments)
end

Instance Method Details

#before_render ⇒ Object 



120
121
122
123
 
# File 'app/components/daisy_ui/data_display/card.rb', line 120

def before_render
  with_figure if @img_url && !figure?
  with_body unless body?
end

#call ⇒ Object 



125
126
127
128
129
 
# File 'app/components/daisy_ui/data_display/card.rb', line 125

def call
  tag.div(**html_attributes) do
    safe_join(render_in_oder)
  end
end

#render_in_oder ⇒ Object 



131
132
133
134
135
136
137
 
# File 'app/components/daisy_ui/data_display/card.rb', line 131

def render_in_oder
  if @bottom_image
    [body, figure].compact
  else
    [figure, body].compact
  end
end