Avatar

composant

The picture of a person, over the initials that show when it is missing or broken, without script.

Aperçu

Clair

Code

<twig:Avatar>
    <twig:Avatar:Fallback>PG</twig:Avatar:Fallback>
    <twig:Avatar:Image src="/p.webp" alt="Philippe" />
</twig:Avatar>

Sombre

Code

<twig:Avatar>
    <twig:Avatar:Fallback>PG</twig:Avatar:Fallback>
    <twig:Avatar:Image src="/p.webp" alt="Philippe" />
</twig:Avatar>

Essayer

Changez les propriétés ; le serveur rend l’exemple de nouveau.

<twig:Avatar>
    <twig:Avatar:Fallback>PG</twig:Avatar:Fallback>
    <twig:Avatar:Image src="/p.webp" alt="Philippe" />
</twig:Avatar>

Variantes

`size`

The avatar size.

Installation

php bin/console ux:install avatar --kit=github.com/parler-haut-interagir-librement/ux-kit

Propriétés

Propriété	Type	Par défaut	Description
`size`	`'default'\|'sm'\|'lg'`	`'default'`	The avatar size.

Accessibility

The picture takes the name of the person as its alt, or an empty one when the name is written next to it.

Fichiers à copier

templates/components/Avatar.html.twig

{%- props
    ## 'default'|'sm'|'lg' The avatar size.
    size = 'default'
-%}
{%- set _size = {sm: ' isSmall', lg: ' isLarge'}[size] ?? '' -%}
<span data-slot="avatar" data-size="{{ size }}"{{ attributes.defaults({class: 'isAvatar' ~ _size}) }}>
{##- The avatar content, typically an image or `Avatar:Fallback`. -#}
{%- block content %}{% endblock -%}
</span>

templates/components/Avatar/Badge.html.twig

<span data-slot="avatar-badge"{{ attributes.defaults({class: 'isAvatarBadge'}) }}>
{##- The badge content, typically an icon indicating status. -#}
{%- block content %}{% endblock -%}
</span>

templates/components/Avatar/Fallback.html.twig

<span data-slot="avatar-fallback"{{ attributes.defaults({class: 'isAvatarFallback'}) }}>
{##- The fallback content displayed when no image is available, typically initials. -#}
{%- block content %}{% endblock -%}
</span>

templates/components/Avatar/Group.html.twig

<div data-slot="avatar-group"{{ attributes.defaults({class: 'isAvatarGroup'}) }}>
{##- The grouped avatars, typically multiple `Avatar` components. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Avatar/GroupCount.html.twig

<div data-slot="avatar-group-count"{{ attributes.defaults({class: 'isAvatarGroupCount'}) }}>
{##- The count indicator showing number of additional avatars (e.g., "+3"). -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Avatar/Image.html.twig

<img data-slot="avatar-image"{{ attributes.defaults({class: 'isAvatarImage', alt: '', loading: 'lazy', decoding: 'async'}) }}>