Avatar
An image element with a fallback for representing the user.
Usage
Image & fallback
JDAvatar do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end
Copied!
Copy failed!
Only fallback
JD
Avatar do AvatarFallback { "JD" } end
Copied!
Copy failed!
Sizes
JDJDJDJDJDdiv(class: 'flex items-center space-x-2') do # size: :xs Avatar(size: :xs) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end # size: :sm Avatar(size: :sm) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end # size: :md Avatar(size: :md) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end # size: :lg Avatar(size: :lg) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end # size: :xl Avatar(size: :xl) do AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper") AvatarFallback { "JD" } end end
Copied!
Copy failed!
Sizes (only fallback)
JDJDJDJDJD
div(class: 'flex items-center space-x-2') do # size: :xs Avatar(size: :xs) do AvatarFallback { "JD" } end # size: :sm Avatar(size: :sm) do AvatarFallback { "JD" } end # size: :md Avatar(size: :md) do AvatarFallback { "JD" } end # size: :lg Avatar(size: :lg) do AvatarFallback { "JD" } end # size: :xl Avatar(size: :xl) do AvatarFallback { "JD" } end end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component Avatar
Copied!
Copy failed!
Manual installation
1
Add RubyUI::Avatar to app/components/ruby_ui/avatar.rb
# frozen_string_literal: true module RubyUI class Avatar < Base SIZES = { xs: "h-4 w-4 text-[0.5rem]", sm: "h-6 w-6 text-xs", md: "h-10 w-10 text-base", lg: "h-14 w-14 text-xl", xl: "h-20 w-20 text-3xl" } def initialize(size: :md, **attrs) @size = size @size_classes = SIZES[@size] super(**attrs) end def view_template(&) span(**attrs, &) end private def default_attrs { class: ["relative flex shrink-0 overflow-hidden rounded-full", @size_classes] } end end end
Copied!
Copy failed!
2
Add RubyUI::AvatarFallback to app/components/ruby_ui/avatar/avatar_fallback.rb
# frozen_string_literal: true module RubyUI class AvatarFallback < Base def view_template(&) span(**attrs, &) end private def default_attrs { class: "flex h-full w-full items-center justify-center rounded-full bg-muted" } end end end
Copied!
Copy failed!
3
Add RubyUI::AvatarImage to app/components/ruby_ui/avatar/avatar_image.rb
# frozen_string_literal: true module RubyUI class AvatarImage < Base def initialize(src:, alt: "", **attrs) @src = src @alt = alt super(**attrs) end def view_template img(**attrs) end private def default_attrs { loading: "lazy", class: "aspect-square h-full w-full", alt: @alt, src: @src } end end end
Copied!
Copy failed!
Components
| Component | Built using | Source |
|---|---|---|
Avatar | Phlex | |
AvatarFallback | Phlex | |
AvatarImage | Phlex |