Skip to content

AvatarStack

Use AvatarStack to stack multiple avatars together.

Examples

Default

@kittenuser @kittenuser
@kittenuser
<%= render(Primer::AvatarStackComponent.new) do |c| %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<% end %>

Align right

@kittenuser @kittenuser
@kittenuser
<%= render(Primer::AvatarStackComponent.new(align: :right)) do |c| %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<% end %>

With tooltip

@kittenuser @kittenuser
@kittenuser
<%= render(Primer::AvatarStackComponent.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<% end %>

Arguments

NameTypeDefaultDescription
alignSymbol:leftOne of :left and :right.
tooltippedBooleanfalseWhether to add a tooltip to the stack or not.
body_argumentsHash{}Parameters to add to the Body. If tooltipped is set, has the same arguments as Tooltip.
system_argumentsHashN/ASystem arguments

Slots

Avatars

Required list of stacked avatars.

NameTypeDefaultDescription
kwargsHashN/AThe same arguments as Avatar.