Experimental. A row of overlapping avatars, showing who is involved.
Mirrors EXPERIMENTAL_AvatarStack from @digdir/designsystemet-react. The
API may change in a minor version, as it may upstream.
AvatarStack.new
|> AvatarStack.withExpand AvatarStack.Grow
|> AvatarStack.withOverflow "+3"
|> AvatarStack.view [ Attr.attribute "aria-label" "Saksbehandlere" ]
(List.map viewCaseworker (List.take 4 caseworkers))Each avatar gets its own <li>.
<EXPERIMENTAL_AvatarStack> → AvatarStack.new |> AvatarStack.view []expandable → AvatarStack.withExpand AvatarStack.Growexpandable="fixed" → AvatarStack.withExpand AvatarStack.ReserveSpace<li>+5</li> → AvatarStack.withOverflow "+5"style={{ '--dsc-avatar-stack-size': … }} → Attr.attribute "style" "--dsc-avatar-stack-size: …"The deprecated gap, avatarSize, overlap and suffix props are not
ported: use the CSS variables --dsc-avatar-stack-gap,
--dsc-avatar-stack-size and --dsc-avatar-stack-overlap, and
withOverflow.
Set CSS variables with Attr.attribute "style", since Attr.style can't set
custom properties (names starting with --).
A stack that doesn't expand and has no overflow text.
A <ul class="ds-avatar-stack"> with each avatar in an <li>.
Spread the avatars out on hover and focus. Adds tabindex="0" so
keyboard users can expand it too.
How the avatars spread out to their full size on hover and keyboard focus.
Grow: the stack widens as the avatars spread, pushing its neighbours.ReserveSpace: the stack always takes the expanded width, so nothing
around it moves.Text after the avatars for the ones not shown, such as "+5".
Stack options. Start with
new, addwith*options, thenview.