Class: DaisyUI::Avatar

Inherits:
BaseComponent show all
Defined in:
app/components/daisy_ui/data_display/avatar.rb

Overview

Avatar component implementing DaisyUI’s avatar styles

Examples:

Basic usage with image

<%= render(AvatarComponent.new(img_src: "user.jpg", img_alt: "User")) %>

With placeholder text

<%= render(AvatarComponent.new(placeholder_text: "JD")) %>

Custom size

<%= render(AvatarComponent.new(size: :w32, img_src: "user.jpg")) %>

Different shapes

<%= render(AvatarComponent.new(
  img_src: "user.jpg",
  shape: :squircle
)) %>

With online status

<%= render(AvatarComponent.new(
  img_src: "user.jpg",
  status: :online
)) %>

With custom placeholder content

<%= render(AvatarComponent.new) do |c|
  c.with_placeholder do
    helpers.user_icon
  end
end %>

Constant Summary collapse

SIZES =

Available avatar sizes in pixels

{
  w8: 'w-8',
  w12: 'w-12',
  w10: 'w-10',
  w16: 'w-16',
  w20: 'w-20',
  w24: 'w-24',
  w32: 'w-32'
}.freeze
TEXT_SIZES =

Text sizes mapped to avatar sizes

{
  w8: 'text-xs',
  w12: nil, # default text size
  w16: 'text-xl',
  w20: 'text-2xl',
  w24: 'text-3xl',
  w32: 'text-4xl'
}.freeze
SHAPES =

Available avatar shapes

{
  circle: 'rounded-full',
  squircle: 'mask mask-squircle',
  hexagon: 'mask mask-hexagon',
  triangle: 'mask mask-triangle'
}.freeze
STATUSES =

Available status indicators

{
  online: 'avatar-online',
  offline: 'avatar-offline'
}.freeze

Instance Method Summary collapse

Constructor Details

#initialize(size: nil, shape: nil, status: nil, img_src: nil, img_alt: nil, placeholder_text: nil, inner_class: nil, **system_arguments) ⇒ Avatar

Returns a new instance of Avatar.

Parameters:

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

    Size of the avatar (w8/w12/w16/w20/w24/w32)

  • shape (Symbol) (defaults to: nil) —

    Shape of the avatar (circle/squircle/hexagon/triangle)

  • status (Symbol) (defaults to: nil) —

    Status indicator (online/offline)

  • img_src (String) (defaults to: nil) —

    URL of the avatar image

  • img_alt (String) (defaults to: nil) —

    Alt text for the avatar image

  • placeholder_text (String) (defaults to: nil) —

    Text to show when no image is provided

  • system_arguments (Hash) —

    Additional HTML attributes



76
77
78
79
80
81
82
83
84
85
86
87
88
 
# File 'app/components/daisy_ui/data_display/avatar.rb', line 76

def initialize(size: nil, shape: nil, status: nil, img_src: nil, img_alt: nil, placeholder_text: nil,
               inner_class: nil,
               **system_arguments)
  @size = build_argument(size, SIZES, 'size')
  @shape = build_argument(shape, SHAPES, 'shape')
  @status = build_argument(status, STATUSES, 'status')
  @img_src = img_src
  @img_alt = img_alt
  @placeholder_text = placeholder_text
  @size_key = size # Keep original size key for text size lookup
  @inner_class = inner_class
  super(**system_arguments)
end

Instance Method Details

#call ⇒ Object 



90
91
92
93
94
95
96
97
98
99
100
 
# File 'app/components/daisy_ui/data_display/avatar.rb', line 90

def call
  tag.div(**html_attributes) do
    tag.div(class: inner_classes) do
      if @img_src.present?
        tag.img(src: @img_src, alt: @img_alt)
      elsif @placeholder_text.present?
        tag.span(@placeholder_text, class: text_size_class)
      end
    end
  end
end