Class: PhlexKit::Card

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/card/card.rb

Overview

Container card kit, ported from ruby_ui's Card (https://ruby-ui.com). Six presentational parts — Card + CardHeader / CardTitle / CardDescription / CardContent / CardFooter — each wrapping its children in an element with a base class and passing arbitrary attrs straight through via mix (so a caller class: augments rather than clobbers, exactly like PhlexKit::Button).

Styles are namespaced .pk-card* in card.css rather than .card: this app already uses .card for the dashboard stat tiles (application.css), which are a different, padded component. Compose the parts:

render PhlexKit::Card.new do
render PhlexKit::CardHeader.new do
  render PhlexKit::CardTitle.new { "Title" }
  render PhlexKit::CardDescription.new { "Subtitle" }
end
render PhlexKit::CardContent.new { "…" }
render PhlexKit::CardFooter.new { render PhlexKit::Button.new { "Action" } }
end

Constant Summary collapse

SIZES =

size => modifier class; :sm tightens --pk-card-spacing (shadcn's size prop).

{ default: nil, sm: "sm" }.freeze

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(size: :default, **attrs) ⇒ Card

Returns a new instance of Card.



24
25
26
27
 
# File 'app/components/phlex_kit/card/card.rb', line 24

def initialize(size: :default, **attrs)
  @size = size.to_sym
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



29
30
31
 
# File 'app/components/phlex_kit/card/card.rb', line 29

def view_template(&block)
  div(**mix({ class: [ "pk-card", fetch_option(SIZES, @size, :size) ].compact.join(" ") }, @attrs), &block)
end